How To Make Holes In Polygons To Display Each One With Clean Colors On Google Map?
I have 4 superposed polygons and I need to have some clean colors to diferenciate them, like this : The colors are clean and well separated ! My code : <
Solution 1:
You need to make holes in the polygons. There are two options:
- edit your GeoJSON to add the next smallest polygon as a hole in each polygon
- write code to create polygons with holes in them from your input GeoJSON
edited GeoJSON:
var mygeojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [ // innermost polygon
[
[-34.915172, -8.049481],
[-34.914707, -8.055378],
[-34.91162, -8.060598],
[-34.910063, -8.061326],
[-34.90985, -8.061371],
[-34.90802, -8.060531],
[-34.905952, -8.056527],
[-34.903001, -8.050196],
[-34.902767, -8.04958],
[-34.902568, -8.045435],
[-34.902587, -8.045258],
[-34.906566, -8.041764],
[-34.908749, -8.0408],
[-34.908813, -8.040815],
[-34.909764, -8.041281],
[-34.90979, -8.041321],
[-34.915152, -8.049235],
[-34.915172, -8.049481]
]
]
},
"properties": {
"group_index": 0,
"value": 120,
"center": [-34.909916, -8.05]
}
}, {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-34.929988, -8.047497],
[-34.926252, -8.054765],
[-34.924748, -8.062501],
[-34.917848, -8.067531],
[-34.910711, -8.074744],
[-34.907147, -8.074238],
[-34.902147, -8.067023],
[-34.898236, -8.064276],
[-34.896426, -8.063107],
[-34.895983, -8.062843],
[-34.896042, -8.062316],
[-34.895973, -8.051555],
[-34.893041, -8.048618],
[-34.891768, -8.04525],
[-34.891211, -8.043531],
[-34.891541, -8.042554],
[-34.891747, -8.042396],
[-34.892397, -8.041901],
[-34.893149, -8.041424],
[-34.895814, -8.039872],
[-34.902685, -8.032683],
[-34.904729, -8.031778],
[-34.906, -8.031939],
[-34.913661, -8.035535],
[-34.915638, -8.038325],
[-34.920721, -8.043953],
[-34.928257, -8.044341],
[-34.929209, -8.045448],
[-34.929379, -8.045746],
[-34.929988, -8.047497]
],
[ // innermost polygon, hole inside next level polygon
[-34.915172, -8.049481],
[-34.914707, -8.055378],
[-34.91162, -8.060598],
[-34.910063, -8.061326],
[-34.90985, -8.061371],
[-34.90802, -8.060531],
[-34.905952, -8.056527],
[-34.903001, -8.050196],
[-34.902767, -8.04958],
[-34.902568, -8.045435],
[-34.902587, -8.045258],
[-34.906566, -8.041764],
[-34.908749, -8.0408],
[-34.908813, -8.040815],
[-34.909764, -8.041281],
[-34.90979, -8.041321],
[-34.915152, -8.049235],
[-34.915172, -8.049481]
]
]
},
"properties": {
"group_index": 0,
"value": 240,
"center": [-34.909916, -8.05]
}
}, {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-34.956063, -8.033059],
[-34.955041, -8.033829],
[-34.954587, -8.034079],
[-34.948183, -8.0401],
[-34.947163, -8.044392],
[-34.947272, -8.047986],
[-34.948019, -8.05595],
[-34.948103, -8.056254],
[-34.948084, -8.056901],
[-34.946187, -8.059355],
[-34.952109, -8.068439],
[-34.952839, -8.068665],
[-34.952829, -8.070174],
[-34.952796, -8.070289],
[-34.951771, -8.072104],
[-34.951041, -8.071877],
[-34.940532, -8.072531],
[-34.937183, -8.077114],
[-34.936484, -8.078185],
[-34.934712, -8.082695],
[-34.934542, -8.08374],
[-34.934408, -8.08414],
[-34.931548, -8.087205],
[-34.929387, -8.087655],
[-34.925758, -8.087245],
[-34.917409, -8.090498],
[-34.915368, -8.097388],
[-34.914401, -8.099923],
[-34.912478, -8.102227],
[-34.908953, -8.102959],
[-34.908757, -8.102013],
[-34.904896, -8.092322],
[-34.904582, -8.089398],
[-34.90457, -8.089352],
[-34.898932, -8.081687],
[-34.892253, -8.084787],
[-34.889729, -8.086645],
[-34.88728, -8.0867],
[-34.887252, -8.086673],
[-34.887112, -8.084173],
[-34.881451, -8.074375],
[-34.877403, -8.066542],
[-34.877357, -8.066449],
[-34.876976, -8.060774],
[-34.875231, -8.051236],
[-34.873014, -8.0484],
[-34.873907, -8.03785],
[-34.872542, -8.030814],
[-34.87267, -8.030475],
[-34.873901, -8.029557],
[-34.881458, -8.022556],
[-34.887505, -8.012962],
[-34.888584, -8.012166],
[-34.888918, -8.012105],
[-34.897461, -8.012019],
[-34.897505, -8.012052],
[-34.907112, -8.01783],
[-34.915999, -8.019938],
[-34.920063, -8.022551],
[-34.930189, -8.020902],
[-34.94101, -8.025031],
[-34.944608, -8.024917],
[-34.954314, -8.029913],
[-34.956063, -8.033059]
],
[
[-34.929988, -8.047497],
[-34.926252, -8.054765],
[-34.924748, -8.062501],
[-34.917848, -8.067531],
[-34.910711, -8.074744],
[-34.907147, -8.074238],
[-34.902147, -8.067023],
[-34.898236, -8.064276],
[-34.896426, -8.063107],
[-34.895983, -8.062843],
[-34.896042, -8.062316],
[-34.895973, -8.051555],
[-34.893041, -8.048618],
[-34.891768, -8.04525],
[-34.891211, -8.043531],
[-34.891541, -8.042554],
[-34.891747, -8.042396],
[-34.892397, -8.041901],
[-34.893149, -8.041424],
[-34.895814, -8.039872],
[-34.902685, -8.032683],
[-34.904729, -8.031778],
[-34.906, -8.031939],
[-34.913661, -8.035535],
[-34.915638, -8.038325],
[-34.920721, -8.043953],
[-34.928257, -8.044341],
[-34.929209, -8.045448],
[-34.929379, -8.045746],
[-34.929988, -8.047497]
]
]
},
"properties": {
"group_index": 0,
"value": 480,
"center": [-34.909916, -8.05]
}
}, {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-34.967875, -8.022124],
[-34.967032, -8.022491],
[-34.962219, -8.027052],
[-34.965092, -8.03679],
[-34.965569, -8.037422],
[-34.964933, -8.039161],
[-34.960129, -8.048242],
[-34.95918, -8.050267],
[-34.957693, -8.053731],
[-34.956616, -8.054331],
[-34.953751, -8.063539],
[-34.958475, -8.066552],
[-34.96713, -8.073047],
[-34.966185, -8.076521],
[-34.964619, -8.076095],
[-34.962336, -8.075392],
[-34.958578, -8.072295],
[-34.951771, -8.072104],
[-34.947239, -8.076907],
[-34.945128, -8.081491],
[-34.944516, -8.092605],
[-34.944491, -8.09299],
[-34.942463, -8.094713],
[-34.936203, -8.099609],
[-34.936156, -8.099611],
[-34.930332, -8.098121],
[-34.928104, -8.097671],
[-34.926769, -8.097602],
[-34.919303, -8.105374],
[-34.920486, -8.107928],
[-34.921611, -8.110473],
[-34.921267, -8.11224],
[-34.921107, -8.112423],
[-34.921099, -8.112432],
[-34.920937, -8.112614],
[-34.915398, -8.116855],
[-34.914727, -8.117221],
[-34.911887, -8.117649],
[-34.904949, -8.112587],
[-34.904891, -8.112337],
[-34.905136, -8.111096],
[-34.905752, -8.109837],
[-34.906527, -8.105314],
[-34.906546, -8.105024],
[-34.90736, -8.102336],
[-34.907636, -8.101151],
[-34.907492, -8.097309],
[-34.904896, -8.092322],
[-34.895762, -8.09403],
[-34.892507, -8.099182],
[-34.892333, -8.099679],
[-34.888095, -8.101449],
[-34.887966, -8.101505],
[-34.885749, -8.101456],
[-34.883164, -8.096974],
[-34.879828, -8.088927],
[-34.879867, -8.088719],
[-34.880591, -8.087133],
[-34.881121, -8.086439],
[-34.880567, -8.074973],
[-34.874867, -8.072386],
[-34.870276, -8.064982],
[-34.870159, -8.064823],
[-34.869519, -8.056238],
[-34.868117, -8.04922],
[-34.869572, -8.042614],
[-34.863881, -8.032346],
[-34.862718, -8.03064],
[-34.864656, -8.026769],
[-34.865011, -8.026182],
[-34.871422, -8.017997],
[-34.872082, -8.015905],
[-34.872426, -8.015001],
[-34.872539, -8.014982],
[-34.873295, -8.014922],
[-34.881793, -8.006885],
[-34.881807, -8.004915],
[-34.883463, -8.002759],
[-34.883552, -8.002686],
[-34.884165, -8.002354],
[-34.889202, -8.000715],
[-34.89597, -8.002288],
[-34.896938, -8.002808],
[-34.899093, -8.004078],
[-34.904905, -8.009364],
[-34.914814, -8.009358],
[-34.920314, -8.010243],
[-34.92932, -8.014936],
[-34.940385, -8.012928],
[-34.943945, -8.0141],
[-34.944, -8.017238],
[-34.955462, -8.018325],
[-34.966437, -8.018824],
[-34.96753, -8.019999],
[-34.967655, -8.020305],
[-34.967875, -8.022124]
],
[
[-34.956063, -8.033059],
[-34.955041, -8.033829],
[-34.954587, -8.034079],
[-34.948183, -8.0401],
[-34.947163, -8.044392],
[-34.947272, -8.047986],
[-34.948019, -8.05595],
[-34.948103, -8.056254],
[-34.948084, -8.056901],
[-34.946187, -8.059355],
[-34.952109, -8.068439],
[-34.952839, -8.068665],
[-34.952829, -8.070174],
[-34.952796, -8.070289],
[-34.951771, -8.072104],
[-34.951041, -8.071877],
[-34.940532, -8.072531],
[-34.937183, -8.077114],
[-34.936484, -8.078185],
[-34.934712, -8.082695],
[-34.934542, -8.08374],
[-34.934408, -8.08414],
[-34.931548, -8.087205],
[-34.929387, -8.087655],
[-34.925758, -8.087245],
[-34.917409, -8.090498],
[-34.915368, -8.097388],
[-34.914401, -8.099923],
[-34.912478, -8.102227],
[-34.908953, -8.102959],
[-34.908757, -8.102013],
[-34.904896, -8.092322],
[-34.904582, -8.089398],
[-34.90457, -8.089352],
[-34.898932, -8.081687],
[-34.892253, -8.084787],
[-34.889729, -8.086645],
[-34.88728, -8.0867],
[-34.887252, -8.086673],
[-34.887112, -8.084173],
[-34.881451, -8.074375],
[-34.877403, -8.066542],
[-34.877357, -8.066449],
[-34.876976, -8.060774],
[-34.875231, -8.051236],
[-34.873014, -8.0484],
[-34.873907, -8.03785],
[-34.872542, -8.030814],
[-34.87267, -8.030475],
[-34.873901, -8.029557],
[-34.881458, -8.022556],
[-34.887505, -8.012962],
[-34.888584, -8.012166],
[-34.888918, -8.012105],
[-34.897461, -8.012019],
[-34.897505, -8.012052],
[-34.907112, -8.01783],
[-34.915999, -8.019938],
[-34.920063, -8.022551],
[-34.930189, -8.020902],
[-34.94101, -8.025031],
[-34.944608, -8.024917],
[-34.954314, -8.029913],
[-34.956063, -8.033059]
]
]
},
"properties": {
"group_index": 0,
"value": 600,
"center": [-34.909916, -8.05]
}
}],
"bbox": [-34.967875, -8.117649, 0, 0],
"info": {
"engine": {
"version": "4.7.0",
"build_date": "2018-10-31T12:15:39Z"
},
"service": "isochrones",
"query": {
"ranges": "120.0,240.0,480.0,600.0",
"profile": "driving-car",
"locations": [
[-34.909916, -8.05]
],
"range_type": "time",
"location_type": "start"
},
"attribution": "openrouteservice.org | OpenStreetMap contributors",
"timestamp": 1544700367108
}
};
code snippet: (removed outermost polygon so would fit in answer
var map;
varGeoJson;
functioninitMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(-8.044474, -34.884578),
});
map.data.addGeoJson(mygeojson);
map.data.setStyle(function(feature) {
var pvalue = feature.getProperty('value');
if (pvalue == 120) {
color = 'Blue';
}
if (pvalue == 240) {
color = '#ff5050';
}
if (pvalue == 480) {
color = '#ff9933';
}
if (pvalue == 600) {
color = 'yellow';
}
return {
fillColor: color,
strokeWeight: 1
}
});
}
var mygeojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-34.915172, -8.049481],
[-34.914707, -8.055378],
[-34.91162, -8.060598],
[-34.910063, -8.061326],
[-34.90985, -8.061371],
[-34.90802, -8.060531],
[-34.905952, -8.056527],
[-34.903001, -8.050196],
[-34.902767, -8.04958],
[-34.902568, -8.045435],
[-34.902587, -8.045258],
[-34.906566, -8.041764],
[-34.908749, -8.0408],
[-34.908813, -8.040815],
[-34.909764, -8.041281],
[-34.90979, -8.041321],
[-34.915152, -8.049235],
[-34.915172, -8.049481]
]
]
},
"properties": {
"group_index": 0,
"value": 120,
"center": [-34.909916, -8.05]
}
}, {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-34.929988, -8.047497],
[-34.926252, -8.054765],
[-34.924748, -8.062501],
[-34.917848, -8.067531],
[-34.910711, -8.074744],
[-34.907147, -8.074238],
[-34.902147, -8.067023],
[-34.898236, -8.064276],
[-34.896426, -8.063107],
[-34.895983, -8.062843],
[-34.896042, -8.062316],
[-34.895973, -8.051555],
[-34.893041, -8.048618],
[-34.891768, -8.04525],
[-34.891211, -8.043531],
[-34.891541, -8.042554],
[-34.891747, -8.042396],
[-34.892397, -8.041901],
[-34.893149, -8.041424],
[-34.895814, -8.039872],
[-34.902685, -8.032683],
[-34.904729, -8.031778],
[-34.906, -8.031939],
[-34.913661, -8.035535],
[-34.915638, -8.038325],
[-34.920721, -8.043953],
[-34.928257, -8.044341],
[-34.929209, -8.045448],
[-34.929379, -8.045746],
[-34.929988, -8.047497]
],
[
[-34.915172, -8.049481],
[-34.914707, -8.055378],
[-34.91162, -8.060598],
[-34.910063, -8.061326],
[-34.90985, -8.061371],
[-34.90802, -8.060531],
[-34.905952, -8.056527],
[-34.903001, -8.050196],
[-34.902767, -8.04958],
[-34.902568, -8.045435],
[-34.902587, -8.045258],
[-34.906566, -8.041764],
[-34.908749, -8.0408],
[-34.908813, -8.040815],
[-34.909764, -8.041281],
[-34.90979, -8.041321],
[-34.915152, -8.049235],
[-34.915172, -8.049481]
]
]
},
"properties": {
"group_index": 0,
"value": 240,
"center": [-34.909916, -8.05]
}
}, {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-34.956063, -8.033059],
[-34.955041, -8.033829],
[-34.954587, -8.034079],
[-34.948183, -8.0401],
[-34.947163, -8.044392],
[-34.947272, -8.047986],
[-34.948019, -8.05595],
[-34.948103, -8.056254],
[-34.948084, -8.056901],
[-34.946187, -8.059355],
[-34.952109, -8.068439],
[-34.952839, -8.068665],
[-34.952829, -8.070174],
[-34.952796, -8.070289],
[-34.951771, -8.072104],
[-34.951041, -8.071877],
[-34.940532, -8.072531],
[-34.937183, -8.077114],
[-34.936484, -8.078185],
[-34.934712, -8.082695],
[-34.934542, -8.08374],
[-34.934408, -8.08414],
[-34.931548, -8.087205],
[-34.929387, -8.087655],
[-34.925758, -8.087245],
[-34.917409, -8.090498],
[-34.915368, -8.097388],
[-34.914401, -8.099923],
[-34.912478, -8.102227],
[-34.908953, -8.102959],
[-34.908757, -8.102013],
[-34.904896, -8.092322],
[-34.904582, -8.089398],
[-34.90457, -8.089352],
[-34.898932, -8.081687],
[-34.892253, -8.084787],
[-34.889729, -8.086645],
[-34.88728, -8.0867],
[-34.887252, -8.086673],
[-34.887112, -8.084173],
[-34.881451, -8.074375],
[-34.877403, -8.066542],
[-34.877357, -8.066449],
[-34.876976, -8.060774],
[-34.875231, -8.051236],
[-34.873014, -8.0484],
[-34.873907, -8.03785],
[-34.872542, -8.030814],
[-34.87267, -8.030475],
[-34.873901, -8.029557],
[-34.881458, -8.022556],
[-34.887505, -8.012962],
[-34.888584, -8.012166],
[-34.888918, -8.012105],
[-34.897461, -8.012019],
[-34.897505, -8.012052],
[-34.907112, -8.01783],
[-34.915999, -8.019938],
[-34.920063, -8.022551],
[-34.930189, -8.020902],
[-34.94101, -8.025031],
[-34.944608, -8.024917],
[-34.954314, -8.029913],
[-34.956063, -8.033059]
],
[
[-34.929988, -8.047497],
[-34.926252, -8.054765],
[-34.924748, -8.062501],
[-34.917848, -8.067531],
[-34.910711, -8.074744],
[-34.907147, -8.074238],
[-34.902147, -8.067023],
[-34.898236, -8.064276],
[-34.896426, -8.063107],
[-34.895983, -8.062843],
[-34.896042, -8.062316],
[-34.895973, -8.051555],
[-34.893041, -8.048618],
[-34.891768, -8.04525],
[-34.891211, -8.043531],
[-34.891541, -8.042554],
[-34.891747, -8.042396],
[-34.892397, -8.041901],
[-34.893149, -8.041424],
[-34.895814, -8.039872],
[-34.902685, -8.032683],
[-34.904729, -8.031778],
[-34.906, -8.031939],
[-34.913661, -8.035535],
[-34.915638, -8.038325],
[-34.920721, -8.043953],
[-34.928257, -8.044341],
[-34.929209, -8.045448],
[-34.929379, -8.045746],
[-34.929988, -8.047497]
]
]
},
"properties": {
"group_index": 0,
"value": 480,
"center": [-34.909916, -8.05]
}
} // remove outermost polygon so fits in answer
],
"bbox": [-34.967875, -8.117649, 0, 0],
"info": {
"engine": {
"version": "4.7.0",
"build_date": "2018-10-31T12:15:39Z"
},
"service": "isochrones",
"query": {
"ranges": "120.0,240.0,480.0,600.0",
"profile": "driving-car",
"locations": [
[-34.909916, -8.05]
],
"range_type": "time",
"location_type": "start"
},
"attribution": "openrouteservice.org | OpenStreetMap contributors",
"timestamp": 1544700367108
}
};#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}<divid="map"></div><!-- Replace the value of the key parameter with your own API key. --><scriptsrc="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap"asyncdefer></script>
Post a Comment for "How To Make Holes In Polygons To Display Each One With Clean Colors On Google Map?"