You must Login before you can answer or rate any questions.

Populate mapView with data from JSON

0

I am trying to add locations to a map using JSON and I need some help. I'm using SumitK's example to pull in a Drupal JSON service for tableViews. I'm trying to modify it for map annotations but am having issues. Below is what I have so far.

Could anyone give me some pointers?

var url = 'http://localhost:8888/class-services/services/json';
 
var win = Titanium.UI.currentWindow;
win.backgroundColor = '#dce0e4';
 
var data = [];
 
 
var view = new Object;
view.method = 'views.get';
view.view_name = 'autos';
 
var xhr = Titanium.Network.createHTTPClient();
xhr.open("POST",url);
 
xhr.send({data: JSON.stringify(view)});
 
xhr.onload = function() {
 
  Ti.API.info(this.responseText);
 
  var data = JSON.parse(this.responseText);
 
  Ti.API.info(data);
 
for (var c=0;c<data.length;c++)
{
 
    var mountainView = Titanium.Map.createAnnotation({
        latitude:data[c]['lat'],
        longitude:data[c]['long'],
        title:data[c]['title'],
        subtitle:data[c]['street_address'],
        pincolor:Titanium.Map.ANNOTATION_RED,
        animate:true,
        leftButton: 'images/appcelerator_small.png',
        myid:1
    });
}
 
}
 
var lat = '';
var lon = '';
 
Titanium.Geolocation.getCurrentPosition(function(e) {
        lat = e.coords.latitude;
        lon = e.coords.longitude;
 
    var mapview = Titanium.Map.createView({
        mapType: Titanium.Map.STANDARD_TYPE,
        region: {latitude:lat, longitude:lon, 
                latitudeDelta:0.01, longitudeDelta:0.01},
        animate:true,
        regionFit:true,
        userLocation:true,
        annotations:[mountainView]
    });
 
    // add table view to the window
    Titanium.UI.currentWindow.add(mapview);
 
});

6 Answers

0

I feel like an idiot! Its mapview.setAnnotations not mapview.addAnnotation. I kept going over the code and wondering why only 1 location was being added. Below is the section of code for adding the points. Thanks for all the feedback.

mapview = Titanium.Map.createView({
        mapType: Titanium.Map.STANDARD_TYPE,
        animate:true,
        userLocation:true,
        region: {latitude:lat, longitude:lng,      
               latitudeDelta:0.01, longitudeDelta:0.01},
        regionFit:true
    });
    mapview.setAnnotations(points);
 
var points = [];
for (var c=0; c<data.length; c++) {
        points[c] = Titanium.Map.createAnnotation({
            latitude:data[c].lat,
            longitude:data[c].lng,
            title:data[c].title, 
            subtitle:data[c].subtitle, 
            pincolor:Titanium.Map.ANNOTATION_PURPLE,
            animate:true,
            myid:c
        });
    }


0

Joe - can you share the full code of your working example? I can't get mapview.addAnnotation to work in my for loop. I'd like to look at your code and see what I am doing wrong.


0

This works for me:

var win = null;
    var pin = [];
    win = Titanium.UI.createWindow({
        backButtonTitle:'Back',
        title:'Title',
        tabBarHidden:true
    });
    mapview = Titanium.Map.createView({
        mapType: Titanium.Map.STANDARD_TYPE,
        animate:true,
        userLocation:true,
        region: {latitude:lat, longitude:lng,      
               latitudeDelta:0.01, longitudeDelta:0.01},
        regionFit:true
    });
 
    for (var i=0; i<data.length; i++) {
        pin[i] = Titanium.Map.createAnnotation({
            latitude:data[i].lat,
            longitude:data[i].lng,
            title:data[i].title, 
            subtitle:data[i].subtitle, 
            pincolor:Titanium.Map.ANNOTATION_PURPLE,
            animate:true,
            myid:i 
        });
        mapview.addAnnotation(pin[i]);
    }   
 
    win.add(mapview);
    Titanium.UI.currentTab.open(win,{animated:true});

  • mapview.addAnnotation(); doesn't work for me. I have tried it on a basic map with 1 location and mapview.addAnnotation doesn't add the location. The only way I can ad a location, so far, is with annotations:[] in mapview. — Jason Calvert 4 weeks ago


0

Got it working except its only displaying 1 location. The code is below, can anyone see what I'm doing wrong?

var lat = '';
var lon = '';
 
var url = 'http://localhost:8888/class-services/services/json';
 
var data = [];
 
var view = new Object;
view.method = 'views.get';
//view.hash = hash;
//view.domain_name = domain;
//view.domain_time_stamp = timestamp;
//view.nonce = nonce;
view.view_name = 'yardsales';
 
var xhr = Titanium.Network.createHTTPClient();
xhr.open("POST",url);
 
xhr.send({data: JSON.stringify(view)});
 
xhr.onload = function() {
 
  Ti.API.info(this.responseText);
 
  var data = JSON.parse(this.responseText);
 
  Ti.API.info(data);
 
for (var c=0;c<data.length;c++)
{
 
    data = Titanium.Map.createAnnotation({
        latitude:data[c]['locations'][0]['latitude'],
        longitude:data[c]['locations'][0]['longitude'],
        title:data[c]['locations'][0]['street'],
        subtitle:data[c]['field_date'][0]['value']+': Starting at '+data[c]['field_stime'][0]['value'],
        pincolor:Titanium.Map.ANNOTATION_RED,
        animate:true,
        rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
        myid:(c+1)
    });
 
    Titanium.Geolocation.getCurrentPosition(function(e) {
        lat = e.coords.latitude;
        lon = e.coords.longitude;
 
    var mapview = Titanium.Map.createView({
        mapType: Titanium.Map.STANDARD_TYPE,
        region: {latitude:lat, longitude:lon, latitudeDelta:0.01, longitudeDelta:0.01},
        animate:true,
        regionFit:true,
        userLocation:true,
        annotations:[data]
    });
 
    Titanium.UI.currentWindow.add(mapview);
 
});
 
}
 
};


0

I've been working on this today and have gotten it to work, sort of. All the JSON data gets placed in the same pin instead of multiple pins being dropped. Once I get it fully working, I'll share the code.


0

May also be worth asking this question in the Drupal Titanium group recently setup http://groups.drupal.org/titanium-api

Sorry I have not yet tried this so can't offer assistance yet

  • I have it working now except that only one location is being displayed. It should be placing all locations on the map but it is not. I'm not sure what I'm doing wrong. I'm going to keep working on this. But if anyone can see what I'm doing wrong, please post it. — Jason Calvert 6 weeks ago

  • I'll continue to check back, I'm very interested in your results. — Chris Nelson 6 weeks ago

  • Did you ever get anywhere with this? I'm attempting to parse a response and plot it via the map but am getting absolutely nowhere! — Chris Nelson 5 weeks ago

Show 1 more comment