Page Summary
-
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
greDefault 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 ();
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 ();
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 ; }
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>
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 ();
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 ();
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 ; }
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>
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 ;
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 ;
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
<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>
