Style data feature examples

  • This guide explains how to programmatically style data features in a dataset visualized on a map using the Maps SDK for Android, iOS, or JavaScript.

  • It covers styling examples for point, polygon, and polyline geometries, based on attributes within their respective datasets.

  • Datasets render features using latitude and longitude coordinates from a geospatial data file, supporting CSV (with WKT format for geometries) and GeoJSON.

  • Code examples demonstrate styling points based on categorical attributes (e.g., squirrel fur color), polygons based on specific feature types (e.g., park type), and applying a uniform style to polylines.

Select platform:AndroidiOSJavaScript

This page shows how to programmatically access a dataset and style its features,and walks through styling examples for data features based on point, polygon,and polyline geometries.

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

Point data styling example

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

Apply styling to features representing squirrel colors.

About the dataset

The dataset used in this example is the result of a2018 survey of squirrelsin 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 because datasets only support theWKT formatif the column is namedWKT. For more information about the supported formatsfor location, seeCSV requirements.

The squirrel 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 approach of styling the fill color andstroke color for each point based on theCombinationofPrimaryandHighlightColorattribute, which combines the primary and secondary fur colors for eachsquirrel.

Swift

letmapView=GMSMapView(frame:.zero,mapID:GMSMapID(identifier:"YOUR_MAP_ID"),camera:GMSCameraPosition(latitude:40.7,longitude:-74.0,zoom:12))letlayer=mapView.datasetFeatureLayer(of:"YOUR_DATASET_ID")// Define a point style with fill and radius.// Apply the style to the datasets features.layer.style={featureinswitch(feature.datasetAttributes["CombinationofPrimaryandHighlightColor"]){case"Black+":letstyle=MutableFeatureStyle()style.fillColor=.black;style.pointRadius=8;returnstylecase"Cinnamon+":letstyle=MutableFeatureStyle()style.fillColor=UIColor(red:139/255,green:0,blue:0,alpha:1);style.pointRadius=8;returnstyle...default:letstyle=MutableFeatureStyle()style.fillColor=.yellow;style.pointRadius=8;returnstyle}}

Objective-C

GMSMapView*mapView=[GMSMapViewmapWithFrame:CGRectZeromapID:[GMSMapIDmapIDWithIdentifier:@"MAP_ID"]camera:[GMSCameraPositioncameraWithLatitude:40.7longitude:-74.0zoom:12]];GMSDatasetFeatureLayer*layer=[mapViewdatasetFeatureLayerOfDatasetID:@"YOUR_DATASET_ID"];// Define a point style with fill and radius.// Apply the style to the datasets features.layer.style=^(GMSDatasetFeature*feature){NSString*attrib=feature.datasetAttributes[@"CombinationofPrimaryandHighlightColor"];if([attribisEqualToString:@"Black+"]){GMSMutableFeatureStyle*style=[GMSMutableFeatureStylestyle];style.fillColor=[UIColorblackColor];style.pointRadius=8;returnstyle;}elseif([attribisEqualToString:@"Cinnamon+"]){GMSMutableFeatureStyle*style=[GMSMutableFeatureStylestyle];style.fillColor=[UIColorcolorWithRed:139.0f/255.0fgreen:0.0fblue:0.0falpha:1.0f];style.pointRadius=8;returnstyle;}...else{GMSMutableFeatureStyle*style=[GMSMutableFeatureStylestyle];style.fillColor=[UIColoryellowColor];style.pointRadius=8;returnstyle;}};

Polygon data styling example

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

Apply styling to features representing park types.

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.

Swift

letmapView=GMSMapView(frame:.zero,mapID:GMSMapID(identifier:"YOUR_MAP_ID"),camera:GMSCameraPosition(latitude:40.7,longitude:-74.0,zoom:12))letlayer=mapView.datasetFeatureLayer(of:"YOUR_DATASET_ID")// Define a polygon style with fill and stroke.// Apply the style to the datasets features.layer.style={featureinswitch(feature.datasetAttributes["typecategory"]){case"Undeveloped":letstyle=MutableFeatureStyle()style.fillColor=.blue.withAlphaComponent(0.3);style.strokeColor=.blue;style.strokeWidth=2.0;returnstylecase"Parkway":letstyle=MutableFeatureStyle()style.fillColor=.red.withAlphaComponent(0.3);style.strokeColor=.red;style.strokeWidth=2.0;returnstyledefault:letstyle=MutableFeatureStyle()style.fillColor=.green.withAlphaComponent(0.3);style.strokeColor=.green;style.strokeWidth=2.0;returnstyle}}

Objective-C

GMSMapView*mapView=[GMSMapViewmapWithFrame:CGRectZeromapID:[GMSMapIDmapIDWithIdentifier:@"MAP_ID"]camera:[GMSCameraPositioncameraWithLatitude:40.7longitude:-74.0zoom:12]];GMSDatasetFeatureLayer*layer=[mapViewdatasetFeatureLayerOfDatasetID:@"YOUR_DATASET_ID"];// Define a polygon style with fill and stroke.// Apply the style to the datasets features.layer.style=^(GMSDatasetFeature*feature){NSString*attrib=feature.datasetAttributes[@"typecategory"];if([attribisEqualToString:@"Undeveloped"]){GMSMutableFeatureStyle*style=[GMSMutableFeatureStylestyle];style.fillColor=[[UIColorblueColor]colorWithAlphaComponent:0.3];style.strokeColor=[UIColorblueColor];style.strokeWidth=2.0;returnstyle;}elseif([attribisEqualToString:@"Parkway"]){GMSMutableFeatureStyle*style=[GMSMutableFeatureStylestyle];style.fillColor=[[UIColorredColor]colorWithAlphaComponent:0.3];style.strokeColor=[UIColorredColor];style.strokeWidth=2.0;returnstyle;}else{GMSMutableFeatureStyle*style=[GMSMutableFeatureStylestyle];style.fillColor=[[UIColorgreenColor]colorWithAlphaComponent:0.3];style.strokeColor=[UIColorgreenColor];style.strokeWidth=2.0;returnstyle;}};

Polyline data styling example

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

Apply styling to features that represent polylines.

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.

Swift

// Define a style with green fill and stroke.// Apply the style to the datasets features.layer.style={featureinletstyle=MutableFeatureStyle()style.fillColor=.green.withAlphaComponent(0.5);style.strokeColor=[UIColorgreenColor];style.strokeWidth=2.0;returnstyle}

Objective-C

// Define a style with green fill and stroke.// Apply the style to the datasets features.layer.style=^(GMSDatasetFeature*feature){GMSMutableFeatureStyle*style=[GMSMutableFeatureStylestyle];style.fillColor=[[UIColorgreenColor]colorWithAlphaComponent:0.5];style.strokeColor=[UIColorgreenColor];style.strokeWidth=2.0;returnstyle;};

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-11-21 UTC.