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.
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>