Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Style data features

  • Data features on a Google Map can be styled using thestyle property of a dataset feature layer, accepting agoogle.maps.FeatureStyleFunction orgoogle.maps.FeatureStyleOptions.

  • Access data attributes within a dataset usingparams.feature.datasetAttributes['attributeName'] in the feature style function.

  • Feature style options allow customization of elements like fill, stroke, and diameter for data features.

  • Utilize a feature style function for complex, data-driven styling logic applied to each feature, ensuring optimization and consistent results.

  • The provided examples demonstrate styling point and polygon data based on attributes, showcasing the use of switch statements and default styles.

Select platform:AndroidiOSJavaScript

Apply style to data features by setting thestyle property on a datasetfeature layer to agoogle.maps.FeatureStyleFunction, which can contain stylinglogic, or agoogle.maps.FeatureStyleOptions, to uniformly style all featuresfor a layer. You can apply styles to data features for fill (color, opacity),stroke (color, opacity, stroke weight), and diameter (points). This page showshow to programmatically access a dataset and style its features, and walksthrough styling examples for data features based on point, polygon, and polylinegeometries.

Data-driven styling for datasets renders data features based on the provided latitudeand longitude coordinates from the geospatial data file used to create thedataset.

Data feature attributes

All data in a dataset can be accessed in the feature style function. To get datafeature attributes, first get the dataset feature, which contains all datawithin the dataset, then get the specific data attribute you want, as shownhere:

TypeScript

// Get the dataset feature, so we can work with all of its attributes.constdatasetFeature=params.feature;// Get all of the needed dataset attributes.constfurColors=datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

// Get the dataset feature, so we can work with all of its attributes.constdatasetFeature=params.feature;// Get all of the needed dataset attributes.constfurColors=datasetFeature.datasetAttributes["CombinationofPrimaryandHighlightColor"];

Feature style options

Feature style optionsare where you define styling for a datafeature layer,for example styling the fill and stroke for polygons, or the color and diameterof points. The following example shows feature style options, which could bedirectly applied using thestyle property for a feature:

TypeScript

// Apply style to all features.datasetLayer.style={strokeColor:'green',strokeWeight:4,};
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

// Apply style to all features.datasetLayer.style={strokeColor:"green",strokeWeight:4};

The feature style function

Use a feature style function to define logic for styling dataset features.To style a feature, set thestyle property to agoogle.maps.FeatureStyleFunction.The style function is where where you define logic to style individual featureson a feature layer. WhenfeatureLayer.style is set, the style function is runover every feature in the affected feature layer. The function is applied at thetime you set the style property. To update it, you must set the style propertyagain. The following example shows a simple feature style function:

TypeScript

conststyleDefault={strokeColor:'green',strokeWeight:2.0,strokeOpacity:1.0,fillColor:'green',fillOpacity:0.3,};conststyleClicked={...styleDefault,strokeColor:'blue',fillColor:'blue',fillOpacity:0.5,};conststyleMouseMove={...styleDefault,strokeWeight:4.0};functionapplyStyle(/* FeatureStyleFunctionOptions */params){constdatasetFeature=params.feature;// Note, 'globalid' is an attribute in this dataset.//@ts-ignoreif(lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])){returnstyleClicked;}//@ts-ignoreif(lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])){returnstyleMouseMove;}returnstyleDefault;}
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

conststyleDefault={strokeColor:"green",strokeWeight:2.0,strokeOpacity:1.0,fillColor:"green",fillOpacity:0.3,};conststyleClicked={...styleDefault,strokeColor:"blue",fillColor:"blue",fillOpacity:0.5,};conststyleMouseMove={...styleDefault,strokeWeight:4.0,};functionapplyStyle(/* FeatureStyleFunctionOptions */params){constdatasetFeature=params.feature;// Note, 'globalid' is an attribute in this dataset.//@ts-ignoreif(lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"])){returnstyleClicked;}//@ts-ignoreif(lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"],)){returnstyleMouseMove;}returnstyleDefault;}

The style function should always return consistent results when it is appliedover features. For example, if you wanted to randomly color a set of features,the random part should not take place in the feature style function, as thatwould cause unintended results. Because this function runs over every feature ina layer, optimization is important. To avoid impacting rendering times, setstyle tonull when a layer is no longer in use.

Point data styling example

This example shows an approach to styling point geometry based data features.

About the dataset

The dataset used in this example is the result of a2018 survey of squirrels in Central Park, New York City.In the following excerpt from the CSV data file, we see that columnsx andyare used for geography; aLatLng column is included, but it's not used in thisexample since geographic position must be represented by two columns. Thesquirrel census dataset contains a nice variety of different data pointsrelating to the observed fur color and behavior of squirrels (be sure to scrollhorizontally to see it all).

XYUniqueSquirrelIDHectareShiftDateHectare SquirrelNumberAgePrimaryFurColorHighlightFurColorCombinationofPrimaryandHighlightColorColornotesLocationAboveGroundSighter MeasurementSpecificLocationRunningChasingClimbingEatingForagingOther ActivitiesKuksQuaasMoansTailflagsTailtwitchesApproachesIndifferentRunsfromOtherInteractionsLatLng
-73.956134493786140.794082388408637F-PM-1014-0337FPM101420183+falsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsePOINT (-73.9561344937861 40.7940823884086)
-73.968857469110240.783782520844421B-AM-1019-0421BAM101920184+falsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsePOINT (-73.9688574691102 40.7837825208444)
-73.974281148485240.77553361908311B-PM-1014-0811BPM101420188GrayGray+Above Ground10falsetruefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsePOINT (-73.97428114848522 40.775533619083)
-73.959641390394840.790312888902932E-PM-1017-1432EPM1017201814AdultGrayGray+Nothing selected as Primary. Gray selected as Highlights. Made executive adjustments.falsefalsefalsetruetruefalsefalsefalsefalsefalsefalsefalsetruePOINT (-73.9596413903948 40.7903128889029)
-73.970267647261340.776212685489413E-AM-1017-0513EAM101720185AdultGrayCinnamonGray+CinnamonAbove Groundon tree stumpfalsefalsefalsefalsetruefalsefalsefalsefalsefalsefalsefalsefalsePOINT (-73.9702676472613 40.7762126854894)
-73.968361351622540.772590884749911H-AM-1010-0311HAM101020183AdultCinnamonWhiteCinnamon+WhitefalsefalsefalsefalsetruefalsefalsefalsefalsetruefalsetruefalsePOINT (-73.9683613516225 40.7725908847499)
-73.954120178979540.793181170108236H-AM-1010-0236HAM101020182AdultGrayGray+just outside hectareGround PlaneFALSEfalsefalsefalsefalsetruefalsefalsefalsefalsefalsefalsefalsefalsePOINT (-73.9541201789795 40.7931811701082)

Style point data features

The code in this example takes the simple approach of styling the fill color andstroke color for each point based on theCombinationofPrimaryandHighlightColorattribute, which combines the primary and secondary fur colors for eachsquirrel.

TypeScript

functionsetStyle(/* FeatureStyleFunctionOptions */params){// Get the dataset feature, so we can work with all of its attributes.constdatasetFeature=params.feature;// Get all of the needed dataset attributes.constfurColors=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;}}
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

functionsetStyle(/* FeatureStyleFunctionOptions */params){// Get the dataset feature, so we can work with all of its attributes.constdatasetFeature=params.feature;// Get all of the needed dataset attributes.constfurColors=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;}}

Complete example code

See the complete example source code

TypeScript

letmap;functionsetStyle(/* FeatureStyleFunctionOptions */params){// Get the dataset feature, so we can work with all of its attributes.constdatasetFeature=params.feature;// Get all of the needed dataset attributes.constfurColors=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;}}asyncfunctioninitMap(){// Request needed libraries.const{Map}=awaitgoogle.maps.importLibrary('maps')asgoogle.maps.MapsLibrary;constposition={lat:40.780101,lng:-73.967780};constmap=newMap(document.getElementById('map')asHTMLElement,{zoom:17,center:position,mapId:'b98e588c46685dd7',mapTypeControl:false,streetViewControl:false,fullscreenControl:false,});// Add the data legend.makeLegend(map);// Dataset ID for squirrel dataset.constdatasetId='02fa1552-37dd-4a95-844f-f99e1c22541f';//@ts-ignoreconstdatasetLayer=map.getDatasetFeatureLayer(datasetId);//@ts-ignoredatasetLayer.style=setStyle;// Create an attribution DIV and add the attribution to the map.constattributionDiv=document.createElement('div');constattributionControl=createAttribution(map);attributionDiv.appendChild(attributionControl);map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(attributionDiv);}// Create a custom control to hold attribution text.functioncreateAttribution(map){constattributionLabel=document.createElement('div');// Define CSS styles.attributionLabel.style.backgroundColor='#fff';attributionLabel.style.opacity='0.7';attributionLabel.style.fontFamily='Roboto,Arial,sans-serif';attributionLabel.style.fontSize='10px';attributionLabel.style.padding='2px';attributionLabel.style.margin='2px';attributionLabel.textContent='Data source: NYC Open Data';returnattributionLabel;}functionmakeLegend(map){letcolors={'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'],};letlegend=document.createElement('div');legend.id='legend';lettitle=document.createElement('div');title.innerText='Fur Colors';title.classList.add('title');legend.appendChild(title);letk;for(kincolors){letwrapper=document.createElement('div');wrapper.id='container';letbox=document.createElement('div');box.style.backgroundColor=colors[k][0];if(colors[k][1]){box.style.borderColor=colors[k][1];}else{box.style.borderColor=colors[k][0];}box.classList.add('box');lettxt=document.createElement('div');txt.classList.add('legend');txt.innerText=k;wrapper.appendChild(box);wrapper.appendChild(txt);legend.appendChild(wrapper);}map.controls[google.maps.ControlPosition.LEFT_TOP].push(legend);}initMap();
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

letmap;functionsetStyle(/* FeatureStyleFunctionOptions */params){// Get the dataset feature, so we can work with all of its attributes.constdatasetFeature=params.feature;// Get all of the needed dataset attributes.constfurColors=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;}}asyncfunctioninitMap(){// Request needed libraries.const{Map}=awaitgoogle.maps.importLibrary("maps");constposition={lat:40.780101,lng:-73.96778};constmap=newMap(document.getElementById("map"),{zoom:17,center:position,mapId:"b98e588c46685dd7",mapTypeControl:false,streetViewControl:false,fullscreenControl:false,});// Add the data legend.makeLegend(map);// Dataset ID for squirrel dataset.constdatasetId="02fa1552-37dd-4a95-844f-f99e1c22541f";//@ts-ignoreconstdatasetLayer=map.getDatasetFeatureLayer(datasetId);//@ts-ignoredatasetLayer.style=setStyle;// Create an attribution DIV and add the attribution to the map.constattributionDiv=document.createElement("div");constattributionControl=createAttribution(map);attributionDiv.appendChild(attributionControl);map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(attributionDiv);}// Create a custom control to hold attribution text.functioncreateAttribution(map){constattributionLabel=document.createElement("div");// Define CSS styles.attributionLabel.style.backgroundColor="#fff";attributionLabel.style.opacity="0.7";attributionLabel.style.fontFamily="Roboto,Arial,sans-serif";attributionLabel.style.fontSize="10px";attributionLabel.style.padding="2px";attributionLabel.style.margin="2px";attributionLabel.textContent="Data source: NYC Open Data";returnattributionLabel;}functionmakeLegend(map){letcolors={"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"],};letlegend=document.createElement("div");legend.id="legend";lettitle=document.createElement("div");title.innerText="Fur Colors";title.classList.add("title");legend.appendChild(title);letk;for(kincolors){letwrapper=document.createElement("div");wrapper.id="container";letbox=document.createElement("div");box.style.backgroundColor=colors[k][0];if(colors[k][1]){box.style.borderColor=colors[k][1];}else{box.style.borderColor=colors[k][0];}box.classList.add("box");lettxt=document.createElement("div");txt.classList.add("legend");txt.innerText=k;wrapper.appendChild(box);wrapper.appendChild(txt);legend.appendChild(wrapper);}map.controls[google.maps.ControlPosition.LEFT_TOP].push(legend);}initMap();
Note: The JavaScript is compiled from the TypeScript snippet.

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;}#legend,#dataset,#counter{background-color:#e5e5e5;width:15em;margin-top:2em;margin-left:1em;border-radius:8px;font-family:Roboto;overflow:hidden;}#datasetselect{border-radius:0;padding:0.1em;border:1pxsolidblack;width:auto;margin:0.5em1em;}.title{padding:0.5em1em;font-weight:bold;font-size:1.5em;margin-bottom:0.5em;background-color:rgb(66,133,244);color:white;width:100%;}.button{font-size:1.2em;margin:1em;background-color:rgb(66,133,244);color:white;padding:0.5em;border-radius:8px;}#legend#container{margin:0.5em1em;display:flex;}#legenddiv.box{display:flex;width:2em;height:2em;border-radius:50%;border:3pxsolid;}#legenddiv.legend{display:flex;padding:0.5em;}

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>  </head>  <body>    <div></div>    <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>  </body></html>

Try Sample

Polygon data styling example

This example shows an approach to styling polygon geometry based data features.

About the dataset

The dataset used in this example depictsparks in New York City.The following excerpt from the dataset GeoJSON file shows a representativefeature entry.

{"type":"Feature","properties":{"jurisdiction":"DPR","mapped":"False","zipcode":"11356","acres":"0.05","location":"College Pl., College Pt. Blvd., bet. 11 Ave. and 12 Ave.","nys_assembly":"27","councildistrict":"19","url":"http://www.nycgovparks.org/parks/Q042/","typecategory":"Triangle/Plaza","us_congress":"14","eapply":"Poppenhusen Park","parentid":"Q-07","gispropnum":"Q042","retired":"false","communityboard":"407","objectid":"6248","globalid":"F4810079-CBB9-4BE7-BBFA-B3C0C35D5DE5","name311":"Poppenhusen Park","department":"Q-07","pip_ratable":"true","subcategory":"Sitting Area/Triangle/Mall","precinct":"109","permit":"true","acquisitiondate":null,"omppropid":"Q042","gisobjid":"100000301","signname":"Poppenhusen Park","address":null,"permitparent":"Q-07","class":"PARK","nys_senate":"11","permitdistrict":"Q-07","borough":"Q","waterfront":"false"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-73.84575702371716,40.78796240884273],[-73.84593393292693,40.78796857347548],[-73.84577256469657,40.787651355629556],[-73.84575702371716,40.78796240884273]]]]}},

Style polygon data features

The code in this example applies special coloring to data features associatedwith atypecategory of "Undeveloped" or "Parkway", and colors all otherfeatures green.

TypeScript

functionsetStyle(/* FeatureStyleFunctionOptions */params){constdatasetFeature=params.feature;// 'typecategory' is an attribute in this Dataset.consttypeCategory=datasetFeature.datasetAttributes['typecategory'];switch(typeCategory){case'Undeveloped':// Color undeveloped areas blue.return/* FeatureStyleOptions */{strokeColor:'blue',strokeWeight:2,strokeOpacity:1,fillColor:'blue',fillOpacity:0.3,};break;case'Parkway':// Color historical house sites red.return/* FeatureStyleOptions */{strokeColor:'red',strokeWeight:2,strokeOpacity:1,fillColor:'red',fillOpacity:0.5,};break;default:// Color other type categories green.return/* FeatureStyleOptions */{strokeColor:'green',strokeWeight:2,strokeOpacity:1,fillColor:'green',fillOpacity:0.3,};break;}}
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

functionsetStyle(/* FeatureStyleFunctionOptions */params){constdatasetFeature=params.feature;// 'typecategory' is an attribute in this Dataset.consttypeCategory=datasetFeature.datasetAttributes["typecategory"];switch(typeCategory){case"Undeveloped":// Color undeveloped areas blue.return/* FeatureStyleOptions */{strokeColor:"blue",strokeWeight:2,strokeOpacity:1,fillColor:"blue",fillOpacity:0.3,};break;case"Parkway":// Color historical house sites red.return/* FeatureStyleOptions */{strokeColor:"red",strokeWeight:2,strokeOpacity:1,fillColor:"red",fillOpacity:0.5,};break;default:// Color other type categories green.return/* FeatureStyleOptions */{strokeColor:"green",strokeWeight:2,strokeOpacity:1,fillColor:"green",fillOpacity:0.3,};break;}}

Complete example code

See the complete example source code

TypeScript

letmap;functionsetStyle(/* FeatureStyleFunctionOptions */params){constdatasetFeature=params.feature;// 'typecategory' is an attribute in this Dataset.consttypeCategory=datasetFeature.datasetAttributes['typecategory'];switch(typeCategory){case'Undeveloped':// Color undeveloped areas blue.return/* FeatureStyleOptions */{strokeColor:'blue',strokeWeight:2,strokeOpacity:1,fillColor:'blue',fillOpacity:0.3,};break;case'Parkway':// Color historical house sites red.return/* FeatureStyleOptions */{strokeColor:'red',strokeWeight:2,strokeOpacity:1,fillColor:'red',fillOpacity:0.5,};break;default:// Color other type categories green.return/* FeatureStyleOptions */{strokeColor:'green',strokeWeight:2,strokeOpacity:1,fillColor:'green',fillOpacity:0.3,};break;}}asyncfunctioninitMap(){// Request needed libraries.const{Map}=awaitgoogle.maps.importLibrary("maps")asgoogle.maps.MapsLibrary;constposition={lat:40.580732,lng:-74.152826};constmap=newMap(document.getElementById('map')asHTMLElement,{zoom:14,center:position,mapId:'b98e588c46685dd7',mapTypeControl:false,});// Dataset ID for NYC park data.constdatasetId='6fe13aa9-b900-45e7-b636-3236672c3f4f';//@ts-ignoreconstdatasetLayer=map.getDatasetFeatureLayer(datasetId);datasetLayer.style=setStyle;// Create an attribution DIV and add the attribution to the map.constattributionDiv=document.createElement('div');constattributionControl=createAttribution(map);attributionDiv.appendChild(attributionControl);map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);}functioncreateAttribution(map){constattributionLabel=document.createElement('div');// Define CSS styles.attributionLabel.style.backgroundColor='#fff';attributionLabel.style.opacity='0.7';attributionLabel.style.fontFamily='Roboto,Arial,sans-serif';attributionLabel.style.fontSize='10px';attributionLabel.style.padding='2px';attributionLabel.style.margin='2px';attributionLabel.textContent='Data source: NYC Open Data';returnattributionLabel;}initMap();
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

letmap;functionsetStyle(/* FeatureStyleFunctionOptions */params){constdatasetFeature=params.feature;// 'typecategory' is an attribute in this Dataset.consttypeCategory=datasetFeature.datasetAttributes["typecategory"];switch(typeCategory){case"Undeveloped":// Color undeveloped areas blue.return/* FeatureStyleOptions */{strokeColor:"blue",strokeWeight:2,strokeOpacity:1,fillColor:"blue",fillOpacity:0.3,};break;case"Parkway":// Color historical house sites red.return/* FeatureStyleOptions */{strokeColor:"red",strokeWeight:2,strokeOpacity:1,fillColor:"red",fillOpacity:0.5,};break;default:// Color other type categories green.return/* FeatureStyleOptions */{strokeColor:"green",strokeWeight:2,strokeOpacity:1,fillColor:"green",fillOpacity:0.3,};break;}}asyncfunctioninitMap(){// Request needed libraries.const{Map}=awaitgoogle.maps.importLibrary("maps");constposition={lat:40.580732,lng:-74.152826};constmap=newMap(document.getElementById("map"),{zoom:14,center:position,mapId:"b98e588c46685dd7",mapTypeControl:false,});// Dataset ID for NYC park data.constdatasetId="6fe13aa9-b900-45e7-b636-3236672c3f4f";//@ts-ignoreconstdatasetLayer=map.getDatasetFeatureLayer(datasetId);datasetLayer.style=setStyle;// Create an attribution DIV and add the attribution to the map.constattributionDiv=document.createElement("div");constattributionControl=createAttribution(map);attributionDiv.appendChild(attributionControl);map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);}functioncreateAttribution(map){constattributionLabel=document.createElement("div");// Define CSS styles.attributionLabel.style.backgroundColor="#fff";attributionLabel.style.opacity="0.7";attributionLabel.style.fontFamily="Roboto,Arial,sans-serif";attributionLabel.style.fontSize="10px";attributionLabel.style.padding="2px";attributionLabel.style.margin="2px";attributionLabel.textContent="Data source: NYC Open Data";returnattributionLabel;}initMap();
Note: The JavaScript is compiled from the TypeScript snippet.

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>Style a polygon data feature with more detail</title>    <link rel="stylesheet" type="text/css" href="./style.css" />    <script type="module" src="./index.js"></script>  </head>  <body>    <div></div>    <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>  </body></html>

Try Sample

Polyline data styling example

This example shows an approach to styling polyline geometry based data features.

About the dataset

The dataset used in this example showsbridges in the Seattle area.The following excerpt from the dataset GeoJSON file shows a representativefeature entry.

{"type":"Feature","properties":{"OBJECTID":1,"COMPTYPE":66,"COMPKEY":515774,"HANSEGKEY":489781,"UNITID":"BRG-935","UNITTYPE":" ","BRGUNITID":"BRG-935","UNITDESC_BRG":"YALE AVE BR REV LANE OC                                                                                                                                                                                                                                        ","UNITDESC_SEG":"HOWELL ST ON RP BETWEEN HOWELL ST AND I5 SB                                                                                                                                                                                                                    ","INSTDATE":null,"EXPDATE":null,"STATUS":" ","STATUSDT":null,"CONDITION":" ","CONDDT":null,"OWN":" ","LSTVERIFY":null,"MAINTBY":" ","ADDBY":"GARCIAA","ADDDTTM":"2010-01-21T00:00:00Z","MODBY":null,"MODDTTM":null,"BR_NBR":935,"BR_CODE":" 935","BR_TYPE":"ST","BR_NAME":"YALE AVE BR REV LANE OC","BR_FACILITIES":"YALE AVE-SR 5 ON RAMP","BR_FEATURES":"SR 5 REV LANE","BR_RATING":0,"BR_INSET":1,"BR_GEO":"DT","BR_OWNER":"DOT","BR_OWNER_NAME":"State of Washington","GEOBASID":0,"XGEOBASID":0,"GISSEGKEY":489781,"EARTHQUAKE_RESPONSE_TEAM":" ","SHAPE_Length":220.11891836147655},"geometry":{"type":"LineString","coordinates":[[-122.329201929090928,47.616910448708538],[-122.329206483407461,47.616976719821004],[-122.32921802149356,47.617042137515213],[-122.329236413912909,47.617105967923777],[-122.329261454336034,47.617167494985758],[-122.329292861855023,47.617226028479571],[-122.329330284134699,47.617280911766009],[-122.329373301365223,47.617331529154569],[-122.329421430971635,47.617377312810319],[-122.329474133027375,47.617417749124023],[-122.32953081631139,47.617452384473893]]}},

Style polyline data features

The following snippet applies the same style to directly to all data features.Since no logic is required, a feature style function is not used in this case.

TypeScript

// Apply style to all features.datasetLayer.style={strokeColor:'green',strokeWeight:4,};
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

// Apply style to all features.datasetLayer.style={strokeColor:"green",strokeWeight:4};

See the complete example source code

TypeScript

letmap;asyncfunctioninitMap(){// Request needed libraries.const{Map}=awaitgoogle.maps.importLibrary("maps")asgoogle.maps.MapsLibrary;constposition={lat:47.59,lng:-122.31};constmap=newMap(document.getElementById('map')asHTMLElement,{zoom:14,center:position,mapId:'b98e588c46685dd7',mapTypeControl:false,});// Dataset ID for Seattle BridgesconstdatasetId='3d0bd5fb-3f42-47fe-b50f-81c0932cd533';//@ts-ignoreconstdatasetLayer=map.getDatasetFeatureLayer(datasetId);// Apply style to all features.datasetLayer.style={strokeColor:'green',strokeWeight:4,};// Create an attribution DIV and add the attribution to the map.constattributionDiv=document.createElement('div');constattributionControl=createAttribution(map);attributionDiv.appendChild(attributionControl);map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);}// Create a custom control to hold attribution text.functioncreateAttribution(map){constattributionLabel=document.createElement('div');// Define CSS styles.attributionLabel.style.backgroundColor='#fff';attributionLabel.style.opacity='0.7';attributionLabel.style.fontFamily='Roboto,Arial,sans-serif';attributionLabel.style.fontSize='10px';attributionLabel.style.padding='2px';attributionLabel.style.margin='2px';attributionLabel.textContent='Data source: Seattle GeoData';returnattributionLabel;}initMap();
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

letmap;asyncfunctioninitMap(){// Request needed libraries.const{Map}=awaitgoogle.maps.importLibrary("maps");constposition={lat:47.59,lng:-122.31};constmap=newMap(document.getElementById("map"),{zoom:14,center:position,mapId:"b98e588c46685dd7",mapTypeControl:false,});// Dataset ID for Seattle BridgesconstdatasetId="3d0bd5fb-3f42-47fe-b50f-81c0932cd533";//@ts-ignoreconstdatasetLayer=map.getDatasetFeatureLayer(datasetId);// Apply style to all features.datasetLayer.style={strokeColor:"green",strokeWeight:4};// Create an attribution DIV and add the attribution to the map.constattributionDiv=document.createElement("div");constattributionControl=createAttribution(map);attributionDiv.appendChild(attributionControl);map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);}// Create a custom control to hold attribution text.functioncreateAttribution(map){constattributionLabel=document.createElement("div");// Define CSS styles.attributionLabel.style.backgroundColor="#fff";attributionLabel.style.opacity="0.7";attributionLabel.style.fontFamily="Roboto,Arial,sans-serif";attributionLabel.style.fontSize="10px";attributionLabel.style.padding="2px";attributionLabel.style.margin="2px";attributionLabel.textContent="Data source: Seattle GeoData";returnattributionLabel;}initMap();
Note: The JavaScript is compiled from the TypeScript snippet.

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>Style a polyline data feature</title>    <link rel="stylesheet" type="text/css" href="./style.css" />    <script type="module" src="./index.js"></script>  </head>  <body>    <div></div>    <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>  </body></html>

Try Sample

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-12-11 UTC.