{ let container = html`

`; yield container; let coordLabelContainer = html`

`; let coordLabelLngRow = html`

`; coordLabelLngRow.append(html`

lng

`); let coordLabelLng = html`

`; coordLabelLngRow.append(coordLabelLng); let coordLabelLatRow = html`

`; coordLabelLatRow.append(html`

lat

`); let coordLabelLat = html`

`; coordLabelLatRow.append(coordLabelLat); coordLabelContainer.appendChild(coordLabelLatRow); coordLabelContainer.appendChild(coordLabelLngRow); container.appendChild(coordLabelContainer); const map = new mapboxgl.Map({ container, style: "mapbox://styles/sorami/cl72s0b9r006i14nxsv90srxe", center: [140, 37], zoom: 3.5, projection: "globe" }); map.addControl(new mapboxgl.NavigationControl(), "top-right"); const selectedCells = []; map.on("load", () => { showCoordLabel(map.getCenter().wrap()); map.addSource("graticule", { type: "geojson", data: graticuleGeoJSON }); map.addLayer({ id: "graticule", type: "line", source: "graticule", paint: { "line-color": "#fff", "line-opacity": 0.3 } }); }); map.on("mousemove", (e) => { showCoordLabel(e.lngLat); }); function showCoordLabel(lngLat) { const decimal = 1; const lng = Math.round(lngLat.lng * (10 * decimal)) / (10 * decimal); const lat = Math.round(lngLat.lat * (10 * decimal)) / (10 * decimal); coordLabelLng.innerHTML = `${lng}°`; coordLabelLat.innerHTML = `${lat}°`; } invalidation.then(() => map.remove()); }

Purpose-built for displays of data