Page 1 of 3 123 LastLast
Results 1 to 10 of 24

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

  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    21
    Vote Rating
    1
      0  

    Default 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
    100
      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
      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
    17
    Answers
    2
    Vote Rating
    2
      0  

    Default 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
      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
    100
      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
      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 Attached Images

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

Page 1 of 3 123 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •