Extract Latitude and Longitude from model and create a map marker

[daftwolfie]

Hi Jerome, I'm not so clear about the response.responseXML part, sorry for the inconvenience (noob) but this is what I did so far. I placed the function u mentioned above into my map js.

Mapo.js

Ext.define('demo.view.Mapo', {
        extend:'Ext.Panel',
        extend: 'Ext.Map',
        xtype:'mapo',


        config: {
            title:'Incident Location',
            iconCls:'maps',
            layout:'fit',
            draggable: true,
            useCurrentLocation: true,




            listeners: {
			
				getString: function(path, root) {
					var output;
					var values = Ext.DomQuery.select(path, root);
					if (values[0]) {
						if (values[0].firstChild) {
							output = values[0].firstChild.nodeValue;
						} else {
							output = '';
						}
					} else {
						output = '';
					}
					return output;
				},
                maprender : function(comp, map){
				var newModel = Ext.ModelManager.getModel('demo.model.new');
                    new google.maps.Marker({
                        position: new google.maps.LatLng(newModel.getString('Latitude', entry), newModel.getString('Longitude', entry)),
                        map: map,
                        title:"You Are Here!",
                        animation: google.maps.Animation.BOUNCE
                    });
                }
            }, //close listeners
            mapOptions: {
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
        }
    }
);

Here's my store once again, where I did the parsing:

Ext.define('demo.store.news', {
    extend: 'Ext.data.Store',
    requires: [
        'demo.model.new',
		'Ext.data.reader.Xml'
    ],


    config: {
        autoLoad: true,
        storeId: 'news',
        proxy: {
            type: 'ajax',
            url: 'news.xml',
            reader: {
                type: 'xml',
                model: 'demo.model.new',
                record: 'entry',
                rootProperty: 'feed'
            }
        }
    }
});

Based on this, I would get an error that 'entry' is not defined, but I'm not sure how to correct this. Thank you!

[jerome76]

Sorry about that, I should have been clearer on where to put it. I cleaned up your code:

Ext.define('demo.view.Mapo', {
    extend: 'Ext.Map',
    xtype:'mapo',
    config: {
        title:'Incident Location',
        iconCls:'maps',
        layout:'fit',
        draggable: true,
        useCurrentLocation: true,
        mapOptions: {
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    },
    initialize: function(){
        var me = this;
        me.on('maprender', function(comp, map){
            var newModel = Ext.ModelManager.getModel('demo.model.new');
            new google.maps.Marker({
                position: new google.maps.LatLng(
                        newModel.getString('Latitude', entry), 
                        newModel.getString('Longitude', entry)
                ),
                map: map,
                title:"You Are Here!",
                animation: google.maps.Animation.BOUNCE
            });
        });
        me.callParent(arguments);
    },
    getString: function(path, root) {
        var output = '';
        var values = Ext.DomQuery.select(path, root);
        if (values[0]){
            if (values[0].firstChild) {
                output = values[0].firstChild.nodeValue;
            }
        }
        return output;
    }
});

So when you call

Ext.create('demo.store.news', { ... });

you'll want to have a listener for the load event to create your map and map marker with the model that is associated with the store.

Ext.create('demo.store.news', {
    listeners: {
        load: function(store, records, successful, op, eOpts){
            //create your map once the store is loaded and
            //the model is successfully created and filled
            //with data
            
            var map = Ext.create({ xtype: 'mapo'});
           
            //you can also use Ext.create('demo.view.Mapo'), but
            //since you have defined your own xtype, you can use
            //that
            
            
            //now you can do what you want with your map,
            //add it to your panel, or show it fullscreen,
            //whatever you need to do.
        }
    }
});

[daftwolfie]

Thanks a lot Jerome! I'll try this out, won't wanna bug ya further lol, thank you for all your responses!

[daftwolfie]

Hi Jerome,

Sorry, but should this be placed in store?


Ext.create('demo.store.news', { listeners: { load: function(store, records, successful, op, eOpts){ //create your map once the store is loaded and //the model is successfully created and filled //with data var map = Ext.create({ xtype: 'mapo'}); //you can also use Ext.create('demo.view.Mapo'), but //since you have defined your own xtype, you can use //that //now you can do what you want with your map, //add it to your panel, or show it fullscreen, //whatever you need to do. } }});
Also, when I run the code for the Mapo.js, I got an error in the chrome console saying:

Uncaught ReferenceError: root is not defined

So sorry to disturb yet again!

[daftwolfie]

Hi everyone, this is not the first post about the same topic , but I'm experiencing some difficulties with this, however I feel it might be very close to being solved. I'm basically creating an incident display map. The user will click on a list of road incidents and upon each item, a map will be shown displaying the incident location. The latitude and longitude is available in the xml feed. I have done the xml parsing and here are the sections of my code:

This is the xml.

<entry>
    <title type="text">Vehicle Breakdown</title>
    <summary type="text"></summary>
    <updated>2011-07-21T12:00:42Z</updated>
    <author>
      <name />
    </author>
    <content type="application/xml">
      <m:properties>
    <d:Message>Vehicle breakdown</d:Message>
        <d:Latitude m:type="Edm.Double">2.353033192633941</d:Latitude>
        <d:Longitude m:type="Edm.Double">104.72912122842577</d:Longitude>
      </m:properties>
    </content>
    <geo:lat xmlns:geo="http://www.georss.org/georss">1.353033192633941</geo:lat>
    <geo:long xmlns:geo="http://www.georss.org/georss">103.72912122842577</geo:long>
</entry>

Store:

Ext.define('demo.store.news', {
    extend: 'Ext.data.Store',
    requires: [
        'demo.model.new',
        'Ext.data.reader.Xml'
    ],


    config: {
        autoLoad: true,
        storeId: 'news',
        proxy: {
            type: 'ajax',
            url: 'news.xml',
            reader: {
                type: 'xml',
                model: 'demo.model.new',
                record: 'entry',
                rootProperty: 'feed'
            }
        }
    }
});

Model: (Fields based on the XML above)

Ext.define('demo.model.new', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {
                name: 'id'
            },
            
            {
                name: 'Message'
            },
            {
                name: 'Latitude'
            },
            {
                name: 'Longitude'
            }
        ]
    }
});

Controller:

Ext.define('demo.controller.News',{
    extend:'Ext.app.Controller',


    config:{
        refs:{
            NewsContainer:'newscontainer'


        },
        control:{
            'newscontainer new list':{
                itemtap:function(list, index, target, record){
                    var detailsView =Ext.create('demo.view.Mapo');
                    detailsView.setData(record.data);
                    this.getNewsContainer().push(detailsView);


                }
            }


        }    
    }
});

Mapo.js (my map js which will take in the longitude and latitude from the model, however, it is not showing the right area in the map and there is no marker)

Ext.define('demo.view.Mapo', {
    extend: 'Ext.Map',
    xtype:'mapo',
    config: {
        title:'Incident Location',
        iconCls:'maps',
        layout:'fit',
        draggable: true,


        mapOptions: {
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    },
    initialize: function(){
        var me = this;
        me.on('maprender', function(comp, map){
            var newModel = Ext.ModelManager.getModel('demo.model.new');
            new google.maps.Marker({
                position: new google.maps.LatLng(
                        newModel.getString('Latitude', entry), 
                        newModel.getString('Longitude', entry)
                ),
                map: map,
                title:"You Are Here!",
                animation: google.maps.Animation.BOUNCE
            });
        });
        me.callParent(arguments);
    },
    getString: function(path, root) {
        var output = '';
        var values = Ext.DomQuery.select(path, root);
        if (values[0]){
            if (values[0].firstChild) {
                output = values[0].firstChild.nodeValue;
            }
        }
        return output;
    }
});

Sorry if this post is the similar to my previous one, just urgently need some help. Thank you everyone!

[jerome76]

In this part

me.on('maprender', function(comp, map){
     var newModel = Ext.ModelManager.getModel('demo.model.new');
    new google.maps.Marker({
        position: new google.maps.LatLng(
                newModel.getString('Latitude', entry), 
                newModel.getString('Longitude', entry)
        ),
        map: map,
        title:"You Are Here!",
        animation: google.maps.Animation.BOUNCE
    });
});

entry isn't defined and that is where the error is coming from.


I'm sorry, I didn't look this over completely before posting. using the getString() method with the path and root is more for Ajax calls that have a responseXML. I'll clean the code up again.

Ext.define('demo.view.Mapo', {
    extend: 'Ext.Map',
    xtype:'mapo',
    config: {
        title:'Incident Location',
        iconCls:'maps',
        layout:'fit',
        draggable: true,
        useCurrentLocation: true,
        mapOptions: {
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    },
    initialize: function(){
        var me = this;
        me.on('maprender', function(comp, map){
            new google.maps.Marker({
                position: new google.maps.LatLng(
                        newModel.get('Latitude'), 
                        newModel.get('Longitude')
                ),
                map: map,
                title: "You Are Here!",
                animation: google.maps.Animation.BOUNCE
            });
            //if the above code doesn't work, try this below:
            /*
            var data = Ext.getStore('news').getData().items[0].data
            //assuming that your store has one record above
            new google.maps.Marker({
                position: new google.maps.LatLng(
                            data.Latitude,
                            data.Longitude
                ),
                map: map,
                title: "You Are here!",
                animation: google.maps.Animation.BOUNCE
            });
             */
        });
        me.callParent(arguments);
    }
});

Since you are still using a Store you don't need that getString method I gave you.

[daftwolfie]

Omg, this one works:

Ext.define('demo.view.Mapo', {
    extend: 'Ext.Map',
    xtype:'mapo',
    config: {
        title:'Incident Location',
        iconCls:'maps',
        layout:'fit',
        draggable: true,
        useCurrentLocation: true,
        mapOptions: {
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    },
    initialize: function(){
        var me = this;
        me.on('maprender', function(comp, map){
		var data = Ext.getStore('news').getData().items[0].data
            new google.maps.Marker({
                position: new google.maps.LatLng(
                        data.Latitude, 
                        data.Longitude
                ),
                map: map,
                title: "Incident Location",
                animation: google.maps.Animation.BOUNCE
            });
        });
        me.callParent(arguments);
    }
});

Thank you Jerome you have been of massive help! I couldn't thank you more! For now it's taking the first value from the list and the others are the same, but I'll try and figure out how to get a for loop for the itemtap in my controller! Thank you once again!

[jerome76]

Glad it worked finally Good luck.

[daftwolfie]

Hi Jerome,

Sorry but I hope you can help me out on this, I've been unlucky in finding out how to iterate through the incident list. I have an itemtap in my controller.

Controller:

Ext.define('demo.controller.News',{
    extend:'Ext.app.Controller',


    config:{
        refs:{
            NewsContainer:'newscontainer'


        },
        control:{
            'newscontainer new list':{
                itemtap: function(list, index, target, record){	
                    var detailsView = Ext.create('demo.view.Mapo');
                    detailsView.setData(record.data);
                    this.getNewsContainer().push(detailsView);


                }
            }


        }	
    }
});

This is part of the mapo.js in which you had helped me out:

Mapo:

for (i=0; i<Ext.getStore('news').getData().length; i++){
			var data = Ext.getStore('news').getData().items[i].data
		};
            new google.maps.Marker({
                position: new google.maps.LatLng(
                        data.Latitude, 
                        data.Longitude
                ),
				// icon: image,
                map: map,
                title: "Incident Location",
                animation: google.maps.Animation.BOUNCE
            });

I had added a 'for' loop so that when I click on the incident list each item on the list will show a different marker. For now, every item on the list leads to the same marker. Hope you have the time to help and sorry to disturb!
Thank You!!

[jerome76]

Try

Ext.getStore('news').getData().items.length

That is what I use.