It's the 15th anniversary of Google Maps Platform - Check out the latest news and announcements

Google Maps and deck.gl GeoJsonLayer

Visualizing thousands of points

This example visualizes recent earthquakes using the deck.gl GeoJsonLayer and a ScatterPlot of earthquakes.

Loading deck.gl

The below script can be added to the HTML so that deck is globally available. See the sample source for the usage in this sample.

<script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>

For more information, see https://deck.gl/.

TypeScript

// Initialize and add the map
function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 40, lng: -110 },
      zoom: 4
    }
  );

  // @ts-ignore TODO(jpoehnelt)
  const deckOverlay = new deck.GoogleMapsOverlay({
    layers: [
      // @ts-ignore TODO(jpoehnelt)
      new deck.GeoJsonLayer({
        id: "earthquakes",
        data:
          "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
        filled: true,
        pointRadiusMinPixels: 2,
        pointRadiusMaxPixels: 200,
        opacity: 0.4,
        pointRadiusScale: 0.3,
        getRadius: (f: any) => Math.pow(10, f.properties.mag),
        getFillColor: [255, 70, 30, 180],
        autoHighlight: true,
        transitions: {
          getRadius: {
            type: "spring",
            stiffness: 0.1,
            damping: 0.15,
            enter: _ => [0], // grow from size 0,
            duration: 10000
          }
        },
        onDataLoad: _ => {
          // @ts-ignore defined in include
          progress.done(); // hides progress bar
        }
      })
    ]
  });

  deckOverlay.setMap(map);
}

JavaScript

/* eslint-disable no-undef */
// Initialize and add the map
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40, lng: -110 },
    zoom: 4
  });

  const deckOverlay = new deck.GoogleMapsOverlay({
    layers: [
      new deck.GeoJsonLayer({
        id: "earthquakes",
        data:
          "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
        filled: true,
        pointRadiusMinPixels: 2,
        pointRadiusMaxPixels: 200,
        opacity: 0.4,
        pointRadiusScale: 0.3,
        getRadius: f => Math.pow(10, f.properties.mag),
        getFillColor: [255, 70, 30, 180],
        autoHighlight: true,
        transitions: {
          getRadius: {
            type: "spring",
            stiffness: 0.1,
            damping: 0.15,
            enter: _ => [0],
            duration: 10000
          }
        },
        onDataLoad: _ => {
          progress.done(); // hides progress bar
        }
      })
    ]
  });
  deckOverlay.setMap(map);
}

CSS


      

      

        
HTML

        
<!DOCTYPE html>
<html>
  <head>
    <title>deck.gl and Google Maps Platform</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- Use Material Design Progress indicator -->
    <link
      href="https://unpkg.com/material-components-web@6.0.0/dist/material-components-web.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/material-components-web@6.0.0/dist/material-components-web.min.js"></script>
    <!-- Load deck.gl -->
    <script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./app.js"></script>
  </head>
  <body>
    <div
      role="progressbar"
      class="mdc-linear-progress"
      aria-label="Data Progress Bar"
    >
      <div class="mdc-linear-progress__buffer">
        <div class="mdc-linear-progress__buffer-bar"></div>
        <div class="mdc-linear-progress__buffer-dots"></div>
      </div>
      <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
        <span class="mdc-linear-progress__bar-inner"></span>
      </div>
      <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
        <span class="mdc-linear-progress__bar-inner"></span>
      </div>
    </div>
    <script>
      var progress, progressDiv;
      progressDiv = document.querySelector(".mdc-linear-progress");
      progress = new mdc.linearProgress.MDCLinearProgress(progressDiv);
      progress.open();
      progress.determinate = false;
      progress.done = function() {
        progress.close();
        progressDiv.remove();
      };
    </script>
    <div id="map"></div>
  </body>
</html>

      

      

        
All

        
<!DOCTYPE html>
<html>
  <head>
    <title>deck.gl and Google Maps Platform</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- Use Material Design Progress indicator -->
    <link
      href="https://unpkg.com/material-components-web@6.0.0/dist/material-components-web.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/material-components-web@6.0.0/dist/material-components-web.min.js"></script>
    <!-- Load deck.gl -->
    <script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <style type="text/css">
      :root {
        --mdc-theme-primary: #1a73e8;
        --mdc-theme-secondary: #rgb(225, 245, 254);
        --mdc-theme-on-primary: #fff;
        --mdc-theme-on-secondary: rgb(1, 87, 155);
      }

      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }

      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      "use strict";

      /* eslint-disable no-undef */
      // Initialize and add the map
      function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
          center: {
            lat: 40,
            lng: -110
          },
          zoom: 4
        });
        const deckOverlay = new deck.GoogleMapsOverlay({
          layers: [
            new deck.GeoJsonLayer({
              id: "earthquakes",
              data:
                "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
              filled: true,
              pointRadiusMinPixels: 2,
              pointRadiusMaxPixels: 200,
              opacity: 0.4,
              pointRadiusScale: 0.3,
              getRadius: f => Math.pow(10, f.properties.mag),
              getFillColor: [255, 70, 30, 180],
              autoHighlight: true,
              transitions: {
                getRadius: {
                  type: "spring",
                  stiffness: 0.1,
                  damping: 0.15,
                  enter: _ => [0],
                  duration: 10000
                }
              },
              onDataLoad: _ => {
                progress.done(); // hides progress bar
              }
            })
          ]
        });
        deckOverlay.setMap(map);
      }
    </script>
  </head>
  <body>
    <div
      role="progressbar"
      class="mdc-linear-progress"
      aria-label="Data Progress Bar"
    >
      <div class="mdc-linear-progress__buffer">
        <div class="mdc-linear-progress__buffer-bar"></div>
        <div class="mdc-linear-progress__buffer-dots"></div>
      </div>
      <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
        <span class="mdc-linear-progress__bar-inner"></span>
      </div>
      <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
        <span class="mdc-linear-progress__bar-inner"></span>
      </div>
    </div>
    <script>
      var progress, progressDiv;
      progressDiv = document.querySelector(".mdc-linear-progress");
      progress = new mdc.linearProgress.MDCLinearProgress(progressDiv);
      progress.open();
      progress.determinate = false;
      progress.done = function() {
        progress.close();
        progressDiv.remove();
      };
    </script>
    <div id="map"></div>
  </body>
</html>

      

    

    
    
    
"use strict";

/* eslint-disable no-undef */
// Initialize and add the map
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 40,
      lng: -110
    },
    zoom: 4
  });
  const deckOverlay = new deck.GoogleMapsOverlay({
    layers: [
      new deck.GeoJsonLayer({
        id: "earthquakes",
        data:
          "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
        filled: true,
        pointRadiusMinPixels: 2,
        pointRadiusMaxPixels: 200,
        opacity: 0.4,
        pointRadiusScale: 0.3,
        getRadius: f => Math.pow(10, f.properties.mag),
        getFillColor: [255, 70, 30, 180],
        autoHighlight: true,
        transitions: {
          getRadius: {
            type: "spring",
            stiffness: 0.1,
            damping: 0.15,
            enter: _ => [0],
            duration: 10000
          }
        },
        onDataLoad: _ => {
          progress.done(); // hides progress bar
        }
      })
    ]
  });
  deckOverlay.setMap(map);
}

    
:root {
  --mdc-theme-primary: #1a73e8;
  --mdc-theme-secondary: #rgb(225, 245, 254);
  --mdc-theme-on-primary: #fff;
  --mdc-theme-on-secondary: rgb(1, 87, 155);
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

    
<!DOCTYPE html>
<html>
  <head>
    <title>deck.gl and Google Maps Platform</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- Use Material Design Progress indicator -->
    <link
      href="https://unpkg.com/material-components-web@6.0.0/dist/material-components-web.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/material-components-web@6.0.0/dist/material-components-web.min.js"></script>
    <!-- Load deck.gl -->
    <script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCb1xprYSpXd0q_yDsJ1W2UGhfl9_YGKU0&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div
      role="progressbar"
      class="mdc-linear-progress"
      aria-label="Data Progress Bar"
    >
      <div class="mdc-linear-progress__buffer">
        <div class="mdc-linear-progress__buffer-bar"></div>
        <div class="mdc-linear-progress__buffer-dots"></div>
      </div>
      <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
        <span class="mdc-linear-progress__bar-inner"></span>
      </div>
      <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
        <span class="mdc-linear-progress__bar-inner"></span>
      </div>
    </div>
    <script>
      var progress, progressDiv;
      progressDiv = document.querySelector(".mdc-linear-progress");
      progress = new mdc.linearProgress.MDCLinearProgress(progressDiv);
      progress.open();
      progress.determinate = false;
      progress.done = function() {
        progress.close();
        progressDiv.remove();
      };
    </script>
    <div id="map"></div>
  </body>
</html>