Last active
July 31, 2026 12:42
-
-
Save tim-salabim/602c95fcf58304707c9866169d0b4a2c to your computer and use it in GitHub Desktop.
maplibre map with deckgl overlay - picking not working
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Toggle deck.gl layer</title> | |
| <meta property="og:description" content="Toggle deck.gl layer using maplibre." /> | |
| <meta property="og:category" content="Plugins & Integrations" /> | |
| <meta property="og:created" content="2024-01-19" /> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.1.0/dist/maplibre-gl.css" /> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, | |
| body, | |
| #map { | |
| height: 100%; | |
| } | |
| #toggle-button { | |
| position: fixed; | |
| top: 20px; | |
| left: 20px; | |
| background-color: rgb(130, 25, 191); | |
| color: #f0ead6; | |
| font-size: 1.2rem; | |
| min-width: 70px; | |
| border-radius: 5px; | |
| border: none; | |
| padding: 5px 10px; | |
| transition: 0.3s; | |
| } | |
| #toggle-button:hover { | |
| scale: 1.1; | |
| box-shadow: 0 0 4px 4px gray; | |
| } | |
| /* Deck.gl layer is added as an overlay, popup needs to be displayed over it */ | |
| .maplibregl-popup { | |
| z-index: 2; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <button id="toggle-button">Hide</button> | |
| <script type="module"> | |
| /* | |
| import * as deckgeolayers from "https://esm.sh/@deck.gl/geo-layers"; | |
| import * as deckeaggregationlayers from "https://esm.sh/@deck.gl/aggregation-layers"; | |
| import * as deckextensions from "https://esm.sh/@deck.gl/extensions"; | |
| import * as deckreact from "https://esm.sh/@deck.gl/react"; | |
| */ | |
| import * as deckcore from "https://esm.sh/@deck.gl/core@9.3.7"; | |
| import * as decklayers from "https://esm.sh/@deck.gl/layers@9.3.7"; | |
| import * as mapboxoverlay from "https://esm.sh/@deck.gl/mapbox@9.3.7"; | |
| import * as maplibregl from 'https://unpkg.com/maplibre-gl@6.1.0/dist/maplibre-gl.mjs'; | |
| const deck = { | |
| ...deckcore, | |
| ...decklayers, | |
| ...mapboxoverlay | |
| }; | |
| Object.assign(window, { deck }); | |
| let overlay; | |
| const map = new maplibregl.Map({ | |
| container: 'map', | |
| style: 'https://tiles.openfreemap.org/styles/bright', | |
| center: [2.345885, 48.860412], | |
| zoom: 12, | |
| }); | |
| map.addControl(new maplibregl.NavigationControl(), 'top-right'); | |
| // 5 Beautiful gardens in Paris | |
| const sampleData = { | |
| type: 'FeatureCollection', | |
| name: 'Jardins Des Paris', | |
| crs: { | |
| type: 'name', | |
| properties: {name: 'urn:ogc:def:crs:OGC:1.3:CRS84'}, | |
| }, | |
| features: [ | |
| { | |
| type: 'Feature', | |
| properties: { | |
| name: 'Jardins du Trocadéro', | |
| district: 16, | |
| }, | |
| geometry: { | |
| type: 'Point', | |
| coordinates: [2.289207, 48.861561], | |
| }, | |
| }, | |
| { | |
| type: 'Feature', | |
| properties: { | |
| name: 'Jardin des Plantes', | |
| district: 5, | |
| }, | |
| geometry: { | |
| type: 'Point', | |
| coordinates: [2.359823, 48.843995], | |
| }, | |
| }, | |
| { | |
| type: 'Feature', | |
| properties: { | |
| name: 'Jardins das Tulherias', | |
| district: 1, | |
| }, | |
| geometry: { | |
| type: 'Point', | |
| coordinates: [2.327092, 48.863608], | |
| }, | |
| }, | |
| { | |
| type: 'Feature', | |
| properties: { | |
| name: 'Parc de Bercy', | |
| district: 12, | |
| }, | |
| geometry: { | |
| type: 'Point', | |
| coordinates: [2.382094, 48.835962], | |
| }, | |
| }, | |
| { | |
| type: 'Feature', | |
| properties: { | |
| name: 'Jardin du Luxemburg', | |
| district: 6, | |
| }, | |
| geometry: { | |
| type: 'Point', | |
| coordinates: [2.336975, 48.846421], | |
| }, | |
| }, | |
| ], | |
| }; | |
| // Add the overlay as a control | |
| function initializeOverlay () { | |
| const layer = new deck.ScatterplotLayer({ | |
| id: 'scatterplot-layer', | |
| data: sampleData.features, | |
| pickable: true, | |
| opacity: 0.8, | |
| stroked: true, | |
| filled: true, | |
| radiusScale: 6, | |
| radiusMinPixels: 20, | |
| radiusMaxPixels: 100, | |
| lineWidthMinPixels: 5, | |
| getPosition: (d) => d.geometry.coordinates, | |
| getFillColor: (d) => [49, 130, 206], | |
| getLineColor: (d) => [175, 0, 32], | |
| autoHighlight: true, | |
| onClick: (info) => { | |
| const {coordinate, object} = info; | |
| const description = `<div> | |
| <p> | |
| <strong>Name: </strong>${object.properties['name']} | |
| </p> | |
| <strong>District: </strong>${object.properties['district']} | |
| </p> | |
| </div>`; | |
| new maplibregl.Popup() | |
| .setLngLat(coordinate) | |
| .setHTML(description) | |
| .addTo(map); | |
| }, | |
| }); | |
| // Create the overlay | |
| overlay = new deck.MapboxOverlay({ | |
| layers: [layer], | |
| onClick: (info, event) => { | |
| console.log("picked:", info.picked); | |
| //console.log("Event:", event); | |
| } | |
| }); | |
| map.addControl(overlay); | |
| } | |
| let show = true; // Display the layer by default | |
| map.on('load', () => { | |
| // Add the overlay | |
| initializeOverlay(); | |
| const toggleButton = document.querySelector('#toggle-button'); | |
| toggleButton.addEventListener('click', () => { | |
| if (show) { | |
| map.removeControl(overlay); | |
| toggleButton.innerText = 'Show'; | |
| show = false; | |
| } else { | |
| initializeOverlay(); | |
| toggleButton.innerText = 'Hide'; | |
| show = true; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment