2b:null 2c:["$","title",null,{"children":"Vlisco | Hong Kim | Observable"}] 31:Tfd9d,viewof vliscoMap = { const container = htl.html`

`; yield container; function ensureCSS(id, href) { if (!document.getElementById(id)) { const l = document.createElement("link"); l.id = id; l.rel = "stylesheet"; l.href = href; document.head.appendChild(l); } } ensureCSS("leaflet-css", "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"); ensureCSS("mc-css", "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.css"); ensureCSS("mcd-css", "https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.css"); const L = await require("leaflet@1.9.4/dist/leaflet.js"); let hasCluster = true; try { await require.alias({leaflet: L})("leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"); hasCluster = typeof L.markerClusterGroup === "function"; } catch (err) { hasCluster = false; } ensureCSS("maplibre-css", "https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css"); const maplibregl = await require("maplibre-gl@4.7.1/dist/maplibre-gl.js"); await require.alias({leaflet: L, "maplibre-gl": maplibregl})( "@maplibre/maplibre-gl-leaflet@0.0.22/leaflet-maplibre-gl.js" ); const COUNTRY_COLORS = { "Benin": "#ff6b4a", "DRC": "#4caf50", "Ghana": "#ffca28", "Ivory Coast": "#64b5f6", "Togo": "#e91e63" }; const CAMPAIGN_LIST = [ "FW23 · Builder", "SS23 · Women in Movement", "FW22 · Partners in Crime", "SS22 · Print-Focus", "FW21 · Escape", "SS21 · Garden", "FW20 · Euphoria" ]; function getCampaignScore(cap) { if (!cap || typeof cap !== "string") return -1; const s = cap.toUpperCase(); if (s.includes("FW23") || s.includes("BUILDER")) return 2023.2; if (s.includes("SS23") || s.includes("WOMEN IN MOVEMENT")) return 2023.1; if (s.includes("FW22") || s.includes("PARTNERS IN CRIME")) return 2022.2; if (s.includes("SS22") || s.includes("PRINT-FOCUS") || s.includes("PRINT FOCUS")) return 2022.1; if (s.includes("FW21") || s.includes("ESCAPE")) return 2021.2; if (s.includes("SS21") || s.includes("GARDEN")) return 2021.1; if (s.includes("FW20") || s.includes("EUPHORIA")) return 2020.2; const yMatch = s.match(/20\d\d/); if (yMatch) return parseFloat(yMatch[0]); return 0; } function sortImagesBySeason(imgList) { return [...imgList].sort((a, b) => { const capA = typeof a === "object" ? (a.caption || "") : ""; const capB = typeof b === "object" ? (b.caption || "") : ""; return getCampaignScore(capB) - getCampaignScore(capA); }); } function parseArea(dimStr) { if (!dimStr) return null; const m2 = dimStr.match(/([\d.]+)\s*m²/i); if (m2) return parseFloat(m2[1]); const m = dimStr.match(/([\d.]+)\s*x\s*([\d.]+)\s*(mm|m)?/i); if (!m) return null; let a = parseFloat(m[1]), b = parseFloat(m[2]); const unit = (m[3] || "m").toLowerCase(); if (unit === "mm") { a /= 1000; b /= 1000; } return +(a * b).toFixed(2); } const VL_STORAGE_KEY = "vlisco_site_images_data_v4"; const VL_CAPTION_STORAGE_KEY = "vlisco_captions_lightweight_v4"; const VL_DB_NAME = "VliscoAppDB_v4"; const VL_DB_STORE = "site_images"; function openDB() { return new Promise((resolve) => { if (!window.indexedDB) return resolve(null); const req = indexedDB.open(VL_DB_NAME, 1); req.onupgradeneeded = () => { const db = req.result; if (!db.objectStoreNames.contains(VL_DB_STORE)) { db.createObjectStore(VL_DB_STORE); } }; req.onsuccess = () => resolve(req.result); req.onerror = () => resolve(null); }); } async function idbGet(key) { try { const db = await openDB(); if (!db) return null; return new Promise((resolve) => { const tx = db.transaction(VL_DB_STORE, "readonly"); const store = tx.objectStore(VL_DB_STORE); const req = store.get(key); req.onsuccess = () => resolve(req.result); req.onerror = () => resolve(null); }); } catch (e) { return null; } } async function idbSet(key, val) { try { const db = await openDB(); if (!db) return false; return new Promise((resolve) => { const tx = db.transaction(VL_DB_STORE, "readwrite"); const store = tx.objectStore(VL_DB_STORE); const req = store.put(val, key); req.onsuccess = () => resolve(true); req.onerror = () => resolve(false); }); } catch (e) { return false; } } const siteImagesMap = new Map(); function showSaveToast() { let toast = container.querySelector(".vl-toast"); if (!toast) { toast = document.createElement("div"); toast.className = "vl-toast"; toast.style.cssText = "position:absolute;bottom:20px;right:60px;z-index:99999;background:rgba(20,20,20,0.95);border:1px solid #a4ff01;color:#a4ff01;padding:6px 14px;border-radius:20px;font-size:11px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,0.7);pointer-events:none;transition:opacity .3s;opacity:0;"; container.appendChild(toast); } toast.textContent = "💾 Changes saved to browser!"; toast.style.opacity = "1"; setTimeout(() => { if (toast) toast.style.opacity = "0"; }, 2000); } async function saveStorage() { try { const fullObj = {}; const lightCaps = {}; for (const [id, imgs] of siteImagesMap.entries()) { const s = sites.find(item => item.id === id); const nameKey = s ? s.name : String(id); fullObj[id] = imgs; fullObj[nameKey] = imgs; const capList = imgs.map(img => (typeof img === "object" ? (img.caption || "") : "")); lightCaps[id] = capList; lightCaps[nameKey] = capList; } await idbSet(VL_STORAGE_KEY, fullObj); try { localStorage.setItem(VL_CAPTION_STORAGE_KEY, JSON.stringify(lightCaps)); } catch (e) {} showSaveToast(); } catch (e) { console.warn("Vlisco save error:", e); } } const rawFeatures = (typeof vlisco !== "undefined" && vlisco?.features) ? vlisco.features : []; const sites = rawFeatures .filter(f => f && f.geometry && Array.isArray(f.geometry.coordinates) && f.geometry.coordinates.length >= 2) .map((f, id) => { const p = f.properties || {}; const [lng, lat] = f.geometry.coordinates; const parsedLat = Number(lat); const parsedLng = Number(lng); if (isNaN(parsedLat) || isNaN(parsedLng)) return null; const rawImgs = Array.isArray(p["Images"]) ? p["Images"] : []; const initialImageObjects = rawImgs.map((img, idx) => { if (typeof img === "object" && img !== null) { return { url: img.url || "", caption: img.caption || `Photo ${idx + 1}` }; } return { url: img, caption: `Photo ${idx + 1}` }; }); siteImagesMap.set(id, sortImagesBySeason(initialImageObjects)); return { id, lat: parsedLat, lng: parsedLng, name: p["Location / Media Name"] || "Untitled site", city: p["City / Area"] || "", country: p["Country"] || "", dims: p["Dimensions (W x H)"] || "", orientation: p["Orientation"] || "", mediaType: p["Media Type"] || "Unspecified", channel: p["Channel"] || "Unspecified", address: p["Searchable Address"] || "", area: parseArea(p["Dimensions (W x H)"]), _dx: 0, _dy: 0, _align: "center" }; }) .filter(Boolean); try { let savedFull = await idbGet(VL_STORAGE_KEY); if (!savedFull) { const v3Raw = localStorage.getItem("vlisco_site_images_data_v3"); if (v3Raw) savedFull = JSON.parse(v3Raw); } let savedLight = null; try { const lightRaw = localStorage.getItem(VL_CAPTION_STORAGE_KEY); if (lightRaw) savedLight = JSON.parse(lightRaw); } catch (e) {} sites.forEach(s => { const imgsFromFull = savedFull ? (savedFull[s.id] || savedFull[s.name]) : null; if (Array.isArray(imgsFromFull) && imgsFromFull.length > 0) { siteImagesMap.set(s.id, sortImagesBySeason(imgsFromFull)); return; } const capsFromLight = savedLight ? (savedLight[s.id] || savedLight[s.name]) : null; if (Array.isArray(capsFromLight)) { const curImgs = siteImagesMap.get(s.id) || []; curImgs.forEach((img, idx) => { if (capsFromLight[idx]) { if (typeof img === "object" && img !== null) { img.caption = capsFromLight[idx]; } else { curImgs[idx] = { url: img, caption: capsFromLight[idx] }; } } }); siteImagesMap.set(s.id, sortImagesBySeason(curImgs)); } }); } catch (e) {} function exportUpdatedData() { const exportedFeatures = rawFeatures.map((f, id) => { const cloned = JSON.parse(JSON.stringify(f)); if (!cloned.properties) cloned.properties = {}; const imgs = siteImagesMap.get(id); if (imgs) { cloned.properties["Images"] = imgs; } return cloned; }); const exportGeoJSON = { type: "FeatureCollection", features: exportedFeatures }; const blob = new Blob([JSON.stringify(exportGeoJSON, null, 2)], { type: "application/json" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "vlisco_all_pdf_images_updated.json"; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 500); } const mediaTypes = [...new Set(sites.map(s => s.mediaType))].sort(); const channels = [...new Set(sites.map(s => s.channel))].sort(); const countries = Object.keys(COUNTRY_COLORS); const state = { activeCountries: new Set(countries), activeMedia: new Set(mediaTypes), activeChannels: new Set(channels), search: "", sortKey: "name", sortDir: 1 }; container.innerHTML = `

Network overview

${sites.length} sites currently visible

Site	Country	m²

`; const q = sel => container.querySelector(sel); const mapDiv = q(".vl-map"); const africaViewBounds = L.latLngBounds([[-35.5, -25.5], [37.8, 57.5]]); const map = L.map(mapDiv, { center: [0, 20], zoom: 3, maxZoom: 19, zoomControl: false, zoomSnap: 0.25, zoomDelta: 0.5, maxBounds: [[-42, -32], [43, 65]], maxBoundsViscosity: 1, worldCopyJump: false, attributionControl: false }); L.control.zoom({ position: "bottomright" }).addTo(map); const STYLE_URL = "https://tiles.openfreemap.org/styles/dark"; let baseStyle = STYLE_URL; try { const st = await (await fetch(STYLE_URL)).json(); const targetCountryFilter = [ "any", ["==", ["get", "name:en"], "Benin"], ["==", ["get", "name:en"], "Ghana"], ["==", ["get", "name:en"], "Togo"], ["==", ["get", "name:en"], "Ivory Coast"], ["==", ["get", "name:en"], "Cote d'Ivoire"], ["==", ["get", "name:en"], "Côte d'Ivoire"], ["==", ["get", "name:en"], "Democratic Republic of the Congo"], ["==", ["get", "name:en"], "DR Congo"], ["==", ["get", "name"], "Benin"], ["==", ["get", "name"], "Bénin"], ["==", ["get", "name"], "Ghana"], ["==", ["get", "name"], "Togo"], ["==", ["get", "name"], "Ivory Coast"], ["==", ["get", "name"], "Côte d'Ivoire"], ["==", ["get", "name"], "Cote d'Ivoire"], ["==", ["get", "name"], "Democratic Republic of the Congo"], ["==", ["get", "name"], "République démocratique du Congo"], ["==", ["get", "iso_a2"], "BJ"], ["==", ["get", "iso_a2"], "CD"], ["==", ["get", "iso_a2"], "GH"], ["==", ["get", "iso_a2"], "CI"], ["==", ["get", "iso_a2"], "TG"] ]; st.layers = st.layers.map(layer => { if (layer.type === "symbol") { const id = (layer.id || "").toLowerCase(); const sLayer = (layer["source-layer"] || "").toLowerCase(); if (id.includes("country") || id.includes("nation") || (sLayer === "place" && JSON.stringify(layer.filter || "").includes("country"))) { layer.filter = layer.filter ? ["all", layer.filter, targetCountryFilter] : targetCountryFilter; layer.minzoom = 1; } else if (id.includes("road") || id.includes("highway") || id.includes("street") || id.includes("route")) { layer.minzoom = 13.5; } else if (id.includes("city") || id.includes("town") || id.includes("village") || id.includes("suburb") || sLayer === "place") { layer.minzoom = 11; } } return layer; }); baseStyle = st; } catch (err) {} const baseLayer = L.maplibreGL({ style: baseStyle, interactive: false, pane: "tilePane" }); map.whenReady(() => baseLayer.addTo(map)); invalidation.then(() => map.remove()); const AFRICA_IDS = new Set(["012","024","072","108","120","132","140","148","174","178","180","204","226","231","232","262","266","270","288","324","384","404","426","430","434","450","454","466","478","480","504","508","516","562","566","646","678","686","690","694","706","710","716","728","729","732","748","768","788","800","818","834","854","894","624"]); const AFRICA_NAMES = new Set(["Somaliland", "W. Sahara", "Western Sahara"]); try { const topojson = await require("topojson-client@3"); const world = await (await fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json")).json(); const geoms = world.objects.countries.geometries.filter(g => AFRICA_IDS.has(String(g.id ?? "").padStart(3, "0")) || AFRICA_NAMES.has(g.properties?.name)); const merged = topojson.merge(world, geoms); const africaOuterRings = merged.coordinates.map(poly => poly[0].map(([lng, lat]) => [lat, lng])); map.createPane("africaMask"); map.getPane("africaMask").style.zIndex = 450; map.getPane("africaMask").style.pointerEvents = "none"; const worldRing = [[-85.0511,-360],[-85.0511,360],[85.0511,360],[85.0511,-360]]; L.polygon([worldRing, ...africaOuterRings], { pane: "africaMask", renderer: L.svg({padding: 1, pane: "africaMask"}), stroke: false, fill: true, fillColor: "#111", fillOpacity: 1, fillRule: "evenodd", interactive: false, smoothFactor: 0 }).addTo(map); } catch (err) {} function africaFitOptions() { return map.getSize().x >= 760 ? {paddingTopLeft: [255, 120], paddingBottomRight: [35, 40]} : {paddingTopLeft: [20, 150], paddingBottomRight: [20, 35]}; } function showAfrica() { const options = africaFitOptions(); const padding = L.point(options.paddingTopLeft).add(options.paddingBottomRight); map.setMinZoom(map.getBoundsZoom(africaViewBounds, false, padding)); map.fitBounds(africaViewBounds, {...options, animate: false}); } const densityEndpoint = "https://worldpop.arcgis.com/arcgis/rest/services/WorldPop_Population_Density_1km/ImageServer/exportImage"; const densityParams = { "f": "image", "bboxSR": 3857, "imageSR": 3857, "format": "png8", "noData": -9999, "interpolation": "RSP_NearestNeighbor", "mosaicRule": JSON.stringify({ multidimensionalDefinition: [{ variableName: "Population Density", dimensionName: "StdTime", values: [1577836800000], isSlice: true }] }), "renderingRule": JSON.stringify({ rasterFunction: "Colormap", rasterFunctionArguments: { Raster: { rasterFunction: "Remap", rasterFunctionArguments: { Raster: "$$", InputRanges: [0, 10, 10, 50, 50, 100, 100, 500, 500, 1000, 1000, 5000, 5000, 1000000000.0], OutputValues: [1, 2, 3, 4, 5, 6, 7], AllowUnmatched: false }, outputPixelType: "U8" }, Colormap: [[1, 255, 255, 204], [2, 255, 237, 160], [3, 254, 217, 118], [4, 254, 178, 76], [5, 253, 141, 60], [6, 240, 59, 32], [7, 128, 0, 38]] }, outputPixelType: "U8" }) }; map.createPane("populationDensity"); map.getPane("populationDensity").style.zIndex = 350; map.getPane("populationDensity").style.pointerEvents = "none"; let densityEnabled = true, densityOpacity = 0.25; let densityImage = null, pendingImage = null, densityRequest = 0; const densityUI = L.control({position: "bottomleft"}); densityUI.onAdd = () => { const el = L.DomUtil.create("div", "vl-density-control"); el.style.cssText = "background:rgba(26,26,26,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);padding:10px 12px;border-radius:6px;max-width:240px;font-size:11px;line-height:1.4;color:#fff"; el.innerHTML = ` Population density · 2020

Opacity

`; const colors = ["#ffffcc", "#ffeda0", "#fed976", "#feb24c", "#fd8d3c", "#f03b20", "#800026"]; const labels = ["0–<10", "10–<50", "50–<100", "100–<500", "500–<1,000", "1,000–<5,000", "5,000+"]; el.querySelector(".density-legend").innerHTML = labels.map((label, i) => `

${label}

`).join(""); L.DomEvent.disableClickPropagation(el); L.DomEvent.disableScrollPropagation(el); el.querySelector(".density-toggle").addEventListener("change", e => { densityEnabled = e.target.checked; densityRequest++; if (pendingImage) { pendingImage.remove(); pendingImage = null; } if (!densityEnabled) { if (densityImage) { densityImage.remove(); densityImage = null; } el.querySelector(".density-status").textContent = "Population layer hidden"; } else scheduleDensity(); }); el.querySelector(".density-opacity").addEventListener("input", e => { densityOpacity = Number(e.target.value); if (densityImage) densityImage.setOpacity(densityOpacity); }); return el; }; densityUI.addTo(map); function updateDensity() { if (!densityEnabled) return; const request = ++densityRequest; const bounds = map.getBounds(); const sw = L.CRS.EPSG3857.project(bounds.getSouthWest()); const ne = L.CRS.EPSG3857.project(bounds.getNorthEast()); const size = map.getSize(); const params = new URLSearchParams(densityParams); params.set("bbox", [sw.x, sw.y, ne.x, ne.y].join(",")); const reqW = Math.min(512, Math.max(256, Math.round(size.x * 0.5))); const reqH = Math.min(512, Math.max(256, Math.round(size.y * 0.5))); params.set("size", `${reqW},${reqH}`); const status = densityUI.getContainer().querySelector(".density-status"); status.textContent = ""; const next = L.imageOverlay(densityEndpoint + "?" + params.toString(), bounds, { opacity: 0, pane: "populationDensity", interactive: false }); if (pendingImage) pendingImage.remove(); pendingImage = next; next.on("load", () => { if (request !== densityRequest || !densityEnabled) { next.remove(); return; } if (densityImage) densityImage.remove(); densityImage = next; pendingImage = null; next.setOpacity(densityOpacity); }); next.on("error", () => { next.remove(); if (request !== densityRequest) return; pendingImage = null; if (densityImage) { densityImage.remove(); densityImage = null; } status.textContent = "Population service unavailable."; }); next.addTo(map); } let densityTimer = null; function scheduleDensity() { if (densityTimer) clearTimeout(densityTimer); densityTimer = setTimeout(updateDensity, 250); } map.on("moveend", scheduleDensity); invalidation.then(() => { densityRequest++; }); function makeSiteChipIcon(site, dx = 0, dy = 0, alignSide = "center") { const color = COUNTRY_COLORS[site.country] || "#999"; const dist = Math.hypot(dx, dy); const isOffset = dist > 3; const safeName = (site.name || "Untitled site").replace(/"/g, '"'); let leaderHtml = ""; if (isOffset) { leaderHtml = `

`; } let transformStyle = "transform: translate(-50%, -50%);"; if (isOffset) { if (alignSide === "right") transformStyle = "transform: translate(0, -50%);"; else if (alignSide === "left") transformStyle = "transform: translate(-100%, -50%);"; } return L.divIcon({ html: `

${leaderHtml}

${safeName}

`, className: "", iconSize: [0, 0], iconAnchor: [0, 0] }); } // --------------------------------------------------------- // 국가별 독립 클러스터링 (서로 다른 국가끼리는 절대 합치지 않음) // --------------------------------------------------------- const countryClusters = {}; countries.forEach(c => { countryClusters[c] = hasCluster ? L.markerClusterGroup({ maxClusterRadius: 60, spiderfyOnMaxZoom: true, showCoverageOnHover: false, animate: false, animateAddingMarkers: false, iconCreateFunction: function (cluster) { const count = cluster.getChildCount(); const color = COUNTRY_COLORS[c] || "#999"; return L.divIcon({ html: `

${c} ${count}

`, className: "", iconSize: [0, 0], iconAnchor: [0, 0] }); } }) : L.layerGroup(); map.addLayer(countryClusters[c]); }); function clearAllClusters() { Object.values(countryClusters).forEach(cg => cg.clearLayers()); } function addMarkerToCountryCluster(site) { const cg = countryClusters[site.country]; if (cg) cg.addLayer(site.__marker); } // --------------------------------------------------------- // 스마트 겹침 방지 오프셋 엔진 // --------------------------------------------------------- let layoutTimer = null; function updateLeaderLines() { if (!map) return; const bounds = map.getBounds().pad(0.05); const size = map.getSize(); const active = []; sites.forEach(s => { if (!s.__marker || !map.hasLayer(s.__marker)) return; const latlng = s.__marker.getLatLng ? s.__marker.getLatLng() : [s.lat, s.lng]; if (!bounds.contains(latlng)) return; const pt = map.latLngToContainerPoint(latlng); active.push({ site: s, id: s.id, x: pt.x, y: pt.y }); }); if (active.length > 0) { const CHIP_H = 26; const GAP_Y = 6; const SLOT_H = CHIP_H + GAP_Y; const getChipWidth = (s) => Math.min(280, Math.max(90, 42 + (s.name || "").length * 6.8)); const n = active.length; const visited = new Array(n).fill(false); const groups = []; for (let i = 0; i < n; i++) { if (visited[i]) continue; const group = []; const queue = [i]; visited[i] = true; while (queue.length > 0) { const currIdx = queue.shift(); const curr = active[currIdx]; group.push(curr); for (let j = 0; j < n; j++) { if (visited[j]) continue; const target = active[j]; const dist = Math.hypot(curr.x - target.x, curr.y - target.y); const minOverlapDist = (getChipWidth(curr.site) + getChipWidth(target.site)) / 3.5; if (dist < Math.max(45, minOverlapDist)) { visited[j] = true; queue.push(j); } } } groups.push(group); } groups.forEach(group => { if (group.length === 1) { applyOffset(group[0].site, 0, 0, "center"); return; } group.sort((a, b) => a.y - b.y || a.x - b.x); const count = group.length; const avgX = group.reduce((sum, g) => sum + g.x, 0) / count; const startY = group.reduce((sum, g) => sum + g.y, 0) / count - ((count - 1) * SLOT_H) / 2; const alignRight = avgX < size.x * 0.65; const alignSide = alignRight ? "right" : "left"; const offsetXStep = alignRight ? 35 : -35; group.forEach((item, idx) => { const targetY = startY + idx * SLOT_H; const dy = Math.round(targetY - item.y); const staggerX = (idx % 2 === 0) ? 0 : (alignRight ? 25 : -25); const dx = offsetXStep + staggerX; applyOffset(item.site, dx, dy, alignSide); }); }); } // 국가 클러스터 칩 박스 간의 겹침 밀어내기 const clusterEls = container.querySelectorAll(".vl-cluster-box"); if (clusterEls.length > 1) { const boxes = []; clusterEls.forEach(el => { const rect = el.getBoundingClientRect(); boxes.push({ el, x: rect.left, y: rect.top, w: rect.width || 90, h: rect.height || 26, dx: 0, dy: 0 }); }); for (let i = 0; i < boxes.length; i++) { for (let j = i + 1; j < boxes.length; j++) { const b1 = boxes[i], b2 = boxes[j]; const overlapX = Math.abs((b1.x + b1.dx) - (b2.x + b2.dx)) < (b1.w + b2.w) / 2 + 10; const overlapY = Math.abs((b1.y + b1.dy) - (b2.y + b2.dy)) < (b1.h + b2.h) / 2 + 8; if (overlapX && overlapY) { if (b1.y <= b2.y) { b1.dy -= 15; b2.dy += 15; } else { b1.dy += 15; b2.dy -= 15; } if (b1.x <= b2.x) { b1.dx -= 20; b2.dx += 20; } else { b1.dx += 20; b2.dx -= 20; } } } } boxes.forEach(b => { b.el.style.transform = `translate(calc(-50% + ${b.dx}px), calc(-50% + ${b.dy}px))`; }); } } function applyOffset(site, dx, dy, alignSide) { if (site._dx === dx && site._dy === dy && site._align === alignSide) return; site._dx = dx; site._dy = dy; site._align = alignSide; site.__marker.setIcon(makeSiteChipIcon(site, dx, dy, alignSide)); } function scheduleLayout() { if (layoutTimer) clearTimeout(layoutTimer); layoutTimer = setTimeout(() => { requestAnimationFrame(updateLeaderLines); }, 120); } map.on("moveend zoomend layeradd layerremove", scheduleLayout); Object.values(countryClusters).forEach(cg => { if (cg.on) { cg.on("animationend spiderfied unspiderfied clusterclick", scheduleLayout); } }); function showCropModal(imgSrc, onSave) { const existing = container.querySelector(".vl-crop-modal"); if (existing) existing.remove(); const modal = document.createElement("div"); modal.className = "vl-crop-modal"; modal.style.cssText = "position:absolute;inset:0;z-index:99999;background:rgba(0,0,0,0.85);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;color:#fff;"; modal.innerHTML = `

✂️ Crop Photo Margins

Top: Bottom: Left: Right:

`; L.DomEvent.disableClickPropagation(modal); L.DomEvent.disableScrollPropagation(modal); container.appendChild(modal); const sImg = modal.querySelector("#crop-source-img"); const cropBox = modal.querySelector("#crop-box"); const sTop = modal.querySelector("#crop-top"); const sBottom = modal.querySelector("#crop-bottom"); const sLeft = modal.querySelector("#crop-left"); const sRight = modal.querySelector("#crop-right"); function updateCropBox() { const rect = sImg.getBoundingClientRect(); const parentRect = sImg.parentElement.getBoundingClientRect(); const imgX = rect.left - parentRect.left; const imgY = rect.top - parentRect.top; const imgW = rect.width; const imgH = rect.height; const pT = Number(sTop.value) / 100; const pB = Number(sBottom.value) / 100; const pL = Number(sLeft.value) / 100; const pR = Number(sRight.value) / 100; const bx = imgX + imgW * pL; const by = imgY + imgH * pT; const bw = Math.max(10, imgW * (1 - pL - pR)); const bh = Math.max(10, imgH * (1 - pT - pB)); cropBox.style.left = `${bx}px`; cropBox.style.top = `${by}px`; cropBox.style.width = `${bw}px`; cropBox.style.height = `${bh}px`; } sImg.onload = updateCropBox; [sTop, sBottom, sLeft, sRight].forEach(inp => inp.addEventListener("input", updateCropBox)); modal.querySelector("#crop-autotrim").onclick = () => { const c = document.createElement("canvas"); const ctx = c.getContext("2d"); const nw = sImg.naturalWidth; const nh = sImg.naturalHeight; c.width = nw; c.height = nh; try { ctx.drawImage(sImg, 0, 0); const data = ctx.getImageData(0, 0, nw, nh).data; const bgR = data[0], bgG = data[1], bgB = data[2]; function isBg(idx) { const r = data[idx], g = data[idx+1], b = data[idx+2], a = data[idx+3]; if (a < 15) return true; const diff = Math.abs(r - bgR) + Math.abs(g - bgG) + Math.abs(b - bgB); return diff < 35 || (r > 240 && g > 240 && b > 240) || (r < 18 && g < 18 && b < 18); } let top = 0, bottom = nh - 1, left = 0, right = nw - 1; topLoop: for (let y = 0; y < nh; y++) { for (let x = 0; x < nw; x++) { if (!isBg((y * nw + x) * 4)) { top = y; break topLoop; } } } bottomLoop: for (let y = nh - 1; y >= top; y--) { for (let x = 0; x < nw; x++) { if (!isBg((y * nw + x) * 4)) { bottom = y; break bottomLoop; } } } leftLoop: for (let x = 0; x < nw; x++) { for (let y = top; y <= bottom; y++) { if (!isBg((y * nw + x) * 4)) { left = x; break leftLoop; } } } rightLoop: for (let x = nw - 1; x >= left; x--) { for (let y = top; y <= bottom; y++) { if (!isBg((y * nw + x) * 4)) { right = x; break rightLoop; } } } sTop.value = Math.min(40, Math.round((top / nh) * 100)); sBottom.value = Math.min(40, Math.round(((nh - 1 - bottom) / nh) * 100)); sLeft.value = Math.min(40, Math.round((left / nw) * 100)); sRight.value = Math.min(40, Math.round(((nw - 1 - right) / nw) * 100)); updateCropBox(); } catch (err) { alert("Auto-trim unavailable for this external image, please use manual sliders."); } }; const close = () => modal.remove(); modal.querySelector("#crop-close-btn").onclick = close; modal.querySelector("#crop-cancel").onclick = close; modal.querySelector("#crop-save").onclick = () => { const c = document.createElement("canvas"); const ctx = c.getContext("2d"); const nw = sImg.naturalWidth; const nh = sImg.naturalHeight; const pT = Number(sTop.value) / 100; const pB = Number(sBottom.value) / 100; const pL = Number(sLeft.value) / 100; const pR = Number(sRight.value) / 100; const sx = nw * pL; const sy = nh * pT; const sw = Math.max(10, nw * (1 - pL - pR)); const sh = Math.max(10, nh * (1 - pT - pB)); c.width = sw; c.height = sh; ctx.drawImage(sImg, sx, sy, sw, sh, 0, 0, sw, sh); const croppedUrl = c.toDataURL("image/jpeg", 0.92); onSave(croppedUrl); close(); }; } function showCaptionModal(currentCaption, onSave) { const existing = container.querySelector(".vl-caption-modal"); if (existing) existing.remove(); const modal = document.createElement("div"); modal.className = "vl-caption-modal"; modal.style.cssText = "position:absolute; inset:0; z-index:9999; background:rgba(0,0,0,0.75); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px;"; const chipsHtml = CAMPAIGN_LIST.map(camp => ` `).join(""); modal.innerHTML = `

Edit Photo Caption

Quick Campaign Seasons (Newest first):

${chipsHtml}

`; L.DomEvent.disableClickPropagation(modal); L.DomEvent.disableScrollPropagation(modal); modal.addEventListener("keydown", (e) => e.stopPropagation()); modal.addEventListener("keyup", (e) => e.stopPropagation()); container.appendChild(modal); const input = modal.querySelector("#caption-input"); setTimeout(() => { input.focus(); input.select(); }, 50); const close = () => modal.remove(); const doSave = () => { onSave(input.value.trim()); close(); }; modal.querySelectorAll(".vl-camp-tag").forEach(btn => { btn.onclick = (e) => { e.stopPropagation(); input.value = btn.dataset.val; doSave(); }; }); modal.querySelector("#caption-save").onclick = (e) => { e.stopPropagation(); doSave(); }; modal.querySelector("#caption-cancel").onclick = (e) => { e.stopPropagation(); close(); }; input.onkeydown = (e) => { e.stopPropagation(); if (e.key === "Enter") { e.preventDefault(); doSave(); } else if (e.key === "Escape") { e.preventDefault(); close(); } }; } function popupElement(p) { const color = COUNTRY_COLORS[p.country] || "#999"; const pop = document.createElement("div"); pop.innerHTML = `

${p.country} · ${p.city}

${p.name}

Dimensions${p.dims || "—"}

Media type${p.mediaType || "—"}

Orientation${p.orientation || "—"}

${p.address || ""}

`; L.DomEvent.disableClickPropagation(pop); L.DomEvent.disableScrollPropagation(pop); const rail = pop.querySelector(".vl-gallery-rail"); const fileInput = pop.querySelector(".vl-file-input"); const btnPrev = pop.querySelector(".vl-nav-btn.prev"); const btnNext = pop.querySelector(".vl-nav-btn.next"); let draggedIndex = null; const renderRail = () => { rail.innerHTML = ""; const currentImages = siteImagesMap.get(p.id) || []; currentImages.forEach((imgObj, index) => { const card = document.createElement("div"); card.className = "vl-img-card"; card.draggable = true; card.dataset.index = index; card.addEventListener("dragstart", (e) => { draggedIndex = index; card.classList.add("dragging"); e.dataTransfer.effectAllowed = "move"; }); card.addEventListener("dragend", () => { card.classList.remove("dragging"); draggedIndex = null; }); card.addEventListener("dragover", (e) => e.preventDefault()); card.addEventListener("drop", (e) => { e.preventDefault(); if (draggedIndex === null || draggedIndex === index) return; const item = currentImages.splice(draggedIndex, 1)[0]; currentImages.splice(index, 0, item); siteImagesMap.set(p.id, currentImages); saveStorage(); renderRail(); }); const imgSrc = typeof imgObj === "object" ? imgObj.url : imgObj; const imgWrap = document.createElement("div"); imgWrap.className = "vl-img-wrap"; imgWrap.title = "Click photo to crop margins"; imgWrap.addEventListener("mousedown", (e) => e.stopPropagation()); imgWrap.onclick = (e) => { e.stopPropagation(); showCropModal(imgSrc, (newCroppedUrl) => { if (typeof currentImages[index] === "object" && currentImages[index] !== null) { currentImages[index].url = newCroppedUrl; } else { currentImages[index] = { url: newCroppedUrl, caption: `Photo ${index + 1}` }; } siteImagesMap.set(p.id, currentImages); saveStorage(); renderRail(); }); }; const img = document.createElement("img"); img.src = imgSrc; img.title = "Click photo to crop margins"; imgWrap.appendChild(img); const captionText = (typeof imgObj === "object" && imgObj.caption) ? imgObj.caption : "Add caption"; const captionEl = document.createElement("div"); captionEl.className = "vl-img-caption"; captionEl.textContent = captionText; captionEl.title = "Click to edit caption"; captionEl.addEventListener("mousedown", (e) => e.stopPropagation()); captionEl.onclick = (e) => { e.stopPropagation(); const curCap = typeof imgObj === "object" ? (imgObj.caption || "") : ""; showCaptionModal(curCap, (newCaption) => { if (typeof currentImages[index] === "object" && currentImages[index] !== null) { currentImages[index].caption = newCaption || `Photo ${index + 1}`; } else { currentImages[index] = { url: currentImages[index], caption: newCaption || `Photo ${index + 1}` }; } const sorted = sortImagesBySeason(currentImages); siteImagesMap.set(p.id, sorted); saveStorage(); renderRail(); }); }; const delBtn = document.createElement("button"); delBtn.className = "vl-img-del"; delBtn.innerHTML = "✕"; delBtn.title = "Delete image"; delBtn.addEventListener("mousedown", (e) => e.stopPropagation()); delBtn.onclick = (e) => { e.stopPropagation(); currentImages.splice(index, 1); siteImagesMap.set(p.id, currentImages); saveStorage(); renderRail(); }; card.appendChild(imgWrap); card.appendChild(captionEl); card.appendChild(delBtn); rail.appendChild(card); }); const addCard = document.createElement("div"); addCard.className = "vl-add-card"; addCard.innerHTML = "+"; addCard.title = "Add new photo"; addCard.addEventListener("mousedown", (e) => e.stopPropagation()); addCard.onclick = (e) => { e.stopPropagation(); fileInput.click(); }; rail.appendChild(addCard); }; renderRail(); btnPrev.addEventListener("mousedown", (e) => e.stopPropagation()); btnNext.addEventListener("mousedown", (e) => e.stopPropagation()); btnPrev.onclick = (e) => { e.stopPropagation(); rail.scrollBy({ left: -140, behavior: 'smooth' }); }; btnNext.onclick = (e) => { e.stopPropagation(); rail.scrollBy({ left: 140, behavior: 'smooth' }); }; const handleFiles = (files) => { Array.from(files).forEach((file) => { if (!file.type.startsWith("image/")) return; const reader = new FileReader(); reader.onload = (e) => { const b64 = e.target.result; const currentImages = siteImagesMap.get(p.id) || []; currentImages.push({ url: b64, caption: file.name }); const sorted = sortImagesBySeason(currentImages); siteImagesMap.set(p.id, sorted); saveStorage(); renderRail(); }; reader.readAsDataURL(file); }); }; fileInput.onchange = (e) => handleFiles(e.target.files); return pop; } sites.forEach(s => { const m = L.marker([s.lat, s.lng], { icon: makeSiteChipIcon(s), country: s.country }); m.bindPopup(() => popupElement(s), { autoPanPadding: [40, 40] }); m.on("click", () => map.setView([s.lat, s.lng], Math.max(map.getZoom(), 13))); s.__marker = m; }); function siteVisible(s) { if (!state.activeCountries.has(s.country)) return false; if (!state.activeMedia.has(s.mediaType)) return false; if (!state.activeChannels.has(s.channel)) return false; if (state.search) { const hay = (s.name + " " + s.city + " " + s.address).toLowerCase(); if (!hay.includes(state.search)) return false; } return true; } function applyFilters() { clearAllClusters(); const visible = sites.filter(siteVisible); visible.forEach(s => addMarkerToCountryCluster(s)); q(".vl-count").textContent = `showing ${visible.length} of ${sites.length}`; q(".vl-panelsub").textContent = `${visible.length} sites currently visible`; renderStats(visible); renderTable(visible); scheduleLayout(); } const chipRow = q(".vl-chiprow"); const counts = {}; sites.forEach(s => counts[s.country] = (counts[s.country] || 0) + 1); const africaBtn = document.createElement("div"); africaBtn.className = "vl-chip"; africaBtn.style.cssText = "background:#333;border-color:#555;color:#fff;font-weight:700;"; africaBtn.innerHTML = `🌍 Africa`; africaBtn.addEventListener("click", showAfrica); chipRow.appendChild(africaBtn); countries.forEach(country => { const countryColor = COUNTRY_COLORS[country] || "#999"; const chip = document.createElement("div"); chip.className = "vl-chip"; chip.style.cssText = `border-color:${countryColor}66; color:${countryColor}; background:${countryColor}18;`; chip.innerHTML = `${country} ${counts[country] || 0}`; chip.addEventListener("click", () => { const pts = sites.filter(s => s.country === country).map(s => [s.lat, s.lng]); if (pts.length) { map.fitBounds(L.latLngBounds(pts), { padding: [60, 60], maxZoom: 8, animate: false }); } }); chipRow.appendChild(chip); }); function buildDropdown(key, items, activeSet) { const panel = q(`[data-panel="${key}"]`); items.forEach(item => { const row = document.createElement("label"); row.className = "vl-dd-item"; row.innerHTML = ` ${item}`; const cb = row.querySelector("input"); cb.addEventListener("change", () => { if (cb.checked) activeSet.add(item); else activeSet.delete(item); applyFilters(); }); panel.appendChild(row); }); q(`[data-btn="${key}"]`).addEventListener("click", (e) => { panel.classList.toggle("open"); e.stopPropagation(); }); } buildDropdown("media", mediaTypes, state.activeMedia); buildDropdown("channel", channels, state.activeChannels); container.addEventListener("click", (e) => { if (!e.target.closest(".vl-dropdown")) { q('[data-panel="media"]').classList.remove("open"); q('[data-panel="channel"]').classList.remove("open"); } }); q(".vl-search").addEventListener("input", (e) => { state.search = e.target.value.trim().toLowerCase(); applyFilters(); }); const panelEl = q(".vl-panel"); q('[data-btn="list"]').addEventListener("click", () => { panelEl.classList.toggle("open"); q('[data-btn="list"]').classList.toggle("active"); }); q(".vl-panelclose").addEventListener("click", () => { panelEl.classList.remove("open"); q('[data-btn="list"]').classList.remove("active"); }); q('[data-btn="export"]').addEventListener("click", exportUpdatedData); function renderStats(visible) { const el = q(".vl-stats"); const byCountry = {}; visible.forEach(s => byCountry[s.country] = (byCountry[s.country] || 0) + 1); const max = Math.max(1, ...Object.values(byCountry)); el.innerHTML = countries.map(c => { const n = byCountry[c] || 0; return `

${c}

${n}

`; }).join(""); } function renderTable(visible) { const tbody = q(".vl-table tbody"); const sorted = [...visible].sort((a, b) => { let av = a[state.sortKey], bv = b[state.sortKey]; if (state.sortKey === "area") { av = av || 0; bv = bv || 0; } else { av = (av || "").toString().toLowerCase(); bv = (bv || "").toString().toLowerCase(); } if (av < bv) return -1 * state.sortDir; if (av > bv) return 1 * state.sortDir; return 0; }); tbody.innerHTML = sorted.map(s => ` ${s.name}
${s.city} ${s.country} ${s.area ?? "—"} `).join(""); tbody.querySelectorAll(".vl-rowlink").forEach(tr => { tr.addEventListener("click", () => { const id = Number(tr.dataset.id); const s = sites.find(item => item.id === id); if (s && s.__marker) { const marker = s.__marker; const cg = countryClusters[s.country]; if (hasCluster && cg && typeof cg.zoomToShowLayer === "function") { cg.zoomToShowLayer(marker, () => { setTimeout(() => { marker.openPopup(); scheduleLayout(); }, 150); }); } else { map.setView([s.lat, s.lng], Math.max(map.getZoom(), 15)); setTimeout(() => { marker.openPopup(); scheduleLayout(); }, 100); } } }); }); } container.querySelectorAll(".vl-table th[data-key]").forEach(th => { th.addEventListener("click", () => { const key = th.dataset.key; if (state.sortKey === key) state.sortDir *= -1; else { state.sortKey = key; state.sortDir = 1; } renderTable(sites.filter(siteVisible)); }); }); // 초기 로딩: 아프리카 전체 뷰 유지 showAfrica(); const resizeObserver = new ResizeObserver(() => { map.invalidateSize(); const options = africaFitOptions(); const padding = L.point(options.paddingTopLeft).add(options.paddingBottomRight); map.setMinZoom(map.getBoundsZoom(africaViewBounds, false, padding)); scheduleLayout(); }); resizeObserver.observe(container); invalidation.then(() => resizeObserver.disconnect()); applyFilters(); scheduleDensity(); const observer = new ResizeObserver(([entry]) => { if (window.parent) { window.parent.postMessage({ height: entry.target.offsetHeight }, "*"); } }); observer.observe(document.documentElement); invalidation.then(() => observer.disconnect()); }32:[{"id":"12bf6ee7ebe6c883a020f070b86bf2c74a1cfe285ad6f62a567ca4e0999009a6d28ea5e6bac7e5115f4385118412946cfe985c0d6abb4f0cc335de3322725a2f","href":"https://static.observableusercontent.com/files/12bf6ee7ebe6c883a020f070b86bf2c74a1cfe285ad6f62a567ca4e0999009a6d28ea5e6bac7e5115f4385118412946cfe985c0d6abb4f0cc335de3322725a2f","name":"vlisco_all_pdf_images_updated (5).json","type":"application/json","lastModified":1790980145692.618,"size":18247347},{"id":"bd9b93fed1fb7ab6504ca8b51bb3d28bb1547d322b467432bca9aa32e4de8ef8621eabd9751d55dd025865a6a226401153ae9f6173f87924a875e1e4634d7027","href":"https://static.observableusercontent.com/files/bd9b93fed1fb7ab6504ca8b51bb3d28bb1547d322b467432bca9aa32e4de8ef8621eabd9751d55dd025865a6a226401153ae9f6173f87924a875e1e4634d7027","name":"vlisco_merged-6 (1).json","type":"application/json","lastModified":1790980225699.253,"size":15187141},{"id":"058f7fffd3175cd47c65d4aabc356852acb713005948711016452eb91c3d60ce1f56a3f64d2303ce59e066753a1f8959e001c4976d06e5a47c2dc77589995315","href":"https://static.observableusercontent.com/files/058f7fffd3175cd47c65d4aabc356852acb713005948711016452eb91c3d60ce1f56a3f64d2303ce59e066753a1f8959e001c4976d06e5a47c2dc77589995315","name":"vlisco_all_pdf_images (1) (1).json","type":"application/json","lastModified":1790967335643,"size":18115072}] 2f:{"id":"b33f5dd68fa19718","slug":null,"title":"Vlisco","thumbnail":"bc1abc37691e0da195da82ca3bcd9568fb7f833c8da456f7967558dd1bb02cb0","access_level":"public","create_time":"$D2026-10-02T19:53:05.906Z","update_time":"$D2026-10-03T02:07:14.454Z","view_time":null,"first_public_time":"$D2026-10-02T22:37:19.209Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"e6a85a8cf42a15b5","login":"hong-kim","name":"Hong Kim","avatar_url":"https://avatars-next.observableusercontent.com/d6b1a76d9ea8c3def79465993e2deb310efee47b7fb090d5309197f28fe46cd1","tier":"starter_2024"},"version":254,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"737e6051f1367c50","login":"hong-kim","name":"Hong Kim","avatar_url":"https://avatars-next.observableusercontent.com/d6b1a76d9ea8c3def79465993e2deb310efee47b7fb090d5309197f28fe46cd1","tier":null}],"members":[{"type":"team","id":"e6a85a8cf42a15b5","login":"hong-kim","name":"Hong Kim","avatar_url":"https://avatars-next.observableusercontent.com/d6b1a76d9ea8c3def79465993e2deb310efee47b7fb090d5309197f28fe46cd1","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vlisco","cells":[{"id":182,"value":"# Vlisco","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"vlisco_merged61 = FileAttachment(\"vlisco_merged-6 (1).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"vlisco = FileAttachment(\"vlisco_all_pdf_images_updated (5).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"

${sites.length} sites, ${countries.length} countries

Network overview

✂️ Crop Photo Margins

Edit Photo Caption