Extract Latitude and Longitude from model and create a map marker

**daftwolfie** · 30 Jul 2012 6:27 AM

Hi, I have a model which looks like this:

Code:

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

This model is based off an XML feed that contains those fields. However, I do not know how to create a map marker based on the 'Latitude' and 'Longitude' from the model. I currently just set my map to my current location like this:

Code:

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: {
                maprender : function(comp, map){
                    new google.maps.Marker({
                        position: new google.maps.LatLng(this._geo.getLatitude(), this._geo.getLongitude()),
                        map: map,
                        title:"You Are Here!",
                        animation: google.maps.Animation.BOUNCE
                    });
                }
            }, 
            mapOptions: {
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
        }
    }
);

I've been stuck on this for days now, help would be greatly appreciated! Thank You!!

jerome76

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

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

Code:

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.

Code:

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.
        }
    }
});

**jerome76** · 30 Jul 2012 12:15 PM

Using the ModelManager, you can get the model that you create and get the data like so:

Code:

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: {
            maprender : function(comp, map){
                var newModel = Ext.ModelManager.getModel('demo.model.new');
                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
                });
            }
        }, 
        mapOptions: {
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    }
});

Hope this helps.

**daftwolfie** · 30 Jul 2012 6:33 PM

Hi, thanks for your reply! I now understand the logic behind the model manager, thanks for your help! However, my application is running but I am getting this error in the Google map part. Any idea how I can solve this? Thanks!!
This is what it says:

Uncaught TypeError: Object function () { return this.constructor.apply(this, arguments); } has no method 'get

**adamatvips** · 30 Jul 2012 10:58 PM

You have and empty model instance from the model manager, you need to put some data into it.

newModel = Ext.create('demo.model.new' ,{
message :'You Are Here',
latitude : 24.23154564,
longitude : 12.1234524
});

then you can use it retrieve the values in the plot point.

**daftwolfie** · 31 Jul 2012 12:06 AM

Hi, thanks for the reply, but these fields are taken from an XML feed which contains the Latitude and Longitude fields:

Capture.PNG

**jerome76** · 31 Jul 2012 4:33 AM

You can use this then to parse out the data from the XML

Code:

    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;
    },

The path would be 'Latitude' or 'Longitude' and the root would be the response.responseXML from the Ajax request.

**daftwolfie** · 31 Jul 2012 7:43 AM

Hi Jerome,
I've done the parsing already,

XML - news.xml :

Code:

<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: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>

Then from the store, I called out news.xml:

Code:

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'
            }
        }
    }
});

Which then leads to the model which gets the fields of the XML:

Code:

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

**jerome76** · 31 Jul 2012 7:50 AM

Originally Posted by daftwolfie

Uncaught TypeError: Object function () { return this.constructor.apply(this, arguments); } has no method 'get

You aren't referencing the model, but instead the function that returns it. Debug it in Chrome when you do

Code:

var newModel = Ext.ModelManager.getModel('demo.model.new');

and see what value newModel has.

**daftwolfie** · 31 Jul 2012 8:36 AM

Originally Posted by jerome76

You can use this then to parse out the data from the XML

Code:

    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;
    },

The path would be 'Latitude' or 'Longitude' and the root would be the response.responseXML from the Ajax request.

Where should I place this? In the store? or in the .php where I would parse the XML?

**jerome76** · 31 Jul 2012 9:02 AM

It is a JavaScript function. It can be placed in your JS file. You can add it to your Map definition and use it like (map).getString('Longitude', response.responseXML) when you are in the success [response is a param that is passed] of the Ajax request.

Extract Latitude and Longitude from model and create a map marker

Thread Tools

Search Thread

Display

Answered: Extract Latitude and Longitude from model and create a map marker

Answered: Extract Latitude and Longitude from model and create a map marker

Empty Model

Empty Model

Tags for this Thread