Data Layer: Earthquakes

  • This webpage showcases three distinct presentation styles for visualizing earthquake data from the USGS recent earthquakes feed on a Google Map.

  • The styles range from a default presentation to a simple style with red circles indicating earthquake locations, and finally, an advanced style with customized colors and sizes based on earthquake magnitude.

  • Code examples in TypeScript and JavaScript are provided for each style, demonstrating how to fetch earthquake data, apply styling to the data layer, and integrate it with the Google Maps API.

  • Each style includes HTML, CSS, and JavaScript/TypeScript code snippets for implementation, and links to live samples on JSFiddle and Google Cloud Shell are provided for interactive exploration.

This example creates three different presentation styles for a dataset from the USGS recent earthquakes feed.

Check out the reference documentation for the data layer.

Default style

Default style: map

gre

Default style: code example

TypeScript

let innerMap;
let earthquakeData;

async function initMap() {
  (await google.maps.importLibrary("maps")) as google.maps.MapsLibrary;

  const mapElement = document.querySelector(
    "gmp-map"
  ) as google.maps.MapElement;

  innerMap = mapElement.innerMap;

    // Get the earthquake data (JSONP format)
  // This feed is a copy from the USGS feed, you can find the originals here:
  //   http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php
  const script = document.createElement("script");

  script.setAttribute(
    "src",
    "quakes.geo.json"
  );

  document.getElementsByTagName("head")[0].appendChild(script);
}

// Defines the callback function referenced in the jsonp file.
function eqfeed_callback(data: any) {
  innerMap.data.addGeoJson(data);
}

window.eqfeed_callback = eqfeed_callback;
initMap();
index.ts

JavaScript

let innerMap;
let earthquakeData;
async function initMap() {
    (await google.maps.importLibrary("maps"));
    const mapElement = document.querySelector("gmp-map");
    innerMap = mapElement.innerMap;
    // Get the earthquake data (JSONP format)
    // This feed is a copy from the USGS feed, you can find the originals here:
    //   http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php
    const script = document.createElement("script");
    script.setAttribute("src", "quakes.geo.json");
    document.getElementsByTagName("head")[0].appendChild(script);
}
// Defines the callback function referenced in the jsonp file.
function eqfeed_callback(data) {
    innerMap.data.addGeoJson(data);
}
window.eqfeed_callback = eqfeed_callback;
initMap();
index.js

CSS

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

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

style.css

HTML

<html>
  <head>
    <title>Default Data Layer: Earthquakes</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </head>
  <body>
    <gmp-map center="20,-160" zoom="3"></gmp-map>
  </body>
</html>
index.html

Try Sample

Simple style

Simple style: map

Simple style: code example

TypeScript

let innerMap;

async function initMap() {
  (await google.maps.importLibrary("maps")) as google.maps.MapsLibrary;

  const mapElement = document.querySelector(
    "gmp-map"
  ) as google.maps.MapElement;

  innerMap = mapElement.innerMap;

  // Get the earthquake data (JSONP format)
  // This feed is a copy from the USGS feed, you can find the originals here:
  //   http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php
  const script = document.createElement("script");

  script.setAttribute(
    "src",
    "quakes.geo.json"
  );

  document.getElementsByTagName("head")[0].appendChild(script);

  // Add a basic style.
  innerMap.data.setStyle((feature) => {
    const mag = Math.exp(parseFloat(feature.getProperty("mag") as string)) * 0.1;
    return /** @type {google.maps.Data.StyleOptions} */ {
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: mag,
        fillColor: "#f00",
        fillOpacity: 0.35,
        strokeWeight: 0,
      },
    };
  });
}

// Defines the callback function referenced in the jsonp file.
function eqfeed_callback(data: any) {
  innerMap.data.addGeoJson(data);
}

window.eqfeed_callback = eqfeed_callback;
initMap();
index.ts

JavaScript

let innerMap;
async function initMap() {
    (await google.maps.importLibrary("maps"));
    const mapElement = document.querySelector("gmp-map");
    innerMap = mapElement.innerMap;
    // Get the earthquake data (JSONP format)
    // This feed is a copy from the USGS feed, you can find the originals here:
    //   http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php
    const script = document.createElement("script");
    script.setAttribute("src", "quakes.geo.json");
    document.getElementsByTagName("head")[0].appendChild(script);
    // Add a basic style.
    innerMap.data.setStyle((feature) => {
        const mag = Math.exp(parseFloat(feature.getProperty("mag"))) * 0.1;
        return /** @type {google.maps.Data.StyleOptions} */ {
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: mag,
                fillColor: "#f00",
                fillOpacity: 0.35,
                strokeWeight: 0,
            },
        };
    });
}
// Defines the callback function referenced in the jsonp file.
function eqfeed_callback(data) {
    innerMap.data.addGeoJson(data);
}
window.eqfeed_callback = eqfeed_callback;
initMap();
index.js

CSS

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

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

style.css

HTML

<html>
  <head>
    <title>Simple Data Layer: Earthquakes</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </head>
  <body>
    <gmp-map center="20,-160" zoom="2"></gmp-map>
  </body>
</html>
index.html

Try Sample

Advanced style

Advanced style: map

Advanced style: code example

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: 20, lng: -160 },
    zoom: 2,
    styles: mapStyle,
  });

  map.data.setStyle(styleFeature);

  // Get the earthquake data (JSONP format)
  // This feed is a copy from the USGS feed, you can find the originals here:
  //   http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php
  const script = document.createElement("script");

  script.setAttribute(
    "src",
    "https://storage.googleapis.com/mapsdevsite/json/quakes.geo.json"
  );
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Defines the callback function referenced in the jsonp file.
function eqfeed_callback(data: any) {
  map.data.addGeoJson(data);
}

function styleFeature(feature: google.maps.Data.Feature) {
  const low = [151, 83, 34]; // color of mag 1.0
  const high = [5, 69, 54]; // color of mag 6.0 and above
  const minMag = 1.0;
  const maxMag = 6.0;

  // fraction represents where the value sits between the min and max
  let mag = feature.getProperty("mag") as number;
  const fraction =
    (Math.min(mag, maxMag) - minMag) / (maxMag - minMag);

  const color = interpolateHsl(low, high, fraction);

  return {
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      strokeWeight: 0.5,
      strokeColor: "#fff",
      fillColor: color,
      fillOpacity: 2 / mag,
      // while an exponent would technically be correct, quadratic looks nicer
      scale: Math.pow(mag, 2),
    },
    zIndex: Math.floor(mag),
  };
}

function interpolateHsl(lowHsl: number[], highHsl: number[], fraction: number) {
  const color: number[] = [];

  for (let i = 0; i < 3; i++) {
    // Calculate color based on the fraction.
    color.push((highHsl[i] - lowHsl[i]) * fraction + lowHsl[i]);
  }

  return "hsl(" + color[0] + "," + color[1] + "%," + color[2] + "%)";
}

const mapStyle: google.maps.MapTypeStyle[] = [
  {
    featureType: "all",
    elementType: "all",
    stylers: [{ visibility: "off" }],
  },
  {
    featureType: "landscape",
    elementType: "geometry",
    stylers: [{ visibility: "on" }, { color: "#fcfcfc" }],
  },
  {
    featureType: "water",
    elementType: "labels",
    stylers: [{ visibility: "off" }],
  },
  {
    featureType: "water",
    elementType: "geometry",
    stylers: [{ visibility: "on" }, { hue: "#5f94ff" }, { lightness: 60 }],
  },
];

declare global {
  interface Window {
    initMap: () => void;
    eqfeed_callback: (results: any) => void;
  }
}
window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;
index.ts

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20, lng: -160 },
    zoom: 2,
    styles: mapStyle,
  });
  map.data.setStyle(styleFeature);

  // Get the earthquake data (JSONP format)
  // This feed is a copy from the USGS feed, you can find the originals here:
  //   http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php
  const script = document.createElement("script");

  script.setAttribute(
    "src",
    "https://storage.googleapis.com/mapsdevsite/json/quakes.geo.json",
  );
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Defines the callback function referenced in the jsonp file.
function eqfeed_callback(data) {
  map.data.addGeoJson(data);
}

function styleFeature(feature) {
  const low = [151, 83, 34]; // color of mag 1.0
  const high = [5, 69, 54]; // color of mag 6.0 and above
  const minMag = 1.0;
  const maxMag = 6.0;
  // fraction represents where the value sits between the min and max
  let mag = feature.getProperty("mag");
  const fraction = (Math.min(mag, maxMag) - minMag) / (maxMag - minMag);
  const color = interpolateHsl(low, high, fraction);
  return {
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      strokeWeight: 0.5,
      strokeColor: "#fff",
      fillColor: color,
      fillOpacity: 2 / mag,
      // while an exponent would technically be correct, quadratic looks nicer
      scale: Math.pow(mag, 2),
    },
    zIndex: Math.floor(mag),
  };
}

function interpolateHsl(lowHsl, highHsl, fraction) {
  const color = [];

  for (let i = 0; i < 3; i++) {
    // Calculate color based on the fraction.
    color.push((highHsl[i] - lowHsl[i]) * fraction + lowHsl[i]);
  }
  return "hsl(" + color[0] + "," + color[1] + "%," + color[2] + "%)";
}

const mapStyle = [
  {
    featureType: "all",
    elementType: "all",
    stylers: [{ visibility: "off" }],
  },
  {
    featureType: "landscape",
    elementType: "geometry",
    stylers: [{ visibility: "on" }, { color: "#fcfcfc" }],
  },
  {
    featureType: "water",
    elementType: "labels",
    stylers: [{ visibility: "off" }],
  },
  {
    featureType: "water",
    elementType: "geometry",
    stylers: [{ visibility: "on" }, { hue: "#5f94ff" }, { lightness: 60 }],
  },
];

window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;
index.js

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

style.css

HTML

<html>
  <head>
    <title>Advanced Data Layer: Earthquakes</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Try Sample