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/.

JavaScript

// 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], // grow from size 0,
            duration: 10000
          }
        },
        onDataLoad: _ => {
          progress.done(); // hides progress bar
        }
      })
    ]
  });

  deckOverlay.setMap(map);
}

CSS

/* 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;
}

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);
      }

      .mdc-select--focused .mdc-select__dropdown-icon {
        background: url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E)
          no-repeat center;
      }

      /* 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>
      (function(exports) {
        "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],
                    // grow from size 0,
                    duration: 10000
                  }
                },
                onDataLoad: _ => {
                  progress.done(); // hides progress bar
                }
              })
            ]
          });
          deckOverlay.setMap(map);
        }

        exports.initMap = initMap;
      })((this.window = this.window || {}));
    </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>
(function(exports) { "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], // grow from size 0, duration: 10000 } }, onDataLoad: _ => { progress.done(); // hides progress bar } }) ] }); deckOverlay.setMap(map); } exports.initMap = initMap; })((this.window = this.window || {}));
: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); } .mdc-select--focused .mdc-select__dropdown-icon { background: url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E) no-repeat center; } /* 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=&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>