Setting different fill colors for geoJSON objects in Google Maps API
14,227
If you look at the example in the Google Documentation and the documentation itself, the setStyle function allows the colors of the polygons to be changed dynamically or based on their properties:
setStyle(style:Data.StylingFunction|Data.StyleOptions) Return Value: None
Sets the style for all features in the collection. Styles specified on a per-feature basis via overrideStyle() continue to apply. Pass either an object with the desired style options, or a function that computes the style for each feature. The function will be called every time a feature's properties are updated.
Something like this will set the object(s) with the "SD_NAME" property equal to "Gee" to be filled with green, everything else will be filled with gray:
map.data.setStyle(function(feature) {
var SD_NAME = feature.getProperty('SD_NAME');
var color = "gray";
if (SD_NAME == "Gee") {
color = "green";
}
return {
fillColor: color,
strokeWeight: 1
}
});
code snippet:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -28,
lng: 137
}
});
// Load GeoJSON.
// map.data.loadGeoJson(
// 'https://storage.googleapis.com/mapsdevsite/json/google.json');
map.data.addGeoJson(geoJsonData);
map.data.setStyle(function(feature) {
var SD_NAME = feature.getProperty('SD_NAME');
var color = "gray";
if (SD_NAME == "Gee") {
color = "green";
}
return {
fillColor: color,
strokeWeight: 1
}
});
}
var geoJsonData = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71",
"SD_NAME": "Gee"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[123.61, -22.14],
[122.38, -21.73],
[121.06, -21.69],
[119.66, -22.22],
[119.00, -23.40],
[118.65, -24.76],
[118.43, -26.07],
[118.78, -27.56],
[119.22, -28.57],
[120.23, -29.49],
[121.77, -29.87],
[123.57, -29.64],
[124.45, -29.03],
[124.71, -27.95],
[124.80, -26.70],
[124.80, -25.60],
[123.61, -25.64],
[122.56, -25.64],
[121.72, -25.72],
[121.81, -26.62],
[121.86, -26.98],
[122.60, -26.90],
[123.57, -27.05],
[123.57, -27.68],
[123.35, -28.18],
[122.51, -28.38],
[121.77, -28.26],
[121.02, -27.91],
[120.49, -27.21],
[120.14, -26.50],
[120.10, -25.64],
[120.27, -24.52],
[120.67, -23.68],
[121.72, -23.32],
[122.43, -23.48],
[123.04, -24.04],
[124.54, -24.28],
[124.58, -23.20],
[123.61, -22.14]
]
]
}
}, {
"type": "Feature",
"properties": {
"letter": "o",
"color": "red",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[128.84, -25.76],
[128.18, -25.60],
[127.96, -25.52],
[127.88, -25.52],
[127.70, -25.60],
[127.26, -25.79],
[126.60, -26.11],
[126.16, -26.78],
[126.12, -27.68],
[126.21, -28.42],
[126.69, -29.49],
[127.74, -29.80],
[128.80, -29.72],
[129.41, -29.03],
[129.72, -27.95],
[129.68, -27.21],
[129.33, -26.23],
[128.84, -25.76]
],
[
[128.45, -27.44],
[128.32, -26.94],
[127.70, -26.82],
[127.35, -27.05],
[127.17, -27.80],
[127.57, -28.22],
[128.10, -28.42],
[128.49, -27.80],
[128.45, -27.44]
]
]
}
}, {
"type": "Feature",
"properties": {
"letter": "o",
"color": "yellow",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[131.87, -25.76],
[131.35, -26.07],
[130.95, -26.78],
[130.82, -27.64],
[130.86, -28.53],
[131.26, -29.22],
[131.92, -29.76],
[132.45, -29.87],
[133.06, -29.76],
[133.72, -29.34],
[134.07, -28.80],
[134.20, -27.91],
[134.07, -27.21],
[133.81, -26.31],
[133.37, -25.83],
[132.71, -25.64],
[131.87, -25.76]
],
[
[133.15, -27.17],
[132.71, -26.86],
[132.09, -26.90],
[131.74, -27.56],
[131.79, -28.26],
[132.36, -28.45],
[132.93, -28.34],
[133.15, -27.76],
[133.15, -27.17]
]
]
}
}, {
"type": "Feature",
"properties": {
"letter": "g",
"color": "blue",
"rank": "7",
"ascii": "103",
"SD_NAME": "Gee"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[138.12, -25.04],
[136.84, -25.16],
[135.96, -25.36],
[135.26, -25.99],
[135, -26.90],
[135.04, -27.91],
[135.26, -28.88],
[136.05, -29.45],
[137.02, -29.49],
[137.81, -29.49],
[137.94, -29.99],
[137.90, -31.20],
[137.85, -32.24],
[136.88, -32.69],
[136.45, -32.36],
[136.27, -31.80],
[134.95, -31.84],
[135.17, -32.99],
[135.52, -33.43],
[136.14, -33.76],
[137.06, -33.83],
[138.12, -33.65],
[138.86, -33.21],
[139.30, -32.28],
[139.30, -31.24],
[139.30, -30.14],
[139.21, -28.96],
[139.17, -28.22],
[139.08, -27.41],
[139.08, -26.47],
[138.99, -25.40],
[138.73, -25.00],
[138.12, -25.04]
],
[
[137.50, -26.54],
[136.97, -26.47],
[136.49, -26.58],
[136.31, -27.13],
[136.31, -27.72],
[136.58, -27.99],
[137.50, -28.03],
[137.68, -27.68],
[137.59, -26.78],
[137.50, -26.54]
]
]
}
}, {
"type": "Feature",
"properties": {
"letter": "l",
"color": "green",
"rank": "12",
"ascii": "108"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[140.14, -21.04],
[140.31, -29.42],
[141.67, -29.49],
[141.59, -20.92],
[140.14, -21.04]
]
]
}
}, {
"type": "Feature",
"properties": {
"letter": "e",
"color": "red",
"rank": "5",
"ascii": "101"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[144.14, -27.41],
[145.67, -27.52],
[146.86, -27.09],
[146.82, -25.64],
[146.25, -25.04],
[145.45, -24.68],
[144.66, -24.60],
[144.09, -24.76],
[143.43, -25.08],
[142.99, -25.40],
[142.64, -26.03],
[142.64, -27.05],
[142.64, -28.26],
[143.30, -29.11],
[144.18, -29.57],
[145.41, -29.64],
[146.46, -29.19],
[146.64, -28.72],
[146.82, -28.14],
[144.84, -28.42],
[144.31, -28.26],
[144.14, -27.41]
],
[
[144.18, -26.39],
[144.53, -26.58],
[145.19, -26.62],
[145.72, -26.35],
[145.81, -25.91],
[145.41, -25.68],
[144.97, -25.68],
[144.49, -25.64],
[144, -25.99],
[144.18, -26.39]
]
]
}
}]
};html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
Author by
OK_Sooner
Updated on June 11, 2022Comments
-
OK_Sooner almost 2 years
I created a map that has a data layer of geoJSON polygons on it. I have successfully set the fill color using maps.data.SetStyle. Now I want to create a different style for a certain set of polygons that I can identify through unique identifiers.
The Google maps documentation uses .getProperty() but when I loop through the json object that created the data layer I am thrown ane error.
Function is below:
map.data.setStyle(function(jsonData){ for(var i = 0; i <= 516; i++){ var SD_NAME =jsonData.features[i].getProperty('properties.SD_NAME'); return{ fillColor: 'green', strokeWeight: 1 } } });Error Message: Uncaught TypeError: Cannot read property '0' of undefined