Created
March 29, 2011 17:02
-
-
Save ordinz/892758 to your computer and use it in GitHub Desktop.
Convert a remote Google KML file to Appcelerator MapView Routes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var url = "http://maps.google.com/maps/ms?ie=UTF&msa=0&msid=217110902183005084784.00049d962454fabcabdc2&output=kml"; | |
| //Add routes from a remote KML file to one map | |
| goog.maps.kml.addRoutesToMap(mySingleMap, url); | |
| //Multiple Maps | |
| goog.maps.kml.addRoutesToMap([myGoogleMap1, myGoogleMap2], url); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var goog = { | |
| maps: { | |
| kml: {} | |
| } | |
| }; | |
| (function(){ | |
| goog.maps.kml.addRoutesToMap = function(maps, url){ | |
| var xhr = Titanium.Network.createHTTPClient(); | |
| xhr.open('GET', url); | |
| xhr.onload = function(){ | |
| var kml = goog.maps.kml.parse(this.responseXML); | |
| if( typeof(maps) && !(maps.length > 0) ){ maps = [maps]; } | |
| for(var m=0;m<maps.length;m++){ | |
| goog.maps.kml.addRoutes(maps[m], kml); | |
| } | |
| }; | |
| xhr.send(); | |
| }; | |
| goog.maps.kml.addRoutes = function(map, kml){ | |
| var route, line, points, coords, coords_length, loc, styleId; | |
| for(var pm=0; pm<kml.placeMarksLength; pm++){ | |
| points = []; | |
| placeMark = kml.placeMarks.item(pm); | |
| line = placeMark.getElementsByTagName('LineString').item(0); | |
| coords = line.getElementsByTagName('coordinates').item(0).text.split(" "); | |
| coords_length = coords.length; | |
| for(var cc=0; cc<coords_length; cc++){ | |
| loc = coords[cc].split(','); | |
| if(loc[0] && loc[1]) { | |
| points.push({latitude: loc[1], longitude: loc[0]}); | |
| } | |
| } | |
| styleId = /#(.*)/.exec(placeMark.getElementsByTagName('styleUrl').item(0).text)[1]; | |
| route = { | |
| name: placeMark.getElementsByTagName('name').item(0).text, | |
| points: points, | |
| color: '#' + kml.styles[styleId].color,//make sure this is a websafe color or else the color will be picked for you. | |
| width: kml.styles[styleId].width | |
| }; | |
| map.addRoute(route); | |
| } | |
| }; | |
| goog.maps.kml.parse = function(xml){ | |
| var kml = { | |
| xml: xml, | |
| styles: goog.maps.kml.getStyles(xml), | |
| placeMarks: goog.maps.kml.getPlaceMarks(xml) | |
| }; | |
| kml.stylesLength = kml.styles.length; | |
| kml.placeMarksLength = kml.placeMarks.length; | |
| return kml; | |
| }; | |
| goog.maps.kml.getStyles = function(xml){ | |
| var styles = xml.documentElement.getElementsByTagName("Style"); | |
| var stylesLength = styles.length; | |
| var style, lineStyle, params; | |
| var stylesCollection = {}; | |
| for(var i=0;i<stylesLength;i++){ | |
| lineStyle = styles.item(i).getElementsByTagName('LineStyle').item(0); | |
| style = styles.item(i).attributes.item(0).text; //gets the ID attribute | |
| stylesCollection[style] = { | |
| color: lineStyle.getElementsByTagName('color').item(0).text, | |
| width: lineStyle.getElementsByTagName('width').item(0).text | |
| }; | |
| } | |
| return stylesCollection; | |
| }; | |
| goog.maps.kml.getPlaceMarks = function(xml){ | |
| return xml.documentElement.getElementsByTagName("Placemark"); | |
| }; | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This should work on any KML file produced from Google Maps. Take any map url and add the &output=kml.
Make sure your route colors are web safe