2d:null 2e:["$","title",null,{"children":"Graticule with {Mapbox, MapLibre} GL JS | Sorami Hisamoto | Observable"}] 33:T811,{ 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`

`; 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(coordLabelLngRow); coordLabelContainer.appendChild(coordLabelLatRow); container.appendChild(coordLabelContainer); const map = new mapboxgl.Map({ container, style: "mapbox://styles/mapbox/streets-v11", center: [0, 0], zoom: 1.5, projection: projection2 }); map.addControl(new mapboxgl.NavigationControl(), "top-right"); map.addControl(grid); const selectedCells = []; map.on("load", () => { showCoordLabel(); const selectedCellsId = "selected-cells"; map.addSource(selectedCellsId, { type: "geojson", data: { type: "FeatureCollection", features: selectedCells } }); map.addLayer({ id: selectedCellsId, source: selectedCellsId, type: "fill", paint: { "fill-color": "blue", "fill-opacity": 0.5, "fill-outline-color": "transparent" } }); map.on(maplibreGrid.GRID_CLICK_EVENT, (event) => { const bbox = event.bbox; const cellIndex = selectedCells.findIndex( (x) => x.geometry.bbox.toString() === bbox.toString() ); if (cellIndex === -1) { const coordinates = [ [ [bbox[0], bbox[1]], [bbox[2], bbox[1]], [bbox[2], bbox[3]], [bbox[0], bbox[3]], [bbox[0], bbox[1]] ] ]; const cell = { type: "Feature", geometry: { type: "Polygon", bbox, coordinates } }; selectedCells.push(cell); } else { selectedCells.splice(cellIndex, 1); } const source = map.getSource(selectedCellsId); source.setData({ type: "FeatureCollection", features: selectedCells }); }); }); map.on("move", () => { showCoordLabel(); }); function showCoordLabel() { const lngLat = map.getCenter().wrap(); 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()); }35:[] 31:{"id":"841c825a4a0d3426","slug":"graticule-with-mapbox-maplibre-gl-js","title":"Graticule with {Mapbox, MapLibre} GL JS","thumbnail":"260d9a225e1aa07a66573891f94ba12427751004cdcc5e2481720dc259c9e3f9","access_level":"public","create_time":"$D2022-07-10T09:23:22.717Z","update_time":"$D2022-07-10T10:39:26.476Z","view_time":null,"first_public_time":"$D2022-07-10T10:42:34.256Z","has_unpublished_edits":null,"fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"36aa7bddb76092a5","login":"sorami","name":"Sorami Hisamoto","avatar_url":"https://avatars-next.observableusercontent.com/7071ad5bf4e4e48d3db41f7aa1807baea2d84fcbe31b947b68c7dbe09da8d4ca","tier":"starter_2024"},"version":306,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f8326fd2096702fa","login":"sorami","name":"Sorami Hisamoto","avatar_url":"https://avatars-next.observableusercontent.com/7071ad5bf4e4e48d3db41f7aa1807baea2d84fcbe31b947b68c7dbe09da8d4ca","tier":null}],"members":[{"type":"individual","id":"f8326fd2096702fa","login":"sorami","name":"Sorami Hisamoto","avatar_url":"https://avatars-next.observableusercontent.com/7071ad5bf4e4e48d3db41f7aa1807baea2d84fcbe31b947b68c7dbe09da8d4ca","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":null,"type":"notebook","body":{"title":"Graticule with {Mapbox, MapLibre} GL JS","cells":[{"id":0,"value":"# Graticule with {Mapbox, MapLibre} GL JS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"## Draw lines with GeoJSON","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"[Show long/lat grid lines · Issue #10093 · mapbox/mapbox-gl-js](https://github.com/mapbox/mapbox-gl-js/issues/10093)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"graticuleGeoJSON = {\n const graticule = {\n type: \"FeatureCollection\",\n features: []\n };\n for (let lng = -180; lng < 180; lng += graticuleInterval) {\n graticule.features.push({\n type: \"Feature\",\n geometry: {\n type: \"LineString\",\n coordinates: [\n [lng, -90],\n [lng, 90]\n ]\n },\n properties: { value: lng }\n });\n }\n for (let lat = -90; lat < 90; lat += graticuleInterval) {\n graticule.features.push({\n type: \"Feature\",\n geometry: {\n type: \"LineString\",\n coordinates: [\n [-180, lat],\n [180, lat]\n ]\n },\n properties: { value: lat }\n });\n }\n\n return graticule;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof graticuleInterval = Inputs.range([1, 15], {\n value: 3,\n step: 1,\n label: \"Graticule Interval (degree)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"viewof projection1 = Inputs.radio(\n [\n \"mercator\",\n \"globe\",\n \"equalEarth\",\n \"albers\",\n \"lambertConformalConic\",\n \"winkelTripel\",\n \"naturalEarth\",\n \"equirectangular\"\n ],\n {\n value: \"globe\",\n label: \"Projection\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"## \"maplibre-grid\" library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"- [maptiler/maplibre-grid: Grid / graticule plugin for MapLibre GL JS / Mapbox GL JS](https://github.com/maptiler/maplibre-grid)\n- [maplibre-grid - npm](https://www.npmjs.com/package/maplibre-grid)\n- [demo](https://labs.maptiler.com/maplibre-grid/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"maplibreGrid = require(\"maplibre-grid@1.0.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"grid = new maplibreGrid.Grid({\n gridWidth,\n gridHeight,\n units: \"degrees\",\n paint: {\n \"line-color\": \"blue\",\n \"line-opacity\": 0.8\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"viewof gridWidth = Inputs.range([1, 15], {\n value: 10,\n step: 1,\n label: \"Grid Width (degree)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"viewof gridHeight = Inputs.range([1, 15], {\n value: 10,\n step: 1,\n label: \"Grid Height (degree)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"viewof projection2 = Inputs.radio(\n [\n \"mercator\",\n \"globe\",\n \"equalEarth\",\n \"albers\",\n \"lambertConformalConic\",\n \"winkelTripel\",\n \"naturalEarth\",\n \"equirectangular\"\n ],\n {\n value: \"mercator\",\n label: \"Projection\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"(**Click** grid cells to highlight 🐭)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.9.1\");\n if (!gl.accessTokean) {\n gl.accessToken =\n \"pk.eyJ1Ijoic29yYW1pIiwiYSI6ImNsM3p0eHA1ZTBsZXQzZHB4Z2Exenk3MDgifQ.87C9c97Xi_0FVcYDX215rg\";\n const href = await require.resolve(\"mapbox-gl@2.9.1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"