This example shows an approach to styling point geometry based data features. It is based on the following dataset: 2018 Squirrel Census Fur Color Map
Read the documentation .
TypeScript
const mapElement = document . querySelector ( 'gmp-map' ) as google . maps . MapElement ; let innerMap ; function setStyle ( /* FeatureStyleFunctionOptions */ params ) { // Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params . feature ; // Get all of the needed dataset attributes. const furColors = datasetFeature . datasetAttributes [ 'CombinationofPrimaryandHighlightColor' ]; // Apply styles. Fill is primary fur color, stroke is secondary fur color. switch ( furColors ) { case 'Black+' : return /* FeatureStyleOptions */ { fillColor : 'black' , pointRadius : 8 }; break ; case 'Cinnamon+' : return /* FeatureStyleOptions */ { fillColor : '#8b0000' , pointRadius : 8 }; break ; case 'Cinnamon+Gray' : return /* FeatureStyleOptions */ { fillColor : '#8b0000' , strokeColor : 'gray' , pointRadius : 6 }; break ; case 'Cinnamon+White' : return /* FeatureStyleOptions */ { fillColor : '#8b0000' , strokeColor : 'white' , pointRadius : 6 }; break ; case 'Gray+' : return /* FeatureStyleOptions */ { fillColor : 'gray' , pointRadius : 8 }; break ; case 'Gray+Cinnamon' : return /* FeatureStyleOptions */ { fillColor : 'gray' , strokeColor : '#8b0000' , pointRadius : 6 }; break ; case 'Gray+Cinnamon, White' : return /* FeatureStyleOptions */ { fillColor : 'silver' , strokeColor : '#8b0000' , pointRadius : 6 }; break ; case 'Gray+White' : return /* FeatureStyleOptions */ { fillColor : 'gray' , strokeColor : 'white' , pointRadius : 6 }; break ; default : // Color not defined. return /* FeatureStyleOptions */ { fillColor : 'yellow' , pointRadius : 8 }; break ; } } async function initMap () { // Request needed libraries. await google . maps . importLibrary ( 'maps' ) as google . maps . MapsLibrary ; // Get the inner map. innerMap = mapElement . innerMap ; await google . maps . event . addListenerOnce ( innerMap , 'idle' , () = > { // Add the data legend. makeLegend ( innerMap ); }); // Dataset ID for squirrel dataset. const datasetId = 'a99635b0-5e73-4b2a-8ae3-cb40f4b7f47e' ; const datasetLayer = innerMap . getDatasetFeatureLayer ( datasetId ); datasetLayer . style = setStyle ; } // Creates a legend for the map. async function makeLegend ( innerMap ) { let colors = { 'black' : [ 'black' ], 'cinnamon' : [ '#8b0000' ], 'cinnamon + gray' : [ '#8b0000' , 'gray' ], 'cinnamon + white' : [ '#8b0000' , 'white' ], 'gray' : [ 'gray' ], 'gray + cinnamon' : [ 'gray' , '#8b0000' ], 'gray + cinnamon + white' : [ 'silver' , '#8b0000' ], 'gray + white' : [ 'gray' , 'white' ], 'no color data' : [ 'yellow' ], }; let legend = document . getElementById ( 'legend' ); legend ! . id = 'legend' ; let title = document . createElement ( 'div' ); title . innerText = 'Fur Colors' ; title . classList . add ( 'title' ); legend ! . appendChild ( title ); let color ; for ( color in colors ) { let wrapper = document . createElement ( 'div' ); wrapper . id = 'container' ; let box = document . createElement ( 'div' ); box . style . backgroundColor = colors [ color ][ 0 ]; if ( colors [ color ][ 1 ]) { box . style . borderColor = colors [ color ][ 1 ]; } else { box . style . borderColor = colors [ color ][ 0 ]; } box . classList . add ( 'box' ); let txt = document . createElement ( 'div' ); txt . classList . add ( 'legend' ); txt . innerText = color ; wrapper . appendChild ( box ); wrapper . appendChild ( txt ); legend ! . appendChild ( wrapper ); } } initMap ();
JavaScript
const mapElement = document . querySelector ( 'gmp-map' ); let innerMap ; function setStyle ( /* FeatureStyleFunctionOptions */ params ) { // Get the dataset feature, so we can work with all of its attributes. const datasetFeature = params . feature ; // Get all of the needed dataset attributes. const furColors = datasetFeature . datasetAttributes [ 'CombinationofPrimaryandHighlightColor' ]; // Apply styles. Fill is primary fur color, stroke is secondary fur color. switch ( furColors ) { case 'Black+' : return /* FeatureStyleOptions */ { fillColor : 'black' , pointRadius : 8 }; break ; case 'Cinnamon+' : return /* FeatureStyleOptions */ { fillColor : '#8b0000' , pointRadius : 8 }; break ; case 'Cinnamon+Gray' : return /* FeatureStyleOptions */ { fillColor : '#8b0000' , strokeColor : 'gray' , pointRadius : 6 }; break ; case 'Cinnamon+White' : return /* FeatureStyleOptions */ { fillColor : '#8b0000' , strokeColor : 'white' , pointRadius : 6 }; break ; case 'Gray+' : return /* FeatureStyleOptions */ { fillColor : 'gray' , pointRadius : 8 }; break ; case 'Gray+Cinnamon' : return /* FeatureStyleOptions */ { fillColor : 'gray' , strokeColor : '#8b0000' , pointRadius : 6 }; break ; case 'Gray+Cinnamon, White' : return /* FeatureStyleOptions */ { fillColor : 'silver' , strokeColor : '#8b0000' , pointRadius : 6 }; break ; case 'Gray+White' : return /* FeatureStyleOptions */ { fillColor : 'gray' , strokeColor : 'white' , pointRadius : 6 }; break ; default : // Color not defined. return /* FeatureStyleOptions */ { fillColor : 'yellow' , pointRadius : 8 }; break ; } } async function initMap () { // Request needed libraries. await google . maps . importLibrary ( 'maps' ); // Get the inner map. innerMap = mapElement . innerMap ; await google . maps . event . addListenerOnce ( innerMap , 'idle' , () = > { // Add the data legend. makeLegend ( innerMap ); }); // Dataset ID for squirrel dataset. const datasetId = 'a99635b0-5e73-4b2a-8ae3-cb40f4b7f47e' ; const datasetLayer = innerMap . getDatasetFeatureLayer ( datasetId ); datasetLayer . style = setStyle ; } // Creates a legend for the map. async function makeLegend ( innerMap ) { let colors = { 'black' : [ 'black' ], 'cinnamon' : [ '#8b0000' ], 'cinnamon + gray' : [ '#8b0000' , 'gray' ], 'cinnamon + white' : [ '#8b0000' , 'white' ], 'gray' : [ 'gray' ], 'gray + cinnamon' : [ 'gray' , '#8b0000' ], 'gray + cinnamon + white' : [ 'silver' , '#8b0000' ], 'gray + white' : [ 'gray' , 'white' ], 'no color data' : [ 'yellow' ], }; let legend = document . getElementById ( 'legend' ); legend . id = 'legend' ; let title = document . createElement ( 'div' ); title . innerText = 'Fur Colors' ; title . classList . add ( 'title' ); legend . appendChild ( title ); let color ; for ( color in colors ) { let wrapper = document . createElement ( 'div' ); wrapper . id = 'container' ; let box = document . createElement ( 'div' ); box . style . backgroundColor = colors [ color ][ 0 ]; if ( colors [ color ][ 1 ]) { box . style . borderColor = colors [ color ][ 1 ]; } else { box . style . borderColor = colors [ color ][ 0 ]; } box . classList . add ( 'box' ); let txt = document . createElement ( 'div' ); txt . classList . add ( 'legend' ); txt . innerText = color ; wrapper . appendChild ( box ); wrapper . appendChild ( txt ); legend . appendChild ( wrapper ); } } initMap ();
CSS
/* * Optional: Makes the sample page fill the window. */ html , body { height : 100 % ; margin : 0 ; padding : 0 ; } # attributionLabel { background-color : rgba ( 255 , 255 , 255 , 0.8 ); font-family : 'Roboto' , 'Arial' , 'sans-serif' ; font-size : 10 px ; padding : 2 px ; margin : 2 px ; } # legend , # dataset , # counter { background-color : #e5e5e5 ; width : 15 em ; margin-left : 1 em ; border-radius : 8 px ; font-family : Roboto ; overflow : hidden ; } # dataset select { border-radius : 0 ; padding : 0.1 em ; border : 1 px solid black ; width : auto ; margin : 0.5 em 1 em ; } . title { padding : 0.5 em 1 em ; font-weight : bold ; font-size : 1.5 em ; margin-bottom : 0.5 em ; background-color : rgb ( 66 , 133 , 244 ); color : white ; width : 100 % ; } . button { font-size : 1.2 em ; margin : 1 em ; background-color : rgb ( 66 , 133 , 244 ); color : white ; padding : 0.5 em ; border-radius : 8 px ; } # legend # container { margin : 0.5 em ; display : flex ; } # legend div . box { display : flex ; width : 1 em ; height : 1 em ; border-radius : 50 % ; border : 2 px solid ; } # legend div . legend { display : flex ; padding : 0.3 em ; }
HTML
<html> <head> <title>Style a point data feature</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 map-id="5cd2c9ca1cf05670" center="40.780101, -73.967780" zoom="17" map-type-control="false" street-view-control="false" fullscreen-control="false"> <div id="legend" slot="control-inline-start-block-start"></div> <div id="attributionLabel" slot="control-block-end-inline-start"> Data source: NYC Open Data </div> </gmp-map> </body> </html>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone https : //github.com/googlemaps-samples/js-api-samples.gitcd samples / dds - datasets - pointnpm inpm start
