How to specify a unique color for each polygon using Google maps?How to disable mouse scroll wheel scaling with Google Maps APIGoogle Maps JS API v3 - Simple Multiple Marker ExampleProgrammatically Lighten or Darken a hex color (or rgb, and blend colors)Google map: Add click listener to each polygonHow do I update each dependency in package.json to the latest version?Polygon colors overlap when zoom in the google mapGoogle Maps Changes the color of a KMLMultiple Polygons with Multiple Colors on one Google MapHow to get current fillColor of google maps polygon?Google maps JavaScript data_layer multiple styles
Why does there seem to be an extreme lack of public trashcans in Taiwan?
Realistic, logical way for men with medieval-era weaponry to compete with much larger and physically stronger foes
Why do the TIE Fighter pilot helmets have similar ridges as the rebels?
Does a single fopen introduce TOCTOU vulnerability?
C++ logging library
What exactly "triggers an additional time" in the interaction between Afterlife and Teysa Karlov?
How can powerful telekinesis avoid violating Newton's 3rd Law?
What's the best way to quit a job mostly because of money?
In Pandemic, why take the extra step of eradicating a disease after you've cured it?
Find all letter Combinations of a Phone Number
Why is my power MOSFET heating up when on?
Why did the World Bank set the global poverty line at $1.90?
What is the proper event in Extended Events to track stored procedure executions?
Why are Payments from Apple to New Zealand and Australian bank accounts wire transfers?
What to bootstrap for hypothesis testing
Why is long-term living in Almost-Earth causing severe health problems?
Should I list a completely different profession in my technical resume?
Why would a home insurer offer a discount based on credit score?
If the pressure inside and outside a balloon balance, then why does air leave when it pops?
Is it safe to dpkg --set-selections on a newer version of a distro?
Was planting UN flag on Moon ever discussed?
Course development: can I pay someone to make slides for the course?
What does "lit." mean in boiling point or melting point specification?
What does the homotopy coherent nerve do to spaces of enriched functors?
How to specify a unique color for each polygon using Google maps?
How to disable mouse scroll wheel scaling with Google Maps APIGoogle Maps JS API v3 - Simple Multiple Marker ExampleProgrammatically Lighten or Darken a hex color (or rgb, and blend colors)Google map: Add click listener to each polygonHow do I update each dependency in package.json to the latest version?Polygon colors overlap when zoom in the google mapGoogle Maps Changes the color of a KMLMultiple Polygons with Multiple Colors on one Google MapHow to get current fillColor of google maps polygon?Google maps JavaScript data_layer multiple styles
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
I need to specify a different color for each polygon using Google maps, this is my code so far:
var colors = ['#3366CC','#DC3912','#FF9900','#109618','#990099','#3B3EAC','#0099C6','#DD4477','#66AA00','#B82E2E','#316395','#994499','#22AA99','#AAAA11','#6633CC','#E67300','#8B0707','#329262','#5574A6','#3B3EAC']
for (i=0;i<response.length;i++)
x=wellknown.parse(response[i].geom);
map.data.addGeoJson(x);
map.data.setStyle(
fillColor: colors[i],
strokeWeight: 1
)
But it doesn't work as I expect it to, it's overwriting the style of all the polygons with the style of the last one, how can I do this please?
codepen for the problem
javascript google-maps
edited Mar 25 at 15:26
geocodezip
130k10152183
asked Mar 24 at 22:54
The-OnlyThe-Only
65
add a comment |
0
I need to specify a different color for each polygon using Google maps, this is my code so far:
var colors = ['#3366CC','#DC3912','#FF9900','#109618','#990099','#3B3EAC','#0099C6','#DD4477','#66AA00','#B82E2E','#316395','#994499','#22AA99','#AAAA11','#6633CC','#E67300','#8B0707','#329262','#5574A6','#3B3EAC']
for (i=0;i<response.length;i++)
x=wellknown.parse(response[i].geom);
map.data.addGeoJson(x);
map.data.setStyle(
fillColor: colors[i],
strokeWeight: 1
)
But it doesn't work as I expect it to, it's overwriting the style of all the polygons with the style of the last one, how can I do this please?
codepen for the problem
javascript google-maps
edited Mar 25 at 15:26
geocodezip
130k10152183
asked Mar 24 at 22:54
The-OnlyThe-Only
65
add a comment |
0
0
0
I need to specify a different color for each polygon using Google maps, this is my code so far:
var colors = ['#3366CC','#DC3912','#FF9900','#109618','#990099','#3B3EAC','#0099C6','#DD4477','#66AA00','#B82E2E','#316395','#994499','#22AA99','#AAAA11','#6633CC','#E67300','#8B0707','#329262','#5574A6','#3B3EAC']
for (i=0;i<response.length;i++)
x=wellknown.parse(response[i].geom);
map.data.addGeoJson(x);
map.data.setStyle(
fillColor: colors[i],
strokeWeight: 1
)
But it doesn't work as I expect it to, it's overwriting the style of all the polygons with the style of the last one, how can I do this please?
codepen for the problem
javascript google-maps
edited Mar 25 at 15:26
geocodezip
130k10152183
asked Mar 24 at 22:54
The-OnlyThe-Only
65
I need to specify a different color for each polygon using Google maps, this is my code so far:
var colors = ['#3366CC','#DC3912','#FF9900','#109618','#990099','#3B3EAC','#0099C6','#DD4477','#66AA00','#B82E2E','#316395','#994499','#22AA99','#AAAA11','#6633CC','#E67300','#8B0707','#329262','#5574A6','#3B3EAC']
for (i=0;i<response.length;i++)
x=wellknown.parse(response[i].geom);
map.data.addGeoJson(x);
map.data.setStyle(
fillColor: colors[i],
strokeWeight: 1
)
But it doesn't work as I expect it to, it's overwriting the style of all the polygons with the style of the last one, how can I do this please?
codepen for the problem
javascript google-maps
javascript google-maps
edited Mar 25 at 15:26
geocodezip
130k10152183
asked Mar 24 at 22:54
The-OnlyThe-Only
65
edited Mar 25 at 15:26
geocodezip
130k10152183
asked Mar 24 at 22:54
The-OnlyThe-Only
65
edited Mar 25 at 15:26
geocodezip
130k10152183
edited Mar 25 at 15:26
geocodezip
130k10152183
edited Mar 25 at 15:26
geocodezip
130k10152183
130k10152183
asked Mar 24 at 22:54
The-OnlyThe-Only
65
asked Mar 24 at 22:54
The-OnlyThe-Only
65
asked Mar 24 at 22:54
The-OnlyThe-Only
65
65
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Use a style function to set the color based on a property of the polygon.
var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];
google.maps.event.addDomListener(window, 'load', init);
function init()
var mapElement = document.getElementById('map');
var pos =
lat: 34.963442,
lng: -4.132102
;
var map = new google.maps.Map(mapElement,
zoom: 7,
center: pos
);
for (i = 0; i < response.length; i++)
response[i].features[0].properties =
polyNum: i
map.data.addGeoJson(response[i]);
map.data.setStyle(function(feat)
return
fillColor: colors[feat.getProperty("polyNum")],
strokeWeight: 1
)
proof of concept fiddle
code snippet:
response = [
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-5.728815299999951, 35.700733600000035],
[-5.72649569999993, 35.695227000000045],
[-5.72263339999995, 35.687280100000066],
//snip
[-6.029523099999949, 35.47567980000008],
// snip
[-5.931709999999953, 35.78152110000008],
[-5.732892299999946, 35.69954860000007],
[-5.728815299999951, 35.700733600000035]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.365168599999947, 35.15238920000007],
[-4.365278599999954, 35.15236920000007],
[-4.365262499999972, 35.15244370000005],
[-4.36521149999993, 35.15243510000005],
[-4.365168599999947, 35.15238920000007]
]
],
[
[
[-4.3649855999999545, 35.15214580000003],
[-4.3650431999999455, 35.15209070000003],
[-4.365078099999948, 35.15210710000008],
[-4.36509419999993, 35.152131300000065],
[-4.365201499999955, 35.15215320000004],
[-4.365079499999979, 35.15220030000006],
[-4.365028499999937, 35.15219160000004],
[-4.3649855999999545, 35.15214580000003]
]
],
[
[
[-4.366129499999943, 35.15200100000004],
[-4.366239499999949, 35.151981000000035],
[-4.366223399999967, 35.152055500000074],
[-4.366172399999925, 35.15204680000005],
[-4.366129499999943, 35.15200100000004]
]
],
[
[
[-4.366694199999927, 35.15164400000003],
[-4.366804199999933, 35.15162400000003],
[-4.366788099999951, 35.151698500000066],
[-4.366691499999945, 35.151729300000056],
[-4.366694199999927, 35.15164400000003]
]
],
[
[
[-4.365267299999971, 35.15227530000004],
[-4.365322899999967, 35.15226450000006],
[-4.365361199999938, 35.15222490000008],
[-4.3654469999999606, 35.15222710000006],
[-4.365455599999962, 35.15232430000003],
[-4.365443999999968, 35.15235420000005],
[-4.36534219999993, 35.15234540000006],
[-4.365279299999941, 35.15230290000005],
[-4.365267299999971, 35.15227530000004]
]
],
[
[
[-4.365066099999979, 35.15270730000003],
[-4.365264599999932, 35.15273810000008],
[-4.365387999999939, 35.15288280000004],
[-4.365108999999961, 35.15280380000007],
[-4.365066099999979, 35.15270730000003]
]
],
[
[
[-4.359619499999951, 35.15125780000005],
[-4.360025599999972, 35.150890900000036],
[-4.3600845999999365, 35.15091280000007],
[-4.360181199999943, 35.15144350000003],
[-4.360692999999969, 35.15219440000004],
[-4.360843199999977, 35.152966400000025],
[-4.360895299999925, 35.15297430000004],
[-4.360920799999974, 35.15298910000007],
[-4.360934199999974, 35.15302090000006],
[-4.36091209999995, 35.15304660000004],
[-4.360845599999948, 35.153045500000076],
[-4.360853099999929, 35.15329660000003],
[-4.360564799999963, 35.15332730000006],
[-4.360570099999961, 35.153376700000024],
[-4.360697499999958, 35.15346880000004],
[-4.360800599999948, 35.15360270000008],
[-4.360794099999964, 35.15370010000004],
[-4.360508399999958, 35.15367270000007],
[-4.3601350999999795, 35.15384360000007],
[-4.359662999999955, 35.153975100000025],
[-4.359695199999976, 35.15366810000006],
[-4.359566499999971, 35.153519000000074],
[-4.359523599999932, 35.15299270000003],
[-4.359328099999971, 35.15254580000004],
[-4.359118999999964, 35.152525800000035],
[-4.359000999999978, 35.15250170000007],
[-4.358944699999938, 35.152337200000034],
[-4.358864199999971, 35.15219460000003],
[-4.358966199999941, 35.15194900000006],
[-4.359072999999967, 35.15193130000006],
[-4.359619499999951, 35.15125780000005]
]
],
[
[
[-3.8118572999999287, 35.129859700000054],
[-3.8139699999999266, 35.11749000000003],
// snip
[-3.8255157999999483, 34.90404140000004],
// snip
[-4.376043299999935, 35.15328130000006],
[-3.8103843999999754, 35.135774000000026],
[-3.811559999999929, 35.13160000000005],
[-3.8118572999999287, 35.129859700000054]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.470361499999967, 35.079306700000075],
[-4.476197999999954, 35.05781030000003],
// snip
[-5.207069099999956, 34.88052770000007],
// snip
[-4.482892799999945, 35.11470000000003],
[-4.4942223999999555, 35.08295910000004],
[-4.470361499999967, 35.079306700000075]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-2.0528876999999284, 34.48349570000005],
[-2.0536608999999544, 34.48332490000007],
// snip
[-1.9856368999999745, 34.93244160000006],
// snip
[-1.9415678999999386, 34.86222920000006],
// snip
[-1.7713567999999782, 34.75961640000003],
// snip
[-2.05311839999996, 34.483884800000055],
[-2.0528876999999284, 34.48349570000005]
]
]
]
]
];
var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];
google.maps.event.addDomListener(window, 'load', init);
function init()
var mapElement = document.getElementById('map');
var pos =
lat: 34.963442,
lng: -4.132102
;
var map = new google.maps.Map(mapElement,
zoom: 7,
center: pos
);
for (i = 0; i < response.length; i++)
response[i].features[0].properties =
polyNum: i
map.data.addGeoJson(response[i]);
map.data.setStyle(function(feat)
return
fillColor: colors[feat.getProperty("polyNum")],
strokeWeight: 1
)
html,
body,
#map
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>answered Mar 25 at 6:26
geocodezipgeocodezip
130k10152183
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55329364%2fhow-to-specify-a-unique-color-for-each-polygon-using-google-maps%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Use a style function to set the color based on a property of the polygon.
var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];
google.maps.event.addDomListener(window, 'load', init);
function init()
var mapElement = document.getElementById('map');
var pos =
lat: 34.963442,
lng: -4.132102
;
var map = new google.maps.Map(mapElement,
zoom: 7,
center: pos
);
for (i = 0; i < response.length; i++)
response[i].features[0].properties =
polyNum: i
map.data.addGeoJson(response[i]);
map.data.setStyle(function(feat)
return
fillColor: colors[feat.getProperty("polyNum")],
strokeWeight: 1
)
proof of concept fiddle
code snippet:
response = [
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-5.728815299999951, 35.700733600000035],
[-5.72649569999993, 35.695227000000045],
[-5.72263339999995, 35.687280100000066],
//snip
[-6.029523099999949, 35.47567980000008],
// snip
[-5.931709999999953, 35.78152110000008],
[-5.732892299999946, 35.69954860000007],
[-5.728815299999951, 35.700733600000035]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.365168599999947, 35.15238920000007],
[-4.365278599999954, 35.15236920000007],
[-4.365262499999972, 35.15244370000005],
[-4.36521149999993, 35.15243510000005],
[-4.365168599999947, 35.15238920000007]
]
],
[
[
[-4.3649855999999545, 35.15214580000003],
[-4.3650431999999455, 35.15209070000003],
[-4.365078099999948, 35.15210710000008],
[-4.36509419999993, 35.152131300000065],
[-4.365201499999955, 35.15215320000004],
[-4.365079499999979, 35.15220030000006],
[-4.365028499999937, 35.15219160000004],
[-4.3649855999999545, 35.15214580000003]
]
],
[
[
[-4.366129499999943, 35.15200100000004],
[-4.366239499999949, 35.151981000000035],
[-4.366223399999967, 35.152055500000074],
[-4.366172399999925, 35.15204680000005],
[-4.366129499999943, 35.15200100000004]
]
],
[
[
[-4.366694199999927, 35.15164400000003],
[-4.366804199999933, 35.15162400000003],
[-4.366788099999951, 35.151698500000066],
[-4.366691499999945, 35.151729300000056],
[-4.366694199999927, 35.15164400000003]
]
],
[
[
[-4.365267299999971, 35.15227530000004],
[-4.365322899999967, 35.15226450000006],
[-4.365361199999938, 35.15222490000008],
[-4.3654469999999606, 35.15222710000006],
[-4.365455599999962, 35.15232430000003],
[-4.365443999999968, 35.15235420000005],
[-4.36534219999993, 35.15234540000006],
[-4.365279299999941, 35.15230290000005],
[-4.365267299999971, 35.15227530000004]
]
],
[
[
[-4.365066099999979, 35.15270730000003],
[-4.365264599999932, 35.15273810000008],
[-4.365387999999939, 35.15288280000004],
[-4.365108999999961, 35.15280380000007],
[-4.365066099999979, 35.15270730000003]
]
],
[
[
[-4.359619499999951, 35.15125780000005],
[-4.360025599999972, 35.150890900000036],
[-4.3600845999999365, 35.15091280000007],
[-4.360181199999943, 35.15144350000003],
[-4.360692999999969, 35.15219440000004],
[-4.360843199999977, 35.152966400000025],
[-4.360895299999925, 35.15297430000004],
[-4.360920799999974, 35.15298910000007],
[-4.360934199999974, 35.15302090000006],
[-4.36091209999995, 35.15304660000004],
[-4.360845599999948, 35.153045500000076],
[-4.360853099999929, 35.15329660000003],
[-4.360564799999963, 35.15332730000006],
[-4.360570099999961, 35.153376700000024],
[-4.360697499999958, 35.15346880000004],
[-4.360800599999948, 35.15360270000008],
[-4.360794099999964, 35.15370010000004],
[-4.360508399999958, 35.15367270000007],
[-4.3601350999999795, 35.15384360000007],
[-4.359662999999955, 35.153975100000025],
[-4.359695199999976, 35.15366810000006],
[-4.359566499999971, 35.153519000000074],
[-4.359523599999932, 35.15299270000003],
[-4.359328099999971, 35.15254580000004],
[-4.359118999999964, 35.152525800000035],
[-4.359000999999978, 35.15250170000007],
[-4.358944699999938, 35.152337200000034],
[-4.358864199999971, 35.15219460000003],
[-4.358966199999941, 35.15194900000006],
[-4.359072999999967, 35.15193130000006],
[-4.359619499999951, 35.15125780000005]
]
],
[
[
[-3.8118572999999287, 35.129859700000054],
[-3.8139699999999266, 35.11749000000003],
// snip
[-3.8255157999999483, 34.90404140000004],
// snip
[-4.376043299999935, 35.15328130000006],
[-3.8103843999999754, 35.135774000000026],
[-3.811559999999929, 35.13160000000005],
[-3.8118572999999287, 35.129859700000054]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.470361499999967, 35.079306700000075],
[-4.476197999999954, 35.05781030000003],
// snip
[-5.207069099999956, 34.88052770000007],
// snip
[-4.482892799999945, 35.11470000000003],
[-4.4942223999999555, 35.08295910000004],
[-4.470361499999967, 35.079306700000075]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-2.0528876999999284, 34.48349570000005],
[-2.0536608999999544, 34.48332490000007],
// snip
[-1.9856368999999745, 34.93244160000006],
// snip
[-1.9415678999999386, 34.86222920000006],
// snip
[-1.7713567999999782, 34.75961640000003],
// snip
[-2.05311839999996, 34.483884800000055],
[-2.0528876999999284, 34.48349570000005]
]
]
]
]
];
var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];
google.maps.event.addDomListener(window, 'load', init);
function init()
var mapElement = document.getElementById('map');
var pos =
lat: 34.963442,
lng: -4.132102
;
var map = new google.maps.Map(mapElement,
zoom: 7,
center: pos
);
for (i = 0; i < response.length; i++)
response[i].features[0].properties =
polyNum: i
map.data.addGeoJson(response[i]);
map.data.setStyle(function(feat)
return
fillColor: colors[feat.getProperty("polyNum")],
strokeWeight: 1
)
html,
body,
#map
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>answered Mar 25 at 6:26
geocodezipgeocodezip
130k10152183
add a comment |
0
Use a style function to set the color based on a property of the polygon.
var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];
google.maps.event.addDomListener(window, 'load', init);
function init()
var mapElement = document.getElementById('map');
var pos =
lat: 34.963442,
lng: -4.132102
;
var map = new google.maps.Map(mapElement,
zoom: 7,
center: pos
);
for (i = 0; i < response.length; i++)
response[i].features[0].properties =
polyNum: i
map.data.addGeoJson(response[i]);
map.data.setStyle(function(feat)
return
fillColor: colors[feat.getProperty("polyNum")],
strokeWeight: 1
)
proof of concept fiddle
code snippet:
response = [
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-5.728815299999951, 35.700733600000035],
[-5.72649569999993, 35.695227000000045],
[-5.72263339999995, 35.687280100000066],
//snip
[-6.029523099999949, 35.47567980000008],
// snip
[-5.931709999999953, 35.78152110000008],
[-5.732892299999946, 35.69954860000007],
[-5.728815299999951, 35.700733600000035]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.365168599999947, 35.15238920000007],
[-4.365278599999954, 35.15236920000007],
[-4.365262499999972, 35.15244370000005],
[-4.36521149999993, 35.15243510000005],
[-4.365168599999947, 35.15238920000007]
]
],
[
[
[-4.3649855999999545, 35.15214580000003],
[-4.3650431999999455, 35.15209070000003],
[-4.365078099999948, 35.15210710000008],
[-4.36509419999993, 35.152131300000065],
[-4.365201499999955, 35.15215320000004],
[-4.365079499999979, 35.15220030000006],
[-4.365028499999937, 35.15219160000004],
[-4.3649855999999545, 35.15214580000003]
]
],
[
[
[-4.366129499999943, 35.15200100000004],
[-4.366239499999949, 35.151981000000035],
[-4.366223399999967, 35.152055500000074],
[-4.366172399999925, 35.15204680000005],
[-4.366129499999943, 35.15200100000004]
]
],
[
[
[-4.366694199999927, 35.15164400000003],
[-4.366804199999933, 35.15162400000003],
[-4.366788099999951, 35.151698500000066],
[-4.366691499999945, 35.151729300000056],
[-4.366694199999927, 35.15164400000003]
]
],
[
[
[-4.365267299999971, 35.15227530000004],
[-4.365322899999967, 35.15226450000006],
[-4.365361199999938, 35.15222490000008],
[-4.3654469999999606, 35.15222710000006],
[-4.365455599999962, 35.15232430000003],
[-4.365443999999968, 35.15235420000005],
[-4.36534219999993, 35.15234540000006],
[-4.365279299999941, 35.15230290000005],
[-4.365267299999971, 35.15227530000004]
]
],
[
[
[-4.365066099999979, 35.15270730000003],
[-4.365264599999932, 35.15273810000008],
[-4.365387999999939, 35.15288280000004],
[-4.365108999999961, 35.15280380000007],
[-4.365066099999979, 35.15270730000003]
]
],
[
[
[-4.359619499999951, 35.15125780000005],
[-4.360025599999972, 35.150890900000036],
[-4.3600845999999365, 35.15091280000007],
[-4.360181199999943, 35.15144350000003],
[-4.360692999999969, 35.15219440000004],
[-4.360843199999977, 35.152966400000025],
[-4.360895299999925, 35.15297430000004],
[-4.360920799999974, 35.15298910000007],
[-4.360934199999974, 35.15302090000006],
[-4.36091209999995, 35.15304660000004],
[-4.360845599999948, 35.153045500000076],
[-4.360853099999929, 35.15329660000003],
[-4.360564799999963, 35.15332730000006],
[-4.360570099999961, 35.153376700000024],
[-4.360697499999958, 35.15346880000004],
[-4.360800599999948, 35.15360270000008],
[-4.360794099999964, 35.15370010000004],
[-4.360508399999958, 35.15367270000007],
[-4.3601350999999795, 35.15384360000007],
[-4.359662999999955, 35.153975100000025],
[-4.359695199999976, 35.15366810000006],
[-4.359566499999971, 35.153519000000074],
[-4.359523599999932, 35.15299270000003],
[-4.359328099999971, 35.15254580000004],
[-4.359118999999964, 35.152525800000035],
[-4.359000999999978, 35.15250170000007],
[-4.358944699999938, 35.152337200000034],
[-4.358864199999971, 35.15219460000003],
[-4.358966199999941, 35.15194900000006],
[-4.359072999999967, 35.15193130000006],
[-4.359619499999951, 35.15125780000005]
]
],
[
[
[-3.8118572999999287, 35.129859700000054],
[-3.8139699999999266, 35.11749000000003],
// snip
[-3.8255157999999483, 34.90404140000004],
// snip
[-4.376043299999935, 35.15328130000006],
[-3.8103843999999754, 35.135774000000026],
[-3.811559999999929, 35.13160000000005],
[-3.8118572999999287, 35.129859700000054]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.470361499999967, 35.079306700000075],
[-4.476197999999954, 35.05781030000003],
// snip
[-5.207069099999956, 34.88052770000007],
// snip
[-4.482892799999945, 35.11470000000003],
[-4.4942223999999555, 35.08295910000004],
[-4.470361499999967, 35.079306700000075]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-2.0528876999999284, 34.48349570000005],
[-2.0536608999999544, 34.48332490000007],
// snip
[-1.9856368999999745, 34.93244160000006],
// snip
[-1.9415678999999386, 34.86222920000006],
// snip
[-1.7713567999999782, 34.75961640000003],
// snip
[-2.05311839999996, 34.483884800000055],
[-2.0528876999999284, 34.48349570000005]
]
]
]
]
];
var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];
google.maps.event.addDomListener(window, 'load', init);
function init()
var mapElement = document.getElementById('map');
var pos =
lat: 34.963442,
lng: -4.132102
;
var map = new google.maps.Map(mapElement,
zoom: 7,
center: pos
);
for (i = 0; i < response.length; i++)
response[i].features[0].properties =
polyNum: i
map.data.addGeoJson(response[i]);
map.data.setStyle(function(feat)
return
fillColor: colors[feat.getProperty("polyNum")],
strokeWeight: 1
)
html,
body,
#map
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>answered Mar 25 at 6:26
geocodezipgeocodezip
130k10152183
add a comment |
0
0
0
Use a style function to set the color based on a property of the polygon.
var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];
google.maps.event.addDomListener(window, 'load', init);
function init()
var mapElement = document.getElementById('map');
var pos =
lat: 34.963442,
lng: -4.132102
;
var map = new google.maps.Map(mapElement,
zoom: 7,
center: pos
);
for (i = 0; i < response.length; i++)
response[i].features[0].properties =
polyNum: i
map.data.addGeoJson(response[i]);
map.data.setStyle(function(feat)
return
fillColor: colors[feat.getProperty("polyNum")],
strokeWeight: 1
)
proof of concept fiddle
code snippet:
response = [
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-5.728815299999951, 35.700733600000035],
[-5.72649569999993, 35.695227000000045],
[-5.72263339999995, 35.687280100000066],
//snip
[-6.029523099999949, 35.47567980000008],
// snip
[-5.931709999999953, 35.78152110000008],
[-5.732892299999946, 35.69954860000007],
[-5.728815299999951, 35.700733600000035]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.365168599999947, 35.15238920000007],
[-4.365278599999954, 35.15236920000007],
[-4.365262499999972, 35.15244370000005],
[-4.36521149999993, 35.15243510000005],
[-4.365168599999947, 35.15238920000007]
]
],
[
[
[-4.3649855999999545, 35.15214580000003],
[-4.3650431999999455, 35.15209070000003],
[-4.365078099999948, 35.15210710000008],
[-4.36509419999993, 35.152131300000065],
[-4.365201499999955, 35.15215320000004],
[-4.365079499999979, 35.15220030000006],
[-4.365028499999937, 35.15219160000004],
[-4.3649855999999545, 35.15214580000003]
]
],
[
[
[-4.366129499999943, 35.15200100000004],
[-4.366239499999949, 35.151981000000035],
[-4.366223399999967, 35.152055500000074],
[-4.366172399999925, 35.15204680000005],
[-4.366129499999943, 35.15200100000004]
]
],
[
[
[-4.366694199999927, 35.15164400000003],
[-4.366804199999933, 35.15162400000003],
[-4.366788099999951, 35.151698500000066],
[-4.366691499999945, 35.151729300000056],
[-4.366694199999927, 35.15164400000003]
]
],
[
[
[-4.365267299999971, 35.15227530000004],
[-4.365322899999967, 35.15226450000006],
[-4.365361199999938, 35.15222490000008],
[-4.3654469999999606, 35.15222710000006],
[-4.365455599999962, 35.15232430000003],
[-4.365443999999968, 35.15235420000005],
[-4.36534219999993, 35.15234540000006],
[-4.365279299999941, 35.15230290000005],
[-4.365267299999971, 35.15227530000004]
]
],
[
[
[-4.365066099999979, 35.15270730000003],
[-4.365264599999932, 35.15273810000008],
[-4.365387999999939, 35.15288280000004],
[-4.365108999999961, 35.15280380000007],
[-4.365066099999979, 35.15270730000003]
]
],
[
[
[-4.359619499999951, 35.15125780000005],
[-4.360025599999972, 35.150890900000036],
[-4.3600845999999365, 35.15091280000007],
[-4.360181199999943, 35.15144350000003],
[-4.360692999999969, 35.15219440000004],
[-4.360843199999977, 35.152966400000025],
[-4.360895299999925, 35.15297430000004],
[-4.360920799999974, 35.15298910000007],
[-4.360934199999974, 35.15302090000006],
[-4.36091209999995, 35.15304660000004],
[-4.360845599999948, 35.153045500000076],
[-4.360853099999929, 35.15329660000003],
[-4.360564799999963, 35.15332730000006],
[-4.360570099999961, 35.153376700000024],
[-4.360697499999958, 35.15346880000004],
[-4.360800599999948, 35.15360270000008],
[-4.360794099999964, 35.15370010000004],
[-4.360508399999958, 35.15367270000007],
[-4.3601350999999795, 35.15384360000007],
[-4.359662999999955, 35.153975100000025],
[-4.359695199999976, 35.15366810000006],
[-4.359566499999971, 35.153519000000074],
[-4.359523599999932, 35.15299270000003],
[-4.359328099999971, 35.15254580000004],
[-4.359118999999964, 35.152525800000035],
[-4.359000999999978, 35.15250170000007],
[-4.358944699999938, 35.152337200000034],
[-4.358864199999971, 35.15219460000003],
[-4.358966199999941, 35.15194900000006],
[-4.359072999999967, 35.15193130000006],
[-4.359619499999951, 35.15125780000005]
]
],
[
[
[-3.8118572999999287, 35.129859700000054],
[-3.8139699999999266, 35.11749000000003],
// snip
[-3.8255157999999483, 34.90404140000004],
// snip
[-4.376043299999935, 35.15328130000006],
[-3.8103843999999754, 35.135774000000026],
[-3.811559999999929, 35.13160000000005],
[-3.8118572999999287, 35.129859700000054]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.470361499999967, 35.079306700000075],
[-4.476197999999954, 35.05781030000003],
// snip
[-5.207069099999956, 34.88052770000007],
// snip
[-4.482892799999945, 35.11470000000003],
[-4.4942223999999555, 35.08295910000004],
[-4.470361499999967, 35.079306700000075]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-2.0528876999999284, 34.48349570000005],
[-2.0536608999999544, 34.48332490000007],
// snip
[-1.9856368999999745, 34.93244160000006],
// snip
[-1.9415678999999386, 34.86222920000006],
// snip
[-1.7713567999999782, 34.75961640000003],
// snip
[-2.05311839999996, 34.483884800000055],
[-2.0528876999999284, 34.48349570000005]
]
]
]
]
];
var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];
google.maps.event.addDomListener(window, 'load', init);
function init()
var mapElement = document.getElementById('map');
var pos =
lat: 34.963442,
lng: -4.132102
;
var map = new google.maps.Map(mapElement,
zoom: 7,
center: pos
);
for (i = 0; i < response.length; i++)
response[i].features[0].properties =
polyNum: i
map.data.addGeoJson(response[i]);
map.data.setStyle(function(feat)
return
fillColor: colors[feat.getProperty("polyNum")],
strokeWeight: 1
)
html,
body,
#map
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>answered Mar 25 at 6:26
geocodezipgeocodezip
130k10152183
Use a style function to set the color based on a property of the polygon.
var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];
google.maps.event.addDomListener(window, 'load', init);
function init()
var mapElement = document.getElementById('map');
var pos =
lat: 34.963442,
lng: -4.132102
;
var map = new google.maps.Map(mapElement,
zoom: 7,
center: pos
);
for (i = 0; i < response.length; i++)
response[i].features[0].properties =
polyNum: i
map.data.addGeoJson(response[i]);
map.data.setStyle(function(feat)
return
fillColor: colors[feat.getProperty("polyNum")],
strokeWeight: 1
)
proof of concept fiddle
code snippet:
response = [
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-5.728815299999951, 35.700733600000035],
[-5.72649569999993, 35.695227000000045],
[-5.72263339999995, 35.687280100000066],
//snip
[-6.029523099999949, 35.47567980000008],
// snip
[-5.931709999999953, 35.78152110000008],
[-5.732892299999946, 35.69954860000007],
[-5.728815299999951, 35.700733600000035]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.365168599999947, 35.15238920000007],
[-4.365278599999954, 35.15236920000007],
[-4.365262499999972, 35.15244370000005],
[-4.36521149999993, 35.15243510000005],
[-4.365168599999947, 35.15238920000007]
]
],
[
[
[-4.3649855999999545, 35.15214580000003],
[-4.3650431999999455, 35.15209070000003],
[-4.365078099999948, 35.15210710000008],
[-4.36509419999993, 35.152131300000065],
[-4.365201499999955, 35.15215320000004],
[-4.365079499999979, 35.15220030000006],
[-4.365028499999937, 35.15219160000004],
[-4.3649855999999545, 35.15214580000003]
]
],
[
[
[-4.366129499999943, 35.15200100000004],
[-4.366239499999949, 35.151981000000035],
[-4.366223399999967, 35.152055500000074],
[-4.366172399999925, 35.15204680000005],
[-4.366129499999943, 35.15200100000004]
]
],
[
[
[-4.366694199999927, 35.15164400000003],
[-4.366804199999933, 35.15162400000003],
[-4.366788099999951, 35.151698500000066],
[-4.366691499999945, 35.151729300000056],
[-4.366694199999927, 35.15164400000003]
]
],
[
[
[-4.365267299999971, 35.15227530000004],
[-4.365322899999967, 35.15226450000006],
[-4.365361199999938, 35.15222490000008],
[-4.3654469999999606, 35.15222710000006],
[-4.365455599999962, 35.15232430000003],
[-4.365443999999968, 35.15235420000005],
[-4.36534219999993, 35.15234540000006],
[-4.365279299999941, 35.15230290000005],
[-4.365267299999971, 35.15227530000004]
]
],
[
[
[-4.365066099999979, 35.15270730000003],
[-4.365264599999932, 35.15273810000008],
[-4.365387999999939, 35.15288280000004],
[-4.365108999999961, 35.15280380000007],
[-4.365066099999979, 35.15270730000003]
]
],
[
[
[-4.359619499999951, 35.15125780000005],
[-4.360025599999972, 35.150890900000036],
[-4.3600845999999365, 35.15091280000007],
[-4.360181199999943, 35.15144350000003],
[-4.360692999999969, 35.15219440000004],
[-4.360843199999977, 35.152966400000025],
[-4.360895299999925, 35.15297430000004],
[-4.360920799999974, 35.15298910000007],
[-4.360934199999974, 35.15302090000006],
[-4.36091209999995, 35.15304660000004],
[-4.360845599999948, 35.153045500000076],
[-4.360853099999929, 35.15329660000003],
[-4.360564799999963, 35.15332730000006],
[-4.360570099999961, 35.153376700000024],
[-4.360697499999958, 35.15346880000004],
[-4.360800599999948, 35.15360270000008],
[-4.360794099999964, 35.15370010000004],
[-4.360508399999958, 35.15367270000007],
[-4.3601350999999795, 35.15384360000007],
[-4.359662999999955, 35.153975100000025],
[-4.359695199999976, 35.15366810000006],
[-4.359566499999971, 35.153519000000074],
[-4.359523599999932, 35.15299270000003],
[-4.359328099999971, 35.15254580000004],
[-4.359118999999964, 35.152525800000035],
[-4.359000999999978, 35.15250170000007],
[-4.358944699999938, 35.152337200000034],
[-4.358864199999971, 35.15219460000003],
[-4.358966199999941, 35.15194900000006],
[-4.359072999999967, 35.15193130000006],
[-4.359619499999951, 35.15125780000005]
]
],
[
[
[-3.8118572999999287, 35.129859700000054],
[-3.8139699999999266, 35.11749000000003],
// snip
[-3.8255157999999483, 34.90404140000004],
// snip
[-4.376043299999935, 35.15328130000006],
[-3.8103843999999754, 35.135774000000026],
[-3.811559999999929, 35.13160000000005],
[-3.8118572999999287, 35.129859700000054]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.470361499999967, 35.079306700000075],
[-4.476197999999954, 35.05781030000003],
// snip
[-5.207069099999956, 34.88052770000007],
// snip
[-4.482892799999945, 35.11470000000003],
[-4.4942223999999555, 35.08295910000004],
[-4.470361499999967, 35.079306700000075]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-2.0528876999999284, 34.48349570000005],
[-2.0536608999999544, 34.48332490000007],
// snip
[-1.9856368999999745, 34.93244160000006],
// snip
[-1.9415678999999386, 34.86222920000006],
// snip
[-1.7713567999999782, 34.75961640000003],
// snip
[-2.05311839999996, 34.483884800000055],
[-2.0528876999999284, 34.48349570000005]
]
]
]
]
];
var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];
google.maps.event.addDomListener(window, 'load', init);
function init()
var mapElement = document.getElementById('map');
var pos =
lat: 34.963442,
lng: -4.132102
;
var map = new google.maps.Map(mapElement,
zoom: 7,
center: pos
);
for (i = 0; i < response.length; i++)
response[i].features[0].properties =
polyNum: i
map.data.addGeoJson(response[i]);
map.data.setStyle(function(feat)
return
fillColor: colors[feat.getProperty("polyNum")],
strokeWeight: 1
)
html,
body,
#map
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>response = [
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-5.728815299999951, 35.700733600000035],
[-5.72649569999993, 35.695227000000045],
[-5.72263339999995, 35.687280100000066],
//snip
[-6.029523099999949, 35.47567980000008],
// snip
[-5.931709999999953, 35.78152110000008],
[-5.732892299999946, 35.69954860000007],
[-5.728815299999951, 35.700733600000035]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.365168599999947, 35.15238920000007],
[-4.365278599999954, 35.15236920000007],
[-4.365262499999972, 35.15244370000005],
[-4.36521149999993, 35.15243510000005],
[-4.365168599999947, 35.15238920000007]
]
],
[
[
[-4.3649855999999545, 35.15214580000003],
[-4.3650431999999455, 35.15209070000003],
[-4.365078099999948, 35.15210710000008],
[-4.36509419999993, 35.152131300000065],
[-4.365201499999955, 35.15215320000004],
[-4.365079499999979, 35.15220030000006],
[-4.365028499999937, 35.15219160000004],
[-4.3649855999999545, 35.15214580000003]
]
],
[
[
[-4.366129499999943, 35.15200100000004],
[-4.366239499999949, 35.151981000000035],
[-4.366223399999967, 35.152055500000074],
[-4.366172399999925, 35.15204680000005],
[-4.366129499999943, 35.15200100000004]
]
],
[
[
[-4.366694199999927, 35.15164400000003],
[-4.366804199999933, 35.15162400000003],
[-4.366788099999951, 35.151698500000066],
[-4.366691499999945, 35.151729300000056],
[-4.366694199999927, 35.15164400000003]
]
],
[
[
[-4.365267299999971, 35.15227530000004],
[-4.365322899999967, 35.15226450000006],
[-4.365361199999938, 35.15222490000008],
[-4.3654469999999606, 35.15222710000006],
[-4.365455599999962, 35.15232430000003],
[-4.365443999999968, 35.15235420000005],
[-4.36534219999993, 35.15234540000006],
[-4.365279299999941, 35.15230290000005],
[-4.365267299999971, 35.15227530000004]
]
],
[
[
[-4.365066099999979, 35.15270730000003],
[-4.365264599999932, 35.15273810000008],
[-4.365387999999939, 35.15288280000004],
[-4.365108999999961, 35.15280380000007],
[-4.365066099999979, 35.15270730000003]
]
],
[
[
[-4.359619499999951, 35.15125780000005],
[-4.360025599999972, 35.150890900000036],
[-4.3600845999999365, 35.15091280000007],
[-4.360181199999943, 35.15144350000003],
[-4.360692999999969, 35.15219440000004],
[-4.360843199999977, 35.152966400000025],
[-4.360895299999925, 35.15297430000004],
[-4.360920799999974, 35.15298910000007],
[-4.360934199999974, 35.15302090000006],
[-4.36091209999995, 35.15304660000004],
[-4.360845599999948, 35.153045500000076],
[-4.360853099999929, 35.15329660000003],
[-4.360564799999963, 35.15332730000006],
[-4.360570099999961, 35.153376700000024],
[-4.360697499999958, 35.15346880000004],
[-4.360800599999948, 35.15360270000008],
[-4.360794099999964, 35.15370010000004],
[-4.360508399999958, 35.15367270000007],
[-4.3601350999999795, 35.15384360000007],
[-4.359662999999955, 35.153975100000025],
[-4.359695199999976, 35.15366810000006],
[-4.359566499999971, 35.153519000000074],
[-4.359523599999932, 35.15299270000003],
[-4.359328099999971, 35.15254580000004],
[-4.359118999999964, 35.152525800000035],
[-4.359000999999978, 35.15250170000007],
[-4.358944699999938, 35.152337200000034],
[-4.358864199999971, 35.15219460000003],
[-4.358966199999941, 35.15194900000006],
[-4.359072999999967, 35.15193130000006],
[-4.359619499999951, 35.15125780000005]
]
],
[
[
[-3.8118572999999287, 35.129859700000054],
[-3.8139699999999266, 35.11749000000003],
// snip
[-3.8255157999999483, 34.90404140000004],
// snip
[-4.376043299999935, 35.15328130000006],
[-3.8103843999999754, 35.135774000000026],
[-3.811559999999929, 35.13160000000005],
[-3.8118572999999287, 35.129859700000054]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.470361499999967, 35.079306700000075],
[-4.476197999999954, 35.05781030000003],
// snip
[-5.207069099999956, 34.88052770000007],
// snip
[-4.482892799999945, 35.11470000000003],
[-4.4942223999999555, 35.08295910000004],
[-4.470361499999967, 35.079306700000075]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-2.0528876999999284, 34.48349570000005],
[-2.0536608999999544, 34.48332490000007],
// snip
[-1.9856368999999745, 34.93244160000006],
// snip
[-1.9415678999999386, 34.86222920000006],
// snip
[-1.7713567999999782, 34.75961640000003],
// snip
[-2.05311839999996, 34.483884800000055],
[-2.0528876999999284, 34.48349570000005]
]
]
]
]
];
var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];
google.maps.event.addDomListener(window, 'load', init);
function init()
var mapElement = document.getElementById('map');
var pos =
lat: 34.963442,
lng: -4.132102
;
var map = new google.maps.Map(mapElement,
zoom: 7,
center: pos
);
for (i = 0; i < response.length; i++)
response[i].features[0].properties =
polyNum: i
map.data.addGeoJson(response[i]);
map.data.setStyle(function(feat)
return
fillColor: colors[feat.getProperty("polyNum")],
strokeWeight: 1
)
html,
body,
#map
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>response = [
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-5.728815299999951, 35.700733600000035],
[-5.72649569999993, 35.695227000000045],
[-5.72263339999995, 35.687280100000066],
//snip
[-6.029523099999949, 35.47567980000008],
// snip
[-5.931709999999953, 35.78152110000008],
[-5.732892299999946, 35.69954860000007],
[-5.728815299999951, 35.700733600000035]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.365168599999947, 35.15238920000007],
[-4.365278599999954, 35.15236920000007],
[-4.365262499999972, 35.15244370000005],
[-4.36521149999993, 35.15243510000005],
[-4.365168599999947, 35.15238920000007]
]
],
[
[
[-4.3649855999999545, 35.15214580000003],
[-4.3650431999999455, 35.15209070000003],
[-4.365078099999948, 35.15210710000008],
[-4.36509419999993, 35.152131300000065],
[-4.365201499999955, 35.15215320000004],
[-4.365079499999979, 35.15220030000006],
[-4.365028499999937, 35.15219160000004],
[-4.3649855999999545, 35.15214580000003]
]
],
[
[
[-4.366129499999943, 35.15200100000004],
[-4.366239499999949, 35.151981000000035],
[-4.366223399999967, 35.152055500000074],
[-4.366172399999925, 35.15204680000005],
[-4.366129499999943, 35.15200100000004]
]
],
[
[
[-4.366694199999927, 35.15164400000003],
[-4.366804199999933, 35.15162400000003],
[-4.366788099999951, 35.151698500000066],
[-4.366691499999945, 35.151729300000056],
[-4.366694199999927, 35.15164400000003]
]
],
[
[
[-4.365267299999971, 35.15227530000004],
[-4.365322899999967, 35.15226450000006],
[-4.365361199999938, 35.15222490000008],
[-4.3654469999999606, 35.15222710000006],
[-4.365455599999962, 35.15232430000003],
[-4.365443999999968, 35.15235420000005],
[-4.36534219999993, 35.15234540000006],
[-4.365279299999941, 35.15230290000005],
[-4.365267299999971, 35.15227530000004]
]
],
[
[
[-4.365066099999979, 35.15270730000003],
[-4.365264599999932, 35.15273810000008],
[-4.365387999999939, 35.15288280000004],
[-4.365108999999961, 35.15280380000007],
[-4.365066099999979, 35.15270730000003]
]
],
[
[
[-4.359619499999951, 35.15125780000005],
[-4.360025599999972, 35.150890900000036],
[-4.3600845999999365, 35.15091280000007],
[-4.360181199999943, 35.15144350000003],
[-4.360692999999969, 35.15219440000004],
[-4.360843199999977, 35.152966400000025],
[-4.360895299999925, 35.15297430000004],
[-4.360920799999974, 35.15298910000007],
[-4.360934199999974, 35.15302090000006],
[-4.36091209999995, 35.15304660000004],
[-4.360845599999948, 35.153045500000076],
[-4.360853099999929, 35.15329660000003],
[-4.360564799999963, 35.15332730000006],
[-4.360570099999961, 35.153376700000024],
[-4.360697499999958, 35.15346880000004],
[-4.360800599999948, 35.15360270000008],
[-4.360794099999964, 35.15370010000004],
[-4.360508399999958, 35.15367270000007],
[-4.3601350999999795, 35.15384360000007],
[-4.359662999999955, 35.153975100000025],
[-4.359695199999976, 35.15366810000006],
[-4.359566499999971, 35.153519000000074],
[-4.359523599999932, 35.15299270000003],
[-4.359328099999971, 35.15254580000004],
[-4.359118999999964, 35.152525800000035],
[-4.359000999999978, 35.15250170000007],
[-4.358944699999938, 35.152337200000034],
[-4.358864199999971, 35.15219460000003],
[-4.358966199999941, 35.15194900000006],
[-4.359072999999967, 35.15193130000006],
[-4.359619499999951, 35.15125780000005]
]
],
[
[
[-3.8118572999999287, 35.129859700000054],
[-3.8139699999999266, 35.11749000000003],
// snip
[-3.8255157999999483, 34.90404140000004],
// snip
[-4.376043299999935, 35.15328130000006],
[-3.8103843999999754, 35.135774000000026],
[-3.811559999999929, 35.13160000000005],
[-3.8118572999999287, 35.129859700000054]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.470361499999967, 35.079306700000075],
[-4.476197999999954, 35.05781030000003],
// snip
[-5.207069099999956, 34.88052770000007],
// snip
[-4.482892799999945, 35.11470000000003],
[-4.4942223999999555, 35.08295910000004],
[-4.470361499999967, 35.079306700000075]
]
]
]
]
,
"type": "FeatureCollection",
"features": [
"type": "Feature",
"geometry":
"type": "MultiPolygon",
"coordinates": [
[
[
[-2.0528876999999284, 34.48349570000005],
[-2.0536608999999544, 34.48332490000007],
// snip
[-1.9856368999999745, 34.93244160000006],
// snip
[-1.9415678999999386, 34.86222920000006],
// snip
[-1.7713567999999782, 34.75961640000003],
// snip
[-2.05311839999996, 34.483884800000055],
[-2.0528876999999284, 34.48349570000005]
]
]
]
]
];
var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];
google.maps.event.addDomListener(window, 'load', init);
function init()
var mapElement = document.getElementById('map');
var pos =
lat: 34.963442,
lng: -4.132102
;
var map = new google.maps.Map(mapElement,
zoom: 7,
center: pos
);
for (i = 0; i < response.length; i++)
response[i].features[0].properties =
polyNum: i
map.data.addGeoJson(response[i]);
map.data.setStyle(function(feat)
return
fillColor: colors[feat.getProperty("polyNum")],
strokeWeight: 1
)
html,
body,
#map
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>answered Mar 25 at 6:26
geocodezipgeocodezip
130k10152183
edited Mar 25 at 6:59
answered Mar 25 at 6:26
geocodezipgeocodezip
130k10152183
answered Mar 25 at 6:26
geocodezipgeocodezip
130k10152183
answered Mar 25 at 6:26
geocodezipgeocodezip
130k10152183
130k10152183
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55329364%2fhow-to-specify-a-unique-color-for-each-polygon-using-google-maps%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
