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,135
    Answers
    129
    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,135
    Answers
    129
    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
    Join Date
    May 2012
    Posts
    21
    Vote Rating
    1
    daftwolfie is on a distinguished road

      0  

    Default


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

  9. #8
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,135
    Answers
    129
    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.

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

      0  

    Default


    Quote Originally Posted by jerome76 View Post
    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?

  11. #10
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,135
    Answers
    129
    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


    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.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar