--- title: "Toggle deck.gl layer | Deck gl | JavaScript maps SDK" description: "Toggle visibility of Deck.gl layers using MapTiler SDK." --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # Toggle deck.gl layer This example shows how to toggle a deck.gl layer using MapTiler SDK JS. ### NPM module setup ```bash npm install --save @maptiler/sdk deck.gl ``` #### main.js ```js import { Map, MapStyle, config, Popup } from '@maptiler/sdk'; import '@maptiler/sdk/dist/maptiler-sdk.css'; import { ScatterplotLayer, MapboxOverlay } from 'deck.gl'; config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE'; const map = new Map({ container: 'map', style: MapStyle.DATAVIZ.LIGHT, center: [2.345885, 48.860412], zoom: 12, }); // 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], }, }, ], }; let isHovering = false; // Add the overlay as a control function initializeOverlay() { const layer = new ScatterplotLayer({ id: 'scatterplot-layer', data: sampleData.features, pickable: true, autoHighlight: 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], onClick: (info) => { const { coordinate, object } = info; const description = `

Name: ${object.properties['name']}

Disctrict: ${object.properties['district']}

`; new Popup() .setLngLat(coordinate) .setHTML(description) .addTo(map); }, }); // Create the overlay overlay = new MapboxOverlay({ layers: [layer], }); 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; } }); }); ``` #### index.html ```html Toggle deck.gl layer | NPM example
``` #### style.css ```css body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } ``` ### Basic JavaScript setup ```html Toggle interactions
``` ## Learn more Check out [Deck.gl with MapTiler maps](https://docs.maptiler.com/deck-gl/) for more examples of integrating Deck.gl layers into MapTiler maps. ## Related examples ### [Filter symbols by toggling a list](https://docs.maptiler.com/sdk-js/examples/filter-markers/) Examples Filter symbols based on property values in the dataset. ### [Map language by IP](https://docs.maptiler.com/sdk-js/examples/ip-map-language/) Tutorials This tutorial shows how to automatically change the map labels language based on visitor's location usign the MapTiler Geolocation API. ### [Legend control](https://docs.maptiler.com/sdk-js/examples/control-legend/) Tutorials Display a map legend control to toggle layer visibility. ### [Style switcher](https://docs.maptiler.com/sdk-js/examples/control-style-switcher/) Tutorials Add a style switcher control to your map.