Nilesh Barai
Reputation: 13
Google Maps API and GeoJSON: How do I create different colored lines with unique properties and infowindows
I am having a problem with GeoJSON and Google Maps API.
How do I plot a MultiLineString with ...
1) Each line having It's own color and
2) Each line having it's own properties and
3) Each line should be clickable and show an info window with it's properties
Samples Javascript:
var dataGEOJSON=[];
function LoadMyGEOJSON(key)
{
dataGEOJSON[key] = new google.maps.Data();
dataGEOJSON[key].loadGeoJson('GetLatLngGEOJSON.aspx?key=' + key);
dataGEOJSON[key].setMap(map);
}
The reason for the array, is that way I can keep track of the keys they loaded, as the user can load or unload the keys from the map in their user interface.
Sample GeoJSON:
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"properties":{
"Key":"007",
"Line1":"<this is line 1 desc>",
"Line2":"<this is line 2 desc>",
"Line3":"<this is line 3 desc>",
"Line4":"<this is line 4 desc>",
"Line5":"<this is line 5 desc>",
"Line6":"<this is line 6 desc>",
"Line7":"<this is line 7 desc>"
},
"geometry":{
"type":"MultiLineString",
"coordinates":[
[
[
-79.7066775992172,
43.6462189758028
],
[
-79.7066939830514,
43.6461985074393
],
[
-79.7066378408013,
43.6461605607267
],
[
-79.7066097743239,
43.6461403201406
],
[
-79.7064548987452,
43.6460566901385
],
[
-79.7063956692058,
43.6460219372408
]
],
[
[
-79.7063956692058,
43.6460219372408
],
[
-79.7063852230813,
43.646033518772
],
[
-79.7063166536656,
43.6461172032157
],
[
-79.7064079964431,
43.6461815121163
],
[
-79.7060589374119,
43.646518038823
],
[
-79.7060054211382,
43.6465600820263
]
],
[
[
-79.7060054211382,
43.6465600820263
],
[
-79.7052588394648,
43.6471387374653
],
[
-79.7048261689477,
43.6474817773536
],
[
-79.7043239742464,
43.6474733374216
],
[
-79.7041128202014,
43.6476608859429
],
[
-79.703901284037,
43.6478509811517
],
[
-79.7030237720306,
43.6486568653637
],
[
-79.7029267563095,
43.6486965678914
]
],
[
[
-79.7029267563091,
43.6486965678909
],
[
-79.7028702942784,
43.6487267896104
],
[
-79.7028019515802,
43.6487884267869
]
],
[
[
-79.6949803205847,
43.6554816862022
],
[
-79.6946328513629,
43.6552226727517
],
[
-79.6945439505269,
43.6551559442016
]
],
[
[
-79.6945439505269,
43.6551559442016
],
[
-79.694066895687,
43.654797865403
],
[
-79.6934193769725,
43.6543136334174
],
[
-79.6924271403494,
43.6535711706703
],
[
-79.6920107752268,
43.6532605761111
],
[
-79.6919943721596,
43.6532604342567
]
],
[
[
-79.6919943721591,
43.6532604342562
],
[
-79.6914713751595,
43.6536247980162
],
[
-79.6911279733848,
43.6533992300817
]
],
[
[
-79.6959960003114,
43.6400049378117
],
[
-79.6960571265341,
43.6400850012767
],
[
-79.6961629127738,
43.640012603549
],
[
-79.6962380127401,
43.6399612066507
],
[
-79.6964991971409,
43.6401581219518
],
[
-79.6965504313169,
43.6403222661559
]
],
[
[
-79.6965504313164,
43.6403222661554
],
[
-79.6963411179014,
43.6405181683405
]
],
[
[
-79.6973635087052,
43.6393434514529
],
[
-79.6975152035274,
43.6394534198075
],
[
-79.6974394413309,
43.6393984974797
],
[
-79.6977214702725,
43.6396029481089
]
],
[
[
-79.7037279098659,
43.6441816734685
],
[
-79.7038116627627,
43.6442425378655
],
[
-79.7043663390943,
43.6446488071586
],
[
-79.7048680167224,
43.645024186195
],
[
-79.7053904212546,
43.6454260322038
],
[
-79.7059251921243,
43.6458354437457
],
[
-79.7065612964782,
43.6461582999466
],
[
-79.7065835802603,
43.6461492141531
],
[
-79.7066775992172,
43.6462189758028
]
],
[
[
-79.6973112420145,
43.6393143090171
],
[
-79.6972862146857,
43.6393319663604
],
[
-79.6971872210635,
43.6392588377729
],
[
-79.6968127129063,
43.6395272639245
],
[
-79.6966669835105,
43.6395263250713
],
[
-79.6960609039152,
43.6399594999986
]
],
[
[
-79.6960609039152,
43.6399594999986
],
[
-79.6960181044663,
43.639990047741
]
],
[
[
-79.7032573776668,
43.6438035217788
],
[
-79.7032773647046,
43.6438182749637
],
[
-79.7032968727787,
43.6438287137889
]
],
[
[
-79.6982280590368,
43.6399996458065
],
[
-79.6983123840689,
43.6400655275078
],
[
-79.6988209765837,
43.6404574862051
],
[
-79.6997681798983,
43.6411574341786
],
[
-79.699722618622,
43.6411857721075
],
[
-79.7003863588722,
43.641677233397
],
[
-79.7008842734269,
43.6420484764154
],
[
-79.7014070294285,
43.6424381587765
],
[
-79.7024395226368,
43.643210754341
],
[
-79.7029823771679,
43.643602976107
],
[
-79.7032573776668,
43.6438035217788
]
]
]
}
}
]
}
This is the first time I am using GeoJSON, so I will need assistance with the GeoJSON format needed for to add the properties and styles. Plus the javascript and Google Map API code. If anyone can provide some code or a link to some resources which give detailed examples, that would be greatly appreciated.
Upvotes: 0
Views: 1374
Answers (1)
geocodezip
Reputation: 161404
One option would be to process the GeoJSON as it is loaded, creating google.maps.Polyline objects from each section of the line. Use function closure (like is used for markers in the answer to this question, set the position of the infowindow to the first point of the polyline segment.
code snippet:
var colors = ["#FF0000", "#800000", "#00FF00", "#008000", "#0000FF", " #8A2BE2", "#A52A2A", "#DEB887", "#5F9EA0", "#000080", "#FFFF00", "#808000", "#FF00FF", "#800080", "#00FFFF", "#7FFFD4", "#008080", "#000000"];
var infowindow = new google.maps.InfoWindow();
function initialize() {
// Create a simple map.
features = [];
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 14,
center: {
lat: 43.65,
lng: -79.7
}
});
// process the loaded GeoJSON data.
var bounds = new google.maps.LatLngBounds();
google.maps.event.addListener(map.data, 'addfeature', function(e) {
if (e.feature.getGeometry().getType() === 'MultiLineString') {
var polys = e.feature.getGeometry().getArray();
for (var i = 0; i < polys.length; i++) {
for (var j = 0; j < polys[i].getLength(); j++) {
var poly = new google.maps.Polyline({
map: map,
path: polys[i].getArray(),
strokeColor: colors[i % colors.length]
});
google.maps.event.addListener(poly, 'click', (function(poly, i, feature) {
return function() {
infowindow.setContent("polyline " + i+"<br>"+feature.getProperty("Line"+i));
infowindow.setPosition(polys[i].getAt(0));
infowindow.open(map);
}
})(poly, i, e.feature));
bounds.extend(polys[i].getAt(j));
}
}
map.fitBounds(bounds);
map.data.setMap(null);
} else if (e.feature.getGeometry().getType() === 'GeometryCollection') {
var polys = e.feature.getGeometry().getArray();
for (var i = 0; i < polys.length; i++) {
for (var j = 0; j < polys[i].getLength(); j++) {
bounds.extend(polys[i].getAt(j));
}
}
map.fitBounds(bounds);
}
});
map.data.addGeoJson(data);
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"Key": "007",
"Line1": "<this is line 1 desc>",
"Line2": "<this is line 2 desc>",
"Line3": "<this is line 3 desc>",
"Line4": "<this is line 4 desc>",
"Line5": "<this is line 5 desc>",
"Line6": "<this is line 6 desc>",
"Line7": "<this is line 7 desc>"
},
"geometry": {
"type": "MultiLineString",
"coordinates": [
[
[-79.7066775992172,
43.6462189758028
],
[-79.7066939830514,
43.6461985074393
],
[-79.7066378408013,
43.6461605607267
],
[-79.7066097743239,
43.6461403201406
],
[-79.7064548987452,
43.6460566901385
],
[-79.7063956692058,
43.6460219372408
]
],
[
[-79.7063956692058,
43.6460219372408
],
[-79.7063852230813,
43.646033518772
],
[-79.7063166536656,
43.6461172032157
],
[-79.7064079964431,
43.6461815121163
],
[-79.7060589374119,
43.646518038823
],
[-79.7060054211382,
43.6465600820263
]
],
[
[-79.7060054211382,
43.6465600820263
],
[-79.7052588394648,
43.6471387374653
],
[-79.7048261689477,
43.6474817773536
],
[-79.7043239742464,
43.6474733374216
],
[-79.7041128202014,
43.6476608859429
],
[-79.703901284037,
43.6478509811517
],
[-79.7030237720306,
43.6486568653637
],
[-79.7029267563095,
43.6486965678914
]
],
[
[-79.7029267563091,
43.6486965678909
],
[-79.7028702942784,
43.6487267896104
],
[-79.7028019515802,
43.6487884267869
]
],
[
[-79.6949803205847,
43.6554816862022
],
[-79.6946328513629,
43.6552226727517
],
[-79.6945439505269,
43.6551559442016
]
],
[
[-79.6945439505269,
43.6551559442016
],
[-79.694066895687,
43.654797865403
],
[-79.6934193769725,
43.6543136334174
],
[-79.6924271403494,
43.6535711706703
],
[-79.6920107752268,
43.6532605761111
],
[-79.6919943721596,
43.6532604342567
]
],
[
[-79.6919943721591,
43.6532604342562
],
[-79.6914713751595,
43.6536247980162
],
[-79.6911279733848,
43.6533992300817
]
],
[
[-79.6959960003114,
43.6400049378117
],
[-79.6960571265341,
43.6400850012767
],
[-79.6961629127738,
43.640012603549
],
[-79.6962380127401,
43.6399612066507
],
[-79.6964991971409,
43.6401581219518
],
[-79.6965504313169,
43.6403222661559
]
],
[
[-79.6965504313164,
43.6403222661554
],
[-79.6963411179014,
43.6405181683405
]
],
[
[-79.6973635087052,
43.6393434514529
],
[-79.6975152035274,
43.6394534198075
],
[-79.6974394413309,
43.6393984974797
],
[-79.6977214702725,
43.6396029481089
]
],
[
[-79.7037279098659,
43.6441816734685
],
[-79.7038116627627,
43.6442425378655
],
[-79.7043663390943,
43.6446488071586
],
[-79.7048680167224,
43.645024186195
],
[-79.7053904212546,
43.6454260322038
],
[-79.7059251921243,
43.6458354437457
],
[-79.7065612964782,
43.6461582999466
],
[-79.7065835802603,
43.6461492141531
],
[-79.7066775992172,
43.6462189758028
]
],
[
[-79.6973112420145,
43.6393143090171
],
[-79.6972862146857,
43.6393319663604
],
[-79.6971872210635,
43.6392588377729
],
[-79.6968127129063,
43.6395272639245
],
[-79.6966669835105,
43.6395263250713
],
[-79.6960609039152,
43.6399594999986
]
],
[
[-79.6960609039152,
43.6399594999986
],
[-79.6960181044663,
43.639990047741
]
],
[
[-79.7032573776668,
43.6438035217788
],
[-79.7032773647046,
43.6438182749637
],
[-79.7032968727787,
43.6438287137889
]
],
[
[-79.6982280590368,
43.6399996458065
],
[-79.6983123840689,
43.6400655275078
],
[-79.6988209765837,
43.6404574862051
],
[-79.6997681798983,
43.6411574341786
],
[-79.699722618622,
43.6411857721075
],
[-79.7003863588722,
43.641677233397
],
[-79.7008842734269,
43.6420484764154
],
[-79.7014070294285,
43.6424381587765
],
[-79.7024395226368,
43.643210754341
],
[-79.7029823771679,
43.643602976107
],
[-79.7032573776668,
43.6438035217788
]
]
]
}
}]
}html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>Upvotes: 2
Related Questions
- How to disable mouse scroll wheel scaling with Google Maps API
- Auto-center map with multiple markers in Google Maps API v3
- Google Maps API v3: How to remove all markers?
- Google Maps - addGeoJson is not working for my file
- How do I add hover boxes that display a .geojson property over a marker in Google Maps?
- Google Maps API Multiple Markers with Infowindows
- Different colors for each feature of a collection of features
- Google maps JS API V3,add multiple markers to map with infowindows from remote json source