New!: Mapgl Js Api

map.on('click', (e) => const features = map.queryRenderedFeatures(e.point, layers: ['building', 'road-label'] // Only query specific layers ); if (features.length) new maplibregl.Popup() .setLngLat(e.lngLat) .setHTML(`<b>$features[0].properties.name</b>`) .addTo(map);

Add a container div where the map will be rendered. You must define a height for this container, or the map will not appear. mapgl js api

MapGL separates the map data from the visual style. This means you can apply different "skins" or themes to the same underlying map data. Whether you need a dark mode for a dashboard or a high-contrast theme for accessibility, you can achieve it via JSON styling objects. This means you can apply different "skins" or

Users can interact with map layers in real-time, including rotating and tilting the view via mouse or touch gestures. Add a script tag:

Add a script tag: .

A beautiful map is useless if it is static. MapLibre GL JS provides a rich set of interactivity features that bridge the gap between the rendered canvas and the user.