Titanium Community Questions & Answer Archive

Question

Google Maps Kml into titanium?

there is any chance to import the KML url (MyMaps) into titanium? i can do it using the google api, so i was wondering if there is a way to do for the iphone using titnium.
thanks

Answer 1

Since I found out that it is not possible to parse a kml file directly, I used some other tricks. Here is my code, hopefully this solves your problem.

//CODE to add markers on mapView source within kml file (mobile sdk version 1.3.2)

var win = Titanium.UI.createWindow({
});

var widthphone = Titanium.Platform.displayCaps.platformWidth;
var heightphone = Titanium.Platform.displayCaps.platformHeight;

var mapview = Titanium.Map.createView({
mapType: Titanium.Map.SATELLITE_TYPE,
region: {latitude:50, longitude:4, latitudeDelta:8, longitudeDelta:8},
animate:true,
regionFit:true,
userLocation:true,
bottom:50,
});

var webloader = Titanium.UI.createWebView({
url:'loader.html',
top:0,
visible:false,//THIS IS IMPORTANT
});

win.add(webloader);
win.add(mapview);
win.open();

var xhr = Ti.Network.createHTTPClient();
xhr.open("GET","insert_your_kmlfile_url_here");
xhr.onload = function()
{
var filename = "data.xml";//download the kml file and save it locally as data.xml
var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,filename);
f.write(this.responseData);
Ti.API.info('File downloaded '+f.nativePath);
var path = f.nativePath;

Ti.App.fireEvent('launcher', {path:path});//This fires an event in loader.html

};
xhr.send();

Ti.App.addEventListener('addmarkers', function(f)
{
Ti.API.info('LAT '+f.lat);
Ti.API.info('LON '+f.lon);

    var marker = Titanium.Map.createAnnotation({
    latitude:f.lat,
    longitude:f.lon,
    title:'TEST',
    pincolor:Titanium.Map.ANNOTATION_RED,
    animate:true,
    });

    mapview.addAnnotation(marker);

}

);

///code from loader.html
<html>
<script>
Ti.App.addEventListener('launcher', function(e)
{

var dataxml = e.path;//receives nativepath info from data.xml file
Ti.API.info('data path '+e.path);

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", dataxml,false);
xmlhttp.onreadystatechange = dataHandle;

function dataHandle() {
    if (xmlhttp.readyState == 4)
    {
    var doc = this.responseXML.documentElement;
    var placemarks = doc.getElementsByTagName("Placemark");
    Ti.API.info(placemarks.length);

    if(placemarks.length>0)
    {        

    for (var k=0;k<placemarks.length;k++)
        {    

        var coord1 = placemarks.item(k).getElementsByTagName("coordinates");
        var coord2 = coord1(0).firstChild.nodeValue;

        var split = new Array();
        split = coord2.split(',');

        var lon = parseFloat(split[0]);
        var lat = parseFloat(split[1]);

            Ti.API.info('LAT '+lat+'LON '+lon);

        Ti.App.fireEvent('addmarkers', {lat:lat, lon:lon});


        }
    }

    }

}

xmlhttp.send();
}

);
</script>
<body>
</body>
</html>

Answer 2

Hi Rudy,

I followed this code exactly and I can get the map to load, but I cant seem to get it to load the KML file… if you go to maps.google.com and paste this link:

https://Merchants.PayCashNow.com/MerchantPortal-v1/FindRetailers.aspx?MerchantID=PCN-TestMerchant&TargetAddress=tulsa&Format=KML

The data is displayed correctly on maps.google.com but not for my mobile app.

Anyone have any idea of how to load this kml correctly into appcelerator's mobile google maps?

Answer 3

Here is what I use to create routes on my map. I think it is what you are looking for, just have to change the kml nodes that you are looking for ;)

Answer 4

Here an KML-Parser: https://github.com/AppWerft/Botanischer-Garten-Hamburg/blob/master/Resources/vendor/KMLTools.js

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Google Maps Kml into titanium?

4 Answers