2b:null 2c:["$","title",null,{"children":"Untitled | Hong Kim | Observable"}] 31:T73fc,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": "#c1502e", "DRC": "#2e5339", "Ghana": "#c99a2e", "Ivory Coast": "#3a4d7a", "Togo": "#7a3b4d" }; 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); } // ── 안전한 sites 데이터 파싱 및 이미지 추출 ── 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; // 이미지 데이터 파싱 (배열 형태나 단일 URL 필드 검색) let imgs = []; if (Array.isArray(p.images)) imgs = p.images; else if (p.Image) imgs = [p.Image]; else if (p.image) imgs = [p.image]; else if (p.Photo) imgs = [p.Photo]; 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)"]), images: imgs }; }) .filter(Boolean); 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 }); L.control.zoom({ position: "bottomright" }).addTo(map); const STYLE_URL = "https://tiles.openfreemap.org/styles/positron"; let baseStyle = STYLE_URL; try { const st = await (await fetch(STYLE_URL)).json(); st.layers = st.layers.filter(l => l.type !== "symbol" || /^(label_city|label_town|label_city_capital|highway-name)/.test(l.id) ); baseStyle = st; } catch (err) { /* fall back */ } const baseLayer = L.maplibreGL({ style: baseStyle, interactive: false, pane: "tilePane", attribution: 'OpenFreeMap © OpenMapTiles © OpenStreetMap' }); 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: "#fafafa", fillOpacity: 1, fillRule: "evenodd", interactive: false, smoothFactor: 0, attribution: 'Boundary: Natural Earth' }).addTo(map); } catch (err) { console.warn("Africa mask not loaded:", 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 africaHome = L.control({position: "bottomright"}); africaHome.onAdd = () => { const button = L.DomUtil.create("button", "vl-iconbtn"); button.type = "button"; button.textContent = "Africa"; button.title = "Show all of Africa"; L.DomEvent.disableClickPropagation(button); L.DomEvent.on(button, "click", showAfrica); return button; }; africaHome.addTo(map); const densityEndpoint = "https://worldpop.arcgis.com/arcgis/rest/services/WorldPop_Population_Density_1km/ImageServer/exportImage"; const densityParams = {"f": "image", "bbox": "-20,-36,55,38", "bboxSR": 4326, "imageSR": 3857, "size": "768,768", "format": "png32", "noData": -9999, "time": 1577836800000, "mosaicRule": "{\"multidimensionalDefinition\": [{\"variableName\": \"Population Density\", \"dimensionName\": \"StdTime\", \"values\": [1577836800000], \"isSlice\": true}]}", "renderingRule": "{\"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.65; 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(250,250,250,.96);padding:12px 14px;border-radius:8px;box-shadow:0 1px 8px #0002;max-width:240px;font:11px/1.5 Arial;color:#1c1a17"; el.innerHTML = ` Population density · 2020

Estimated residents / km² · ~1 km grid

Opacity

Loading population layer…

Source: WorldPop / Esri

Population estimates, not footfall.
Zooming in does not add data detail.

`; 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 updateDensity(); }); 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; if (pendingImage) pendingImage.remove(); 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(",")); params.set("bboxSR", "3857"); params.set("adjustAspectRatio", "false"); const scale = Math.min(1, 2000 / Math.max(size.x, size.y)); params.set("size", `${Math.round(size.x * scale)},${Math.round(size.y * scale)}`); const status = densityUI.getContainer().querySelector(".density-status"); status.textContent = "Loading population layer…"; const next = L.imageOverlay(densityEndpoint + "?" + params.toString(), bounds, { opacity: 0, pane: "populationDensity", interactive: false, attribution: 'Population: WorldPop (2020), Esri' }); pendingImage = next; next.on("load", () => { if (request !== densityRequest || !densityEnabled) { next.remove(); return; } if (densityImage) densityImage.remove(); densityImage = next; pendingImage = null; next.setOpacity(densityOpacity); status.textContent = "2020 population layer displayed"; }); next.on("error", () => { next.remove(); if (request !== densityRequest) return; pendingImage = null; if (densityImage) { densityImage.remove(); densityImage = null; } status.textContent = "Population service unavailable. Pan or toggle to retry; street map remains available."; }); next.addTo(map); } map.on("moveend", updateDensity); invalidation.then(() => { densityRequest++; }); let markerSize = 14; function sizeForZoom(z) { if (z <= 5) return 9; if (z <= 7) return 12; if (z <= 10) return 16; return 20; } function makeIcon(color, size) { return L.divIcon({ className: "", html: `

`, iconSize: [size, size], iconAnchor: [size / 2, size / 2] }); } const clusterGroup = hasCluster ? L.markerClusterGroup({ maxClusterRadius: 42, spiderfyOnMaxZoom: true, showCoverageOnHover: false, iconCreateFunction: function (cluster) { const count = cluster.getChildCount(); const size = count < 10 ? 30 : count < 30 ? 36 : 42; return L.divIcon({ html: `

${count}

`, className: "", iconSize: [size, size] }); } }) : L.layerGroup(); function addLayersCompat(layers) { if (clusterGroup.addLayers) clusterGroup.addLayers(layers); else layers.forEach(l => clusterGroup.addLayer(l)); } // ── 지도 팝업(Popup) HTML 렌더링 함수 ── function popupHTML(p) { const color = COUNTRY_COLORS[p.country] || "#999"; const rows = [ ["City / Area", p.city], ["Dimensions", p.dims], ["Area", p.area ? p.area + " m²" : "—"], ["Orientation", p.orientation], ["Media type", p.mediaType], ["Channel", p.channel] ]; // 팝업 내부 갤러리 HTML const gallery = p.images && p.images.length > 0 ? `

${p.images.map(url => `

`).join("")}

` : ""; return `

${p.country}

${p.name}

${gallery} ${rows.map(([k, v]) => `

${k}${v || "—"}

`).join("")}

${p.address}

`; } // ── 우측 패널에 빌보드 상세 정보 및 갤러리 표시하는 함수 ── function selectSite(s) { map.setView([s.lat, s.lng], Math.max(map.getZoom(), 14)); if (s.__marker) s.__marker.openPopup(); const panelEl = q(".vl-panel"); panelEl.classList.add("open"); q('[data-btn="list"]').classList.add("active"); q(".vl-panelhead h2").textContent = s.name; q(".vl-panelsub").textContent = `${s.city}, ${s.country}`; // 갤러리 이미지 주입 (데이터가 없을 시 더미 이미지) const imgList = s.images.length > 0 ? s.images : [ `https://picsum.photos/seed/${s.id}-1/400/250`, `https://picsum.photos/seed/${s.id}-2/400/250` ]; const galleryHTML = `

SITE GALLERY (${imgList.length})

${imgList.map(url => `

`).join("")}

`; q(".vl-stats").innerHTML = galleryHTML; } sites.forEach(s => { const color = COUNTRY_COLORS[s.country] || "#999"; const m = L.marker([s.lat, s.lng], { icon: makeIcon(color, markerSize) }); m.bindPopup(() => popupHTML(s), { autoPanPadding: [40, 40] }); m.on("click", () => selectSite(s)); s.__marker = m; }); map.on("zoomend", () => { const newSize = sizeForZoom(map.getZoom()); if (newSize !== markerSize) { markerSize = newSize; sites.forEach(s => s.__marker.setIcon(makeIcon(COUNTRY_COLORS[s.country] || "#999", markerSize))); } }); map.addLayer(clusterGroup); 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() { clusterGroup.clearLayers(); const visible = sites.filter(siteVisible); addLayersCompat(visible.map(s => s.__marker)); q(".vl-count").textContent = `showing ${visible.length} of ${sites.length}`; q(".vl-panelsub").textContent = `${visible.length} sites currently visible`; renderStats(visible); renderTable(visible); } const chipRow = q(".vl-chiprow"); const counts = {}; sites.forEach(s => counts[s.country] = (counts[s.country] || 0) + 1); countries.forEach(country => { const chip = document.createElement("div"); chip.className = "vl-chip"; chip.innerHTML = `${country} ${counts[country] || 0}`; chip.addEventListener("click", () => { if (state.activeCountries.has(country)) { state.activeCountries.delete(country); chip.classList.add("off"); } else { state.activeCountries.add(country); chip.classList.remove("off"); const pts = sites.filter(s => s.country === country).map(s => [s.lat, s.lng]); if (pts.length) map.flyToBounds(L.latLngBounds(pts), { padding: [60, 60], maxZoom: 8 }); } applyFilters(); }); 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"); }); 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) selectSite(s); }); }); } 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)); }); resizeObserver.observe(container); invalidation.then(() => resizeObserver.disconnect()); applyFilters(); }32:[{"id":"04ae3779656543fbd35fc1871f311922faeedf4ee2ba9860abda6083347837e1a2a9377f62eddafa0c2d1362d9f1a789b5eb3133505b478ee0fdf49a27ecef91","href":"https://static.observableusercontent.com/files/04ae3779656543fbd35fc1871f311922faeedf4ee2ba9860abda6083347837e1a2a9377f62eddafa0c2d1362d9f1a789b5eb3133505b478ee0fdf49a27ecef91","name":"DJDR8A~O.png","type":"image/png","lastModified":1790702550610.44,"size":153614}] 2f:{"id":"eed047e20994eedc","slug":null,"title":"","thumbnail":"21127ab9796601ec6d799450c33daadf96cc8a50675bc5f9d37053fece38f2d5","access_level":"public","create_time":"$D2026-09-29T17:17:01.520Z","update_time":"$D2026-09-29T17:22:49.780Z","view_time":null,"first_public_time":"$D2026-09-29T17:17:01.520Z","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":129,"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":"individual","id":"737e6051f1367c50","login":"hong-kim","name":"Hong Kim","avatar_url":"https://avatars-next.observableusercontent.com/d6b1a76d9ea8c3def79465993e2deb310efee47b7fb090d5309197f28fe46cd1","tier":null,"role":"editor"},{"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"","cells":[{"id":63,"value":"vlisco = FileAttachment(\"vlisco.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$31","pinned":true,"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