Hybrid View

  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    21
    Vote Rating
    1
    daftwolfie is on a distinguished road

      0  

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

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


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

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

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    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.

  4. #3
    Sencha User
    Join Date
    May 2012
    Posts
    21
    Vote Rating
    1
    daftwolfie is on a distinguished road

      0  

    Default


    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



  5. #4
    Touch Premium Member
    Join Date
    Jan 2011
    Posts
    14
    Answers
    2
    Vote Rating
    1
    adamatvips is on a distinguished road

      0  

    Default Empty Model

    Empty Model


    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.

  6. #5
    Sencha User
    Join Date
    May 2012
    Posts
    21
    Vote Rating
    1
    daftwolfie is on a distinguished road

      0  

    Default


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

    Capture.PNG

  7. #6
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    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.

  8. #7
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Quote Originally Posted by daftwolfie View Post
    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.

  9. #8
    Sencha User
    Join Date
    Sep 2013
    Location
    Ahmedabad
    Posts
    10
    Vote Rating
    0
    mitesh1818 is on a distinguished road

      0  

    Default


    hi thank you for replay..
    when I run this app give error like : can not call method 'apply' undefined..
    plz help me..

  10. #9
    Sencha User
    Join Date
    May 2012
    Posts
    21
    Vote Rating
    1
    daftwolfie is on a distinguished road

      0  

    Default 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


    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!