Toggle deck.gl layer

This example shows how to toggle a deck.gl layer using MapTiler SDK JS.


npm install --save @maptiler/sdk deck.gl

main.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 = `<div>
        <p>
          <strong>Name: </strong>${object.properties['name']}
        </p>
          <strong>Disctrict: </strong>${object.properties['district']}
        </p>
      </div>`;

      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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Toggle deck.gl layer | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <style>
    #toggle-button {
      position: fixed;
      top: 20px;
      left: 20px;
      min-width: 70px;
      transition: 0.3s;
      cursor: pointer;
      padding: 8px;
      border-radius: 3px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      background: #3174ff;
      font-family: sans-serif;
      font-weight: bold;
      border: none;
    }

    #toggle-button:hover {
      scale: 1.1;
      box-shadow: 0px 2px 8px rgba(51, 51, 89, 0.15);
    }

    /* Deck.gl layer is added as an overlay, popup needs to be displayed over it */
    .maplibregl-popup {
      z-index: 2;
    }
  </style>
  <div id="map"></div>
  <button id="toggle-button">Hide</button>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toggle interactions</title>
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
  <script src="https://unpkg.com/deck.gl@9.2.5/dist.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <style>
    #toggle-button {
      position: fixed;
      top: 20px;
      left: 20px;
      min-width: 70px;
      transition: 0.3s;
      cursor: pointer;
      padding: 8px;
      border-radius: 3px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      background: #3174ff;
      font-family: sans-serif;
      font-weight: bold;
      border: none;
    }

    #toggle-button:hover {
      scale: 1.1;
      box-shadow: 0px 2px 8px rgba(51, 51, 89, 0.15);
    }

    /* Deck.gl layer is added as an overlay, popup needs to be displayed over it */
    .maplibregl-popup {
      z-index: 2;
    }
  </style>
  <div id="map"></div>
  <button id="toggle-button">Hide</button>

  <script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
      container: 'map',
      style: maptilersdk.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 deck.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 = `<div>
            <p>
              <strong>Name: </strong>${object.properties['name']}
            </p>
              <strong>Disctrict: </strong>${object.properties['district']}
            </p>
          </div>`;

          new maptilersdk.Popup()
            .setLngLat(coordinate)
            .setHTML(description)
            .addTo(map);
        },
      });

      // Create the overlay
      overlay = new deck.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;
        }
      });
    });
  </script>
</body>

</html>