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.

**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** · 2 Aug 2012 1:38 AM

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.

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

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

Model: (Fields based on the XML above)

Code:

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

Controller:

Code:

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)

Code:

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!

Extract Latitude and Longitude from model and create a map marker

Thread Tools

Search Thread

Display

Hybrid View

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

Unable to display map marker based on XML feed's longitude and latitude

Unable to display map marker based on XML feed's longitude and latitude

Tags for this Thread