Multiple polylines from XML - javascript

I want to display multiple polylines from an XML file:
<lines>
<line>
<linePoint lat="47.608940" lng="-122.340141"/>
<linePoint lat="47.613590" lng="-122.344391"/>
<linePoint lat="47.624561" lng="-122.356445"/>
</line>
<line>
<linePoint lat="47.616600" lng="-122.344491"/>
<linePoint lat="47.627661" lng="-122.356545"/>
</line>
</lines>
I believe that the script should iterate twice - the outer loop going through line elements and the inner loop going through linePoint elements within each line.
But it seems that my script dumps all 5 linePoint into a single polyline instead of creating 2 polylines.
downloadUrl("createXML.php", function(data) {
var xml = data.responseXML;
var line = xml.documentElement.getElementsByTagName("line");
// Read each line
for (var a = 0; a < line.length; a++) {
var linePoint = xml.documentElement.getElementsByTagName("linePoint");
var path = [];
// Read markers on each line
for (var i = 0; i < linePoint.length; i++) {
var lat = parseFloat(linePoint[i].getAttribute("lat"));
var lng = parseFloat(linePoint[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
path.push(point);
}
var polyline = new google.maps.Polyline({
path: path
});
polyline.setMap(map);
}
});
Can someone please point out what I'm overlooking?


Yes, that is because you just extract all <linePoint>'s in one chunk by getElementsByTagName("linePoint") (elements in plural). Iterate over <line>'s and for each <line> iterate over its <linePoint>'s :
function showPolyLines() {
var parser = new DOMParser();
var xml = parser.parseFromString(responseXML, "application/xml");
var line = xml.querySelectorAll("line");
for (var l = 0; l < line.length; l++) {
var path = [],
linePoints = line[l].querySelectorAll('linePoint');
for (var p = 0; p < linePoints.length; p++) {
var linePoint = linePoints[p],
lat = parseFloat(linePoint.getAttribute("lat")),
lng = parseFloat(linePoint.getAttribute("lng")),
point = new google.maps.LatLng(lat, lng);
path.push(point);
}
var polyline = new google.maps.Polyline({
path: path,
//just to be sure the lines actually is shown on the map :)
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
}
}
I am using a DOMParser to substitute xml.documentElement because I dont have a real responseXML in my fiddle test, but they are practically the same.
demo -> http://jsfiddle.net/9sqastj1/

Related

show or hide polyline as layer in leaflet

I have a JSON with different points. Each point has a different fields, like lon1 , lat1, lon2, lat2.
For each point I draw a line from point 1 to point 2.
By means of a for I perform this operation for each point and I draw different polylines in the map.
The problem is that when I activate or deactivate the layer, only the last drawn line is hidden, not all lines.
In the map you can see all the lines, but it seems that in the layer it overwrites and deletes the last line generated.
Code:
for (var i = 0; i < json_ARAPointsPRU_0.features.length; i++) {
var Lon1 = json_ARAPointsPRU_0.features[i].properties['Lon(d.dd)'];
var Lat1 = json_ARAPointsPRU_0.features[i].properties['Lat(d.dd)'];
var Lon2 = json_ARAPointsPRU_0.features[i].properties['LON2'];
var Lat2 = json_ARAPointsPRU_0.features[i].properties['LAT2'];
// array of coordinates
var mylatlngs = [
[Lat1, Lon1],
[Lat2, Lon2]
];
// draw a polyline in the map
var polilineas = L.polyline(mylatlngs, {
color: 'blue'
});
polilineas.addTo(map);
// add " polilineas" into other layer
var Velocidad2D = new L.LayerGroup();
Velocidad2D.addLayer(polilineas);
// Velocidad2D.addLayer(cabezas); Possibility to add arrow head
}
// Code to LAYER CONTROL
var gropedOverlayslehen = {
"Vel 2D": Velocidad2D
}
var layerControl = L.control.layers(basemaps, gropedOverlayslehen);
layerControl.addTo(map);

You need to put var Velocidad2D = new L.LayerGroup(); to the outside of the loop, else you overwrite it everytime.
var Velocidad2D = new L.LayerGroup();
for (var i = 0; i < json_ARAPointsPRU_0.features.length; i++) {
var Lon1 = json_ARAPointsPRU_0.features[i].properties['Lon(d.dd)'];
var Lat1 = json_ARAPointsPRU_0.features[i].properties['Lat(d.dd)'];
var Lon2 = json_ARAPointsPRU_0.features[i].properties['LON2'];
var Lat2 = json_ARAPointsPRU_0.features[i].properties['LAT2'];
// array of coordinates
var mylatlngs = [
[Lat1, Lon1],
[Lat2, Lon2]
];
// draw a polyline in the map
var polilineas = L.polyline(mylatlngs, {
color: 'blue'
});
polilineas.addTo(map);
// add " polilineas" into other layer
Velocidad2D.addLayer(polilineas);
// Velocidad2D.addLayer(cabezas); Possibility to add arrow head
}
// Code to LAYER CONTROL
var gropedOverlayslehen = {
"Vel 2D": Velocidad2D
}
var layerControl = L.control.layers(basemaps, gropedOverlayslehen);
layerControl.addTo(map);

Removing GeoJson Layers from Google Maps

I'm trying to remove an array of GeoJson layers from Google Maps using the turf.js library for smoothing of the poly-lines.
I can create the layer fine and add them to the map, but when I try and remove the layers I get the following error code:
Uncaught TypeError: a.getId is not a function
To add the layers I do this, looping through my GeoJson file...
else if(Type==="LineString" && Pype==="isobar") {
//DO ISOBARS STUFF=================================
//GET LNG/LAT======================================
CorrLEN = dataID1.features[i].geometry.coordinates.length;
var Corrds =[];
var Corrs =[];
var LNGLAT ={};
var CORRS = new Object();
var x=0;
for (x=0;x<CorrLEN;x++){
var a = x-1;
LNGLAT = (dataID1.features[i].geometry.coordinates[x]);
Corrds.push(LNGLAT);
}
//=================================================================
//GET COLOUR INFO===================================================
var STCL = dataID1.features[i].properties.strokeColor;
var STOP = dataID1.features[i].properties.strokeOpacity;
var STSW = dataID1.features[i].properties.strokeWeight;
//=================================================================
LL = turf.linestring(Corrds);
curved = turf.bezier(LL,20000, 0.35);
curved.properties = {weight:STSW,color:STCL};
map.data.setStyle(function(feature) {
return {strokeWeight:feature.getProperty('weight'),
strokeColor: feature.getProperty('color')
};
});
IsoBars.push(curved);
I then use the following functions to add or remove the layers
//SHOW ISOBARS (works fine)
function ShowIsoBars() {
for (var i = 0; i < IsoBars.length; i++) {
map.data.addGeoJson(IsoBars[i]);
}}
//HIDE ISOBARS (Gets the error) Uncaught TypeError: a.getId is not a function
function HideIsoBars() {
for (var i = 0; i < IsoBars.length; i++) {
map.data.remove(IsoBars[i]);
}}
Many thanks in advance,

I found a solution by taking the new smoothed coordinates and then using them in a new google.maps.Polyline like so
var Path =[];
var x=0;
for (x=0;x<CorrLEN;x++){
Path.push(new google.maps.LatLng(curved.geometry.coordinates[x][1],curved.geometry.coordinates[x][0]));
}
var IsoBar = new google.maps.Polyline({
path: Path,
geodesic: true,
strokeColor: STCL,
strokeOpacity: STOP,
strokeWeight: STSW
});
IsoBars.push(IsoBar);
And then I can use the the following functions to show or hide the layers
function ShowIsoBars() {
for (var i = 0; i < IsoBars.length; i++) {
IsoBars[i].setMap(map);
}}
function HideIsoBars() {
for (var i = 0; i < IsoBars.length; i++) {
IsoBars[i].setMap(null);
}}

I found rather than removing all objects from the layer. It was easier to destroy and recreate the layer, which circumvents the error:
//Remove layer from map if it exists
if (mapLayer != null) {
mapLayer.setMap(null);
}
//create new layer
mapLayer = new window.google.maps.Data({ map: googleMap });

Use GoogleMaps API from coordinates in a csv file in javascript

To be honest, I am not very familiar with JavaScript. But now I really need to use it to map a set of coordinates stored in my csv file, so I'll need JavaScript and GoogleMaps API.
The data I have in my csv is like this.
latitude1, longitude1, latitude2, longitude2, latitude3, longitude3, so on.
latitude1, longitude1, latitude2, longitude2, latitude3, longitude3, so on.
latitude1, longitude1, latitude2, longitude2, latitude3, longitude3, so on.
.......... so on.
Where each line represents a route and latitude-x and longitude-x represent a location. I hope you get my point.
I kind of mixed the code I got from w3school, google official site, stackoverflow and many others, then I modified it. And what I got so far is the following.
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
</head>
<body>
<input type="file" name="file" id="file">
<div id="googleMap" style="width:800px;height:580px;"></div>
<script type="text/javascript">
var coordinates = [];
document.getElementById('file').onload = function(){
var file = this.files[0];
var reader = new FileReader();
reader.onchange = function(progressEvent){
// Entire file
//console.log(this.result);
var lines = this.result.split('\n');
for(var line = 0; line < lines.length; line++){
var point = this.result.split(',');
var count =0;
for(var dua=0; dua<point.length; dua++){
if(dua%2==0){
var latitude = point[dua];
}else{
var longitude = point[dua];
coordinates[count] = new google.maps.LatLng(latitude+","+longitude);
console.log(coordinates[count]);
count++;
}
}
}
};
reader.readAsText(file);
};
function getCoor(){
return coordinates;
}
function initialize(){
var mapProp = {
center:new google.maps.LatLng(8.611911,41.146056),
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip = [];
var coordinates = getCoor();
for(var c=0; c<coordinates.length; c++){
myTrip += coordinates[c];
}
//console.log(myTrip);
var flightPath=new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:8
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
As you can see, I store the coordinates I got per line from my csv file to array coordinate[count]. Now I want every line of coordinate to be passed to the initialize() function so it can be processed through the API. But I am confused at this point, especially seeing how the file is read through its own function, and I can't pass it out. I hope you get what I mean, just drop a comment if you don't understand something. Thank you very much.

Using the file reader code from the answer to Chrome FileReader
you need to wait for the DOM to be rendered before searching it for elements (move anything using document.getElementById inside the initialize function).
You have issues with your code for processing the file contents, for one coordinates[count] = new google.maps.LatLng(latitude+","+longitude); is not valid, the google.maps.LatLng takes two numbers as arguments, not a comma separated string.
proof of concept fiddle
code snippet:
var map;
function getCoor() {
return coordinates;
}
function handle_files(files) {
for (i = 0; i < files.length; i++) {
file = files[i];
console.log(file);
var reader = new FileReader();
ret = [];
reader.onload = function(e) {
console.log(e.target.result);
var lines = e.target.result.split('\n');
var bounds = new google.maps.LatLngBounds();
for (var line = 0; line < lines.length; line++) {
var point = lines[line].split(',');
var count = 0;
var coordinates = [];
for (var dua = 0; dua < point.length; dua++) {
if (dua % 2 == 0) {
var latitude = point[dua];
} else {
var longitude = point[dua];
coordinates[count] = new google.maps.LatLng(latitude, longitude);
console.log(coordinates[count]);
count++;
}
}
var myTrip = [];
for (var c = 0; c < coordinates.length; c++) {
myTrip.push(coordinates[c]);
bounds.extend(coordinates[c]);
}
map.fitBounds(bounds);
//console.log(myTrip);
var flightPath = new google.maps.Polyline({
path: myTrip,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 8
});
flightPath.setMap(map);
}
}
reader.onerror = function(stuff) {
console.log("error", stuff);
console.log(stuff.getMessage());
}
reader.readAsText(file); //readAsdataURL
}
}
function initialize() {
var mapProp = {
center: new google.maps.LatLng(8.611911, 41.146056),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="file" name="file" id="file" onchange="handle_files(this.files)" />
<div id="googleMap"></div>
Test file contents with 2 entries:
40.712940,-74.007120,40.713080,-74.007220,40.713080,-74.007220,40.713810,-74.008820,40.713810,-74.008820,40.714360,-74.008380,40.714930,-74.007940,40.715440,-74.007540,40.716010,-74.007110,40.716540,-74.006680,40.717080,-74.006250,40.717680,-74.005770,40.718300,-74.005380,40.718300,-74.005380,40.718410,-74.005330,40.718630,-74.005240,40.718640,-74.005240,40.718670,-74.005220,40.718680,-74.005220,40.718690,-74.005220,40.718720,-74.005220,40.718850,-74.005190,40.719020,-74.005180,40.719400,-74.005180,40.719860,-74.005210,40.720630,-74.005210,40.720700,-74.005230,40.721040,-74.005260,40.721710,-74.005320,40.721830,-74.005350,40.721960,-74.005370,40.722070,-74.005400,40.722120,-74.005400,40.722160,-74.005400,40.722230,-74.005380,40.723010,-74.005070,40.723630,-74.004810,40.723630,-74.004810,40.723720,-74.005610,40.723750,-74.005900,40.723810,-74.006080,40.723830,-74.006150,40.723850,-74.006270,40.723870,-74.006360,40.723890,-74.006420,40.723910,-74.006470,40.723940,-74.006530,40.723970,-74.006600,40.724000,-74.006640,40.724070,-74.006740,40.724150,-74.006840,40.724210,-74.006900,40.724270,-74.006940,40.724300,-74.006970,40.724320,-74.006980,40.724350,-74.006990,40.724360,-74.006990,40.724380,-74.007000,40.724390,-74.007000,40.724400,-74.007000,40.724460,-74.006990,40.724510,-74.006990,40.724630,-74.007010,40.724630,-74.007010,40.724850,-74.006990,40.724920,-74.006980,40.725000,-74.006970,40.725120,-74.006970,40.725240,-74.007010,40.725330,-74.007060,40.725430,-74.007150,40.725510,-74.007230,40.725610,-74.007330,40.725690,-74.007460,40.725760,-74.007590,40.725810,-74.007730,40.725860,-74.007880,40.725900,-74.008020,40.725930,-74.008180,40.725950,-74.008340,40.726260,-74.011430,40.726300,-74.011640,40.726340,-74.011870,40.726370,-74.012150,40.726500,-74.013540,40.726640,-74.014940,40.726680,-74.015320,40.726720,-74.015620,40.727500,-74.020640,40.727580,-74.021110,40.727650,-74.021580,40.728380,-74.026090,40.728440,-74.026490,40.728500,-74.026920,40.728500,-74.026930,40.728870,-74.031050,40.728930,-74.031380,40.729020,-74.031750,40.729060,-74.031870,40.729110,-74.032100,40.729230,-74.032470,40.729370,-74.033000,40.729410,-74.033140,40.729410,-74.033150,40.729640,-74.033960,40.729650,-74.033980,40.729790,-74.034510,40.729800,-74.034520,40.729800,-74.034530,40.729860,-74.034750,40.729860,-74.034760,40.729870,-74.034770,40.730010,-74.035290,40.730080,-74.035500,40.730140,-74.035670,40.730200,-74.035800,40.730270,-74.035940,40.730350,-74.036070,40.730380,-74.036120,40.730450,-74.036210,40.730460,-74.036230,40.730570,-74.036370,40.730710,-74.036500,40.730780,-74.036580,40.730840,-74.036670,40.730910,-74.036780,40.730970,-74.036880,40.731040,-74.037000,40.731100,-74.037100,40.731150,-74.037210,40.731220,-74.037360,40.731320,-74.037580,40.731340,-74.037630,40.731360,-74.037680,40.731380,-74.037740,40.731390,-74.037800,40.731540,-74.039420,40.731560,-74.039510,40.731580,-74.039710,40.731600,-74.039940,40.731700,-74.041100,40.731810,-74.042300,40.731850,-74.042760,40.731870,-74.042990,40.731910,-74.043400,40.731940,-74.043670,40.731970,-74.043980,40.731990,-74.044160,40.732010,-74.044420,40.732030,-74.044570,40.732040,-74.044720,40.732040,-74.044880,40.732050,-74.045030,40.732050,-74.045180,40.732040,-74.045340,40.732030,-74.045480,40.732020,-74.045620,40.732000,-74.045760,40.731970,-74.045990,40.731960,-74.046090,40.731960,-74.046090,40.731910,-74.046430,40.731880,-74.046650,40.731810,-74.047300,40.731740,-74.047820,40.731650,-74.048410,40.731620,-74.048560,40.731590,-74.048730,40.731360,-74.049980,40.731360,-74.049980,40.731290,-74.050150,40.731270,-74.050200,40.731250,-74.050230,40.731230,-74.050330,40.731220,-74.050440,40.731210,-74.050550,40.731200,-74.050650,40.731200,-74.050770,40.731190,-74.050860,40.731200,-74.050940,40.731200,-74.051050,40.731210,-74.051160,40.731220,-74.051250,40.731230,-74.051340,40.731240,-74.051420,40.731260,-74.051490,40.731270,-74.051560,40.731290,-74.051630,40.731310,-74.051700,40.731340,-74.051800,40.731370,-74.051860,40.731400,-74.051950,40.731450,-74.052060,40.731490,-74.052160,40.731540,-74.052240,40.731580,-74.052310,40.731630,-74.052380,40.731710,-74.052500,40.731790,-74.052680,40.731890,-74.052780,40.731980,-74.052870,40.732480,-74.053450,40.733440,-74.054550,40.734440,-74.055700,40.735190,-74.056570,40.737140,-74.058820,40.737860,-74.059640,40.737930,-74.059730,40.737980,-74.059790,40.738090,-74.059950,40.738200,-74.060110,40.738290,-74.060260,40.738360,-74.060390,40.738370,-74.060430,40.738430,-74.060530,40.738470,-74.060630,40.738530,-74.060740,40.738590,-74.060880,40.738650,-74.061000,40.738670,-74.061040,40.738720,-74.061160,40.738770,-74.061280,40.738820,-74.061410,40.738880,-74.061560,40.738920,-74.061690,40.738970,-74.061840,40.739000,-74.061920,40.739020,-74.062010,40.739080,-74.062240,40.739080,-74.062260,40.739100,-74.062360,40.739110,-74.062370,40.739200,-74.062790,40.739290,-74.063340,40.739320,-74.064290,40.739340,-74.064650,40.739320,-74.064660,40.739310,-74.064680,40.739310,-74.064690,40.739310,-74.064700,40.739300,-74.064760,40.739300,-74.064830,40.739300,-74.064840,40.739290,-74.064920,40.739290,-74.064930,40.739280,-74.065360,40.739260,-74.065770,40.739250,-74.066090,40.739180,-74.067220,40.739170,-74.067460,40.739160,-74.067610,40.739120,-74.068440,40.739120,-74.068440,40.739090,-74.069190,40.739070,-74.069560,40.739060,-74.069820,40.739030,-74.070420,40.739010,-74.070670,40.739000,-74.070900,40.738980,-74.071080,40.738970,-74.071300,40.738950,-74.071470,40.738910,-74.071730,40.738880,-74.071960,40.738830,-74.072300,40.738770,-74.072670,40.738570,-74.073800,40.738540,-74.073960,40.738540,-74.073970,40.738460,-74.074400,40.738430,-74.074560,40.738360,-74.074930,40.738350,-74.074980,40.738310,-74.075160,40.738260,-74.075410,40.738260,-74.075420,40.738240,-74.075540,40.738220,-74.075600,40.738210,-74.075680,40.738140,-74.076030,40.738040,-74.076550,40.737950,-74.077020,40.737820,-74.077690,40.737790,-74.077870,40.737700,-74.078330,40.737680,-74.078460,40.737660,-74.078710,40.737470,-74.079660,40.737300,-74.080530,40.737150,-74.081330,40.737020,-74.081990,40.736950,-74.082550,40.736770,-74.083610,40.736550,-74.084760,40.736440,-74.085240,40.736390,-74.085460,40.736200,-74.086390,40.735650,-74.089390,40.735450,-74.090820,40.735360,-74.091750,40.735230,-74.093790,40.735150,-74.094670,40.735030,-74.095900,40.734940,-74.097020,40.734860,-74.097820,40.734710,-74.099750,40.734680,-74.100080,40.734660,-74.100270,40.734660,-74.100520,40.734650,-74.101200,40.734640,-74.101460,40.734620,-74.102070,40.734620,-74.102080,40.734620,-74.102090,40.734620,-74.102250,40.734610,-74.102640,40.734580,-74.104510,40.734570,-74.104710,40.734570,-74.104860,40.734570,-74.104890,40.734570,-74.104930,40.734570,-74.105130,40.734570,-74.105440,40.734570,-74.105710,40.734590,-74.106450,40.734610,-74.106740,40.734610,-74.106830,40.734610,-74.106880,40.734620,-74.107180,40.734640,-74.107610,40.734650,-74.107750,40.734660,-74.108010,40.734660,-74.108050,40.734690,-74.108780,40.734710,-74.109440,40.734710,-74.109450,40.734720,-74.109620,40.734790,-74.111330,40.734820,-74.112180,40.734830,-74.112510,40.734830,-74.112530,40.734830,-74.112560,40.734860,-74.113210,40.734890,-74.113960,40.734910,-74.114600,40.734940,-74.115310,40.734970,-74.116090,40.735010,-74.117010,40.735030,-74.117830,40.735060,-74.118360,40.735100,-74.119520,40.735130,-74.120390,40.735160,-74.120930,40.735160,-74.121140,40.735170,-74.121360,40.735170,-74.121660,40.735170,-74.121810,40.735160,-74.121980,40.735160,-74.122090,40.735150,-74.122210,40.735150,-74.122330,40.735140,-74.122460,40.735120,-74.122600,40.735110,-74.122740,40.735100,-74.122870,40.735090,-74.122950,40.735080,-74.123020,40.735050,-74.123220,40.735030,-74.123400,40.735000,-74.123540,40.735000,-74.123560,40.734990,-74.123580,40.734970,-74.123690,40.734970,-74.123720,40.734960,-74.123770,40.734930,-74.123900,40.734880,-74.124150,40.734870,-74.124180,40.734860,-74.124210,40.734830,-74.124340,40.734830,-74.124350,40.734800,-74.124440,40.734800,-74.124450,40.734690,-74.124840,40.734690,-74.124840,40.734680,-74.124870,40.734660,-74.125040,40.734650,-74.125130,40.734650,-74.125200,40.734650,-74.125260,40.734650,-74.125370,40.734650,-74.125480,40.734660,-74.125550,40.734680,-74.125690,40.734710,-74.125860,40.734750,-74.126020,40.734780,-74.126120,40.734780,-74.126150,40.734790,-74.126170,40.734800,-74.126240,40.734810,-74.126270,40.734820,-74.126330,40.734840,-74.126420,40.734860,-74.126490,40.734870,-74.126560,40.734890,-74.126640,40.734900,-74.126720,40.734910,-74.126810,40.734920,-74.126900,40.734930,-74.126980,40.734940,-74.127070,40.734950,-74.127160,40.734960,-74.127250,40.734960,-74.127310,40.734970,-74.127380,40.734970,-74.127450,40.734970,-74.127510,40.734970,-74.127640,40.734970,-74.127780,40.734950,-74.128310,40.734940,-74.128380,40.734940,-74.128410,40.734940,-74.128460,40.734900,-74.129180,40.734780,-74.132380,40.734770,-74.132460,40.734750,-74.132540,40.734740,-74.132590,40.734730,-74.132640,40.734710,-74.132700,40.734690,-74.132760,40.734660,-74.132830,40.734640,-74.132890,40.734610,-74.132950,40.734590,-74.132990,40.734550,-74.133040,40.734520,-74.133090,40.734480,-74.133150,40.734420,-74.133220,40.734360,-74.133290,40.734180,-74.133510,40.734180,-74.133510,40.734150,-74.134250,40.734040,-74.136610,40.734040,-74.136650,40.734030,-74.137080,40.733960,-74.138610,40.733940,-74.139140,40.733940,-74.139340,40.733920,-74.139820,40.733920,-74.139860,40.733870,-74.140800,40.733840,-74.141460,40.733820,-74.141920,40.733780,-74.142650,40.733770,-74.142920,40.733750,-74.143540,40.733730,-74.143810,40.733710,-74.144440,40.733690,-74.144870,40.733670,-74.145320,40.733660,-74.145490,40.733660,-74.145520,40.733610,-74.145720,40.733490,-74.146120,40.733400,-74.146400,40.733260,-74.146950,40.733160,-74.147290,40.733000,-74.147850,40.732910,-74.148170,40.732860,-74.148310,40.732750,-74.148730,40.732730,-74.148830,40.732720,-74.148910,40.732720,-74.149000,40.732730,-74.149080,40.732700,-74.149860,40.732690,-74.150260,40.732710,-74.152170,40.732720,-74.152520,40.732720,-74.153410,40.732720,-74.154010,40.732720,-74.154100,40.732720,-74.155040,40.732720,-74.155190,40.732720,-74.155240,40.732710,-74.155260,40.732710,-74.155280,40.732710,-74.155690,40.732680,-74.156740,40.732670,-74.157230,40.732680,-74.157480,40.732670,-74.157690,40.732690,-74.158220,40.732710,-74.158570,40.732770,-74.158970,40.732830,-74.159310,40.732900,-74.159620,40.732960,-74.159970,40.733050,-74.160350,40.733080,-74.160530,40.733180,-74.160920,40.733180,-74.160920,40.733160,-74.161140,40.733140,-74.161240,40.733140,-74.161310,40.733150,-74.161370,40.733150,-74.161410,40.733160,-74.161460,40.733170,-74.161500,40.733190,-74.161540,40.733210,-74.161580,40.733240,-74.161740,40.733240,-74.161760,40.733240,-74.161780,40.733250,-74.161790,40.733250,-74.161820,40.733240,-74.161890,40.733290,-74.162120,40.733480,-74.162940,40.733690,-74.163770,40.733740,-74.163980,40.733770,-74.164130,40.733840,-74.164480,40.733940,-74.164920,40.734050,-74.165420,40.734080,-74.165540,40.734130,-74.165790,40.734140,-74.165840,40.734150,-74.165880,40.734160,-74.165960,40.734170,-74.166000,40.734260,-74.166450,40.734540,-74.167850,40.734590,-74.168090,40.734670,-74.168530,40.734740,-74.168920,40.734820,-74.169290,40.734850,-74.169520,40.734880,-74.169690,40.734940,-74.169930,40.735160,-74.170720,40.735500,-74.171870,40.735530,-74.171970,40.735550,-74.172050,40.735600,-74.172190,40.735650,-74.172370
38.9847,-77.09429,38.98442,-77.09424,38.98435,-77.09422,38.98426,-77.09419,38.9841,-77.09413,38.98372,-77.09398,38.9836,-77.09393,38.98324,-77.09378,38.98303,-77.09368,38.98267,-77.09349,38.98262,-77.09347,38.98261,-77.09346,38.9825,-77.09341,38.98221,-77.09328,38.98186,-77.09312,38.98132,-77.09285,38.98105,-77.09273,38.98062,-77.0925,38.98004,-77.0922,38.97925,-77.09182,38.97881,-77.09159,38.97847,-77.09141,38.97835,-77.09136,38.97775,-77.09107,38.97753,-77.09095,38.97723,-77.09081,38.97713,-77.09075,38.97656,-77.09047,38.97639,-77.09039,38.97584,-77.09024,38.97568,-77.0902,38.97547,-77.09015,38.97458,-77.08997,38.97365,-77.08979,38.97356,-77.08978,38.97283,-77.08967,38.97221,-77.08958,38.97131,-77.08943,38.97049,-77.0893,38.96957,-77.08917,38.96853,-77.08899,38.9684,-77.08897,38.9676,-77.08883,38.96738,-77.08877,38.96722,-77.08874,38.96692,-77.08866,38.96667,-77.08859,38.96623,-77.08844,38.96617,-77.08842,38.96599,-77.08834,38.96545,-77.0881,38.96537,-77.08805,38.96459,-77.08768,38.96447,-77.08762,38.96437,-77.08758,38.96377,-77.08729,38.9634,-77.0871,38.96277,-77.08677,38.96246,-77.08659,38.96192,-77.08632,38.96158,-77.08615,38.96149,-77.08611,38.96075,-77.0858,38.9607,-77.08569,38.96063,-77.08566,38.96015,-77.08541,38.96009,-77.08538,38.95974,-77.0852,38.9597,-77.08518,38.95964,-77.08515,38.95952,-77.0851,38.95949,-77.08508,38.95941,-77.08504,38.95904,-77.08485,38.95803,-77.08433,38.95712,-77.08387,38.95702,-77.08382,38.95617,-77.08338,38.95595,-77.08327,38.95531,-77.08294,38.9547,-77.08263,38.95461,-77.08259,38.95382,-77.08218,38.9534,-77.08197,38.95332,-77.08194,38.95323,-77.08188,38.95293,-77.08173,38.95252,-77.08152,38.95207,-77.08128,38.95147,-77.08097,38.95114,-77.0808,38.95111,-77.08079,38.95105,-77.08077,38.95088,-77.0807,38.9508,-77.08067,38.95071,-77.08064,38.9506,-77.08061,38.95048,-77.08058,38.95021,-77.08052,38.94988,-77.08041,38.9498,-77.0804,38.94975,-77.08039,38.94968,-77.08039,38.94927,-77.0803,38.94914,-77.08027,38.94887,-77.0802,38.94878,-77.08017,38.94875,-77.08016,38.94871,-77.08015,38.94863,-77.0801,38.94848,-77.08001,38.94842,-77.07997,38.94835,-77.07994,38.94807,-77.07977,38.94793,-77.07968,38.94774,-77.07957,38.94755,-77.07947,38.94747,-77.07943,38.94708,-77.07921,38.94688,-77.0791,38.94651,-77.0789,38.94651,-77.0789,38.94649,-77.07894,38.94646,-77.07897,38.94643,-77.07901,38.94641,-77.07903,38.94637,-77.07906,38.94634,-77.07908,38.94632,-77.0791,38.9463,-77.07911,38.94628,-77.07912,38.94625,-77.07913,38.94622,-77.07913,38.94619,-77.07913,38.94615,-77.07913,38.94611,-77.07912,38.94611,-77.07912,38.94603,-77.07913,38.94599,-77.07913,38.94595,-77.07914,38.94591,-77.07915,38.94588,-77.07916,38.94585,-77.07918,38.94582,-77.0792,38.94565,-77.0793,38.94562,-77.07932,38.94519,-77.07969,38.9451,-77.07981,38.9448,-77.08006,38.9447,-77.08014,38.94456,-77.08025,38.94435,-77.08041,38.94422,-77.08052,38.94367,-77.081,38.94348,-77.08116,38.94335,-77.08127,38.94318,-77.08141,38.9429,-77.08164,38.94288,-77.08166,38.94252,-77.08197,38.9424,-77.08207,38.94232,-77.08214,38.9422,-77.08224,38.94199,-77.08242,38.9418,-77.0826,38.94153,-77.08282,38.94142,-77.08292,38.94131,-77.08302,38.9412,-77.08311,38.94087,-77.08338,38.9408,-77.08345,38.94069,-77.08355,38.94035,-77.08385,38.9402,-77.08398,38.93996,-77.08418,38.93967,-77.08442,38.93932,-77.08471,38.9389,-77.08509,38.93883,-77.08514,38.93883,-77.08515,38.93876,-77.0852,38.93872,-77.08524,38.9385,-77.0854,38.9384,-77.08553,38.93838,-77.08556,38.93835,-77.0856,38.93833,-77.08563,38.9383,-77.08567,38.93827,-77.08573,38.93827,-77.08573,38.93828,-77.08577,38.93828,-77.08579,38.93828,-77.08579,38.93828,-77.08587,38.93828,-77.08591,38.93827,-77.08598,38.93826,-77.08603,38.93825,-77.08607,38.93824,-77.08611,38.93822,-77.08614,38.93821,-77.08616,38.9382,-77.08618,38.93819,-77.0862,38.93817,-77.08622,38.93816,-77.08624,38.93814,-77.08625,38.93813,-77.08626,38.93812,-77.08628,38.93809,-77.0863,38.93805,-77.08633,38.938,-77.08636,38.93797,-77.08637,38.93794,-77.08638,38.93791,-77.08639,38.93791,-77.08639,38.93788,-77.08639,38.93783,-77.08638,38.9378,-77.08636,38.93775,-77.08634,38.93772,-77.08632,38.93769,-77.0863,38.93764,-77.08627,38.93757,-77.08608,38.93757,-77.08608,38.93757,-77.08605,38.93756,-77.08602,38.93755,-77.08598,38.93755,-77.08598,38.93755,-77.08594,38.93754,-77.08589,38.93753,-77.08584,38.93753,-77.0858,38.93753,-77.08576,38.93753,-77.08571,38.93753,-77.08566,38.93753,-77.08562,38.93753,-77.08558,38.93752,-77.08554,38.93751,-77.08549,38.93749,-77.08543,38.93747,-77.08538,38.93745,-77.08534,38.93743,-77.0853,38.9374,-77.08525,38.93732,-77.08508,38.93704,-77.08472,38.93698,-77.08464,38.93697,-77.08462,38.93688,-77.08451,38.93674,-77.08431,38.93671,-77.08427,38.93669,-77.08424,38.93656,-77.08407,38.93645,-77.08392,38.93626,-77.08366,38.93608,-77.08341,38.93607,-77.08339,38.93565,-77.08282,38.93511,-77.08207,38.9351,-77.08206,38.93496,-77.08188,38.93471,-77.08154,38.93462,-77.08142,38.93415,-77.0808,38.934,-77.08058,38.93377,-77.08026,38.93355,-77.07994,38.93352,-77.0799,38.93344,-77.07978,38.93286,-77.079,38.93278,-77.07888,38.93253,-77.07854,38.93208,-77.07791,38.93196,-77.07776,38.93173,-77.07744,38.9315,-77.07712,38.93147,-77.07708,38.93146,-77.07707,38.9314,-77.07701,38.93131,-77.07687,38.93093,-77.07635,38.93018,-77.07534,38.92988,-77.07492,38.92975,-77.07473,38.92965,-77.0746,38.92932,-77.07413,38.92912,-77.07386,38.9291,-77.07383,38.92902,-77.07372,38.92891,-77.07358,38.92886,-77.07352,38.92876,-77.07338,38.92873,-77.07334,38.92861,-77.07318,38.92828,-77.07273,38.92777,-77.07201,38.92753,-77.07167,38.92744,-77.07155,38.92713,-77.07114,38.92695,-77.07089,38.92639,-77.07013,38.92617,-77.06984,38.92607,-77.0697,38.92585,-77.06939,38.92561,-77.06907,38.92534,-77.06869,38.92476,-77.06789,38.92471,-77.06783,38.92468,-77.06777,38.92464,-77.06771,38.92461,-77.06765,38.92459,-77.06761,38.92457,-77.06757,38.92454,-77.06751,38.92451,-77.06744,38.92449,-77.06737,38.92447,-77.06732,38.92445,-77.06726,38.92443,-77.0672,38.92441,-77.06714,38.9244,-77.06707,38.92439,-77.06702,38.92438,-77.06697,38.92437,-77.06692,38.92436,-77.06684,38.9243,-77.06661,38.92429,-77.06651,38.92428,-77.06636,38.92426,-77.06623,38.92424,-77.06614,38.92422,-77.06604,38.9242,-77.06594,38.92417,-77.06584,38.92415,-77.06575,38.92412,-77.06566,38.92409,-77.06556,38.92406,-77.06547,38.92401,-77.06535,38.92396,-77.06524,38.92393,-77.06516,38.92389,-77.06509,38.92385,-77.065,38.9238,-77.06492,38.92376,-77.06484,38.92371,-77.06475,38.92366,-77.06467,38.92362,-77.0646,38.92358,-77.06455,38.92352,-77.06447,38.92347,-77.0644,38.9234,-77.06433,38.92335,-77.06426,38.9233,-77.0642,38.92324,-77.06414,38.92318,-77.06408,38.9231,-77.06401,38.92305,-77.06396,38.92299,-77.06391,38.92293,-77.06386,38.92287,-77.06382,38.9228,-77.06376,38.92272,-77.06372,38.92264,-77.06367,38.92257,-77.06362,38.92249,-77.06358,38.9224,-77.06354,38.92233,-77.06351,38.92227,-77.06348,38.92219,-77.06345,38.92213,-77.06343,38.92206,-77.06341,38.92201,-77.0634,38.92195,-77.06338,38.92189,-77.06337,38.92183,-77.06336,38.92177,-77.06334,38.92172,-77.06333,38.92166,-77.06331,38.92159,-77.06328,38.92153,-77.06326,38.92146,-77.06321,38.9214,-77.06317,38.92134,-77.06314,38.92128,-77.0631,38.92121,-77.06297,38.92117,-77.06294,38.92112,-77.06288,38.92108,-77.06284,38.92104,-77.06279,38.92099,-77.06273,38.92091,-77.06262,38.91865,-77.05954,38.91847,-77.05929,38.91841,-77.0592,38.91837,-77.05914,38.91833,-77.05909,38.91831,-77.05905,38.91827,-77.05901,38.9182,-77.05892,38.91803,-77.05869,38.91779,-77.05839,38.91745,-77.05791,38.91709,-77.0574,38.91705,-77.05736,38.91703,-77.05732,38.91662,-77.05677,38.91551,-77.05525,38.91404,-77.05324,38.91362,-77.05266,38.91329,-77.05221,38.91271,-77.05142,38.91259,-77.05132,38.91252,-77.05123,38.9125,-77.0512,38.91248,-77.05117,38.91245,-77.05114,38.91243,-77.05112,38.9124,-77.05109,38.91237,-77.05107,38.91234,-77.05106,38.9123,-77.05105,38.91227,-77.05105,38.91225,-77.05105,38.91225,-77.05105,38.9122,-77.05104,38.91216,-77.05104,38.91212,-77.05104,38.91209,-77.05103,38.91206,-77.05102,38.91204,-77.05101,38.91201,-77.051,38.91199,-77.05098,38.91197,-77.05096,38.91194,-77.05093,38.91193,-77.05091,38.9119,-77.05088,38.91188,-77.05084,38.91187,-77.0508,38.91186,-77.05075,38.91185,-77.05072,38.91185,-77.0507,38.91185,-77.05066,38.91185,-77.05061,38.91186,-77.05056,38.91188,-77.0505,38.91189,-77.05046,38.91191,-77.05042,38.91191,-77.05039,38.91192,-77.05036,38.91193,-77.05033,38.91193,-77.05028,38.91194,-77.05022,38.91194,-77.05018,38.91193,-77.05013,38.91192,-77.05009,38.91191,-77.05005,38.91186,-77.04993,38.91181,-77.04969,38.91158,-77.049,38.91151,-77.04881,38.91147,-77.04869,38.91112,-77.0477,38.91075,-77.04663,38.91054,-77.04601,38.91043,-77.0457,38.91014,-77.04488,38.91009,-77.04473,38.90995,-77.04447,38.90991,-77.04435,38.90989,-77.04432,38.90987,-77.04429,38.90985,-77.04426,38.90979,-77.04421,38.90976,-77.04418,38.90973,-77.04416,38.90971,-77.04415,38.90969,-77.04414,38.90966,-77.04414,38.90963,-77.04413,38.90963,-77.04413,38.9096,-77.04413,38.90955,-77.04411,38.90952,-77.0441,38.90949,-77.04409,38.90946,-77.04407,38.90943,-77.04406,38.9094,-77.04404,38.90937,-77.04402,38.90934,-77.04399,38.90932,-77.04397,38.90929,-77.04394,38.90926,-77.04391,38.90924,-77.04387,38.90921,-77.04384,38.9092,-77.04381,38.90918,-77.04378,38.90917,-77.04374,38.90915,-77.04369,38.90914,-77.04364,38.90913,-77.04359,38.90912,-77.04355,38.90911,-77.0435,38.90911,-77.04345,38.90911,-77.0434,38.90912,-77.04335,38.90912,-77.04331,38.90913,-77.04327,38.90915,-77.04322,38.90917,-77.04315,38.90918,-77.0431,38.9092,-77.04306,38.90923,-77.04302,38.90925,-77.04298,38.90927,-77.04295,38.90928,-77.04292,38.90929,-77.04289,38.9093,-77.04286,38.90931,-77.04282,38.9093,-77.04278,38.9093,-77.04278,38.90931,-77.04265,38.90931,-77.04261,38.90931,-77.04258,38.90931,-77.04256,38.9093,-77.04253,38.90925,-77.04239,38.90919,-77.04212,38.90904,-77.0417,38.90852,-77.04021,38.90843,-77.03995,38.90826,-77.03946,38.90818,-77.03923,38.90812,-77.03906,38.90801,-77.03875,38.90793,-77.0385,38.90773,-77.03792,38.90763,-77.03765,38.90762,-77.03762,38.90754,-77.03741,38.90747,-77.03735,38.90731,-77.03709,38.90726,-77.03698,38.90726,-77.03698,38.90723,-77.03699,38.90716,-77.03691

How would I go about iterating over this JSON data

I'm pulling in the below json data from a database using ajax.
{"route":[{"latitude":-27.38851,"longitude":153.11606},{"latitude":-27.47577,"longitude":153.01693}]}
How would I got about iterating over it to get lat/long pairs to plot on a map?

Assign the JSON data to a variable, and loop through the route object like below:
var j = {"route":[{"latitude":-27.38851,"longitude":153.11606},{"latitude":-27.47577,"longitude":153.01693}]}
for(i=0; i<=j.route.length; i++){
var thisRoute = j.route[i];
}

Give it a try:
var j = {"route":[{"latitude":-27.38851,"longitude":153.11606},{"latitude":-27.47577,"longitude":153.01693}]};
for(var i= 0,len=j.route.length; i<len; i++){
var lat = j.route[i].latitude;
var long = j.route[i].longitude;
console.log(lat+' '+long);
}

var o = {"route":[{"latitude":-27.38851,"longitude":153.11606},{"latitude":-27.47577,"longitude":153.01693}]};
var i = 0;
var lat, long;
var len=o.route.length;
for(i,i<len; i++){
lat = o.route[i].latitude;
long = o.route[i].longitude;
console.log(lat+' '+long);
}

Here's a full implementation of what you're trying to achieve:
JSFIddle with a map
function createMarker(options) {
var marker = new google.maps.Marker(options);
return marker;
}
for (i = 0; i < data.route.length; i++) {
createMarker({
position: new google.maps.LatLng(data.route[i].latitude, data.route[i].longitude),
map: map
});

Can't remove MVCArray/Polylines using Google Maps API V3

I have an MVCArray to store my polyline path in, but I need to clear the MVCArray when the user changes their selection. Relevant code is below.
routePoints = new google.maps.MVCArray();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
markersArray = eval("(" + xmlhttp.responseText + ")");
removeLines();
for (var i = 0; i < markersArray.length; i++) {
var address = new google.maps.LatLng(markersArray[i][0], markersArray[i][1]);
routePoints.insertAt(routePoints.length, address);
}
routePath = new google.maps.Polyline({
path: routePoints,
strokeOpacity: 1.0,
strokeWeight: 2,
map: map,
});
}
}
The removeLines() function is below. I have tried many different versions of this function (while loop, routePoints.pop(), setting routePoints.length to 0), but nothing has cleared the MVCArray. The polylines are being displayed correctly by the way, but once a user changes their selection I need the previous polylines to be removed from the map. Thanks in advance.
function removeLines() {
if (routePoints) {
for (var i=0; i < routePoints.length; i++) {
routePoints.removeAt(i);
}
}
}

to delete all mvcarray elements:
routePoints.clear();

So routePoints is just an array of LatLng objects, not individual polylines. I think you probably need a separate array for the polylines, which you can then loop over to remove them all.
If you want to remove visible polylines, you can just call the setMap() function, passing it null.
routePoints = new google.maps.MVCArray();
var polylines = []; // new array for the polylines, needs to be a global variable
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
markersArray = eval("(" + xmlhttp.responseText + ")");
removeLines();
for (var i = 0; i < markersArray.length; i++) {
var address = new google.maps.LatLng(markersArray[i][0], markersArray[i][1]);
routePoints.insertAt(routePoints.length, address);
}
routePath = new google.maps.Polyline({
path: routePoints,
strokeOpacity: 1.0,
strokeWeight: 2,
map: map,
});
// add the polyline to the array
polylines.push(routePath);
}
}
function removeLines() {
for (var i=0; i < polylines.length; i++) {
polylines[i].setMap(null);
}
// you probably then want to empty out your array as well
polylines = [];
// not sure you'll require this at this point, but if you want to also clear out your array of coordinates...
routePoints.clear();
}

Categories

Resources