Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 24

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

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

    Default

    Hi Jerome, I'm not so clear about the response.responseXML part, sorry for the inconvenience (noob) but this is what I did so far. I placed the function u mentioned above into my map js.

    Mapo.js

    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: {
    			
    				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;
    				},
                    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
                        });
                    }
                }, //close listeners
                mapOptions: {
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
            }
        }
    );
    Here's my store once again, where I did the parsing:

    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'
                }
            }
        }
    });
    Based on this, I would get an error that 'entry' is not defined, but I'm not sure how to correct this. Thank you!

  2. #12
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    101
      0  

    Default

    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. #13
    Sencha User
    Join Date
    May 2012
    Posts
    21
    Vote Rating
    1
      0  

    Default

    Thanks a lot Jerome! I'll try this out, won't wanna bug ya further lol, thank you for all your responses!

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

    Default

    Hi Jerome,

    Sorry, but should this be placed in store?


    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. } }});
    Also, when I run the code for the Mapo.js, I got an error in the chrome console saying:

    Uncaught ReferenceError: root is not defined

    So sorry to disturb yet again!


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

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

  6. #16
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    101
      0  

    Default

    In this part
    Code:
    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
        });
    });
    entry isn't defined and that is where the error is coming from.


    I'm sorry, I didn't look this over completely before posting. using the getString() method with the path and root is more for Ajax calls that have a responseXML. I'll clean the code up again.

    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){
                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
                });
                //if the above code doesn't work, try this below:
                /*
                var data = Ext.getStore('news').getData().items[0].data
                //assuming that your store has one record above
                new google.maps.Marker({
                    position: new google.maps.LatLng(
                                data.Latitude,
                                data.Longitude
                    ),
                    map: map,
                    title: "You Are here!",
                    animation: google.maps.Animation.BOUNCE
                });
                 */
            });
            me.callParent(arguments);
        }
    });
    Since you are still using a Store you don't need that getString method I gave you.

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

    Default

    Omg, this one works:

    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: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
        },
        initialize: function(){
            var me = this;
            me.on('maprender', function(comp, map){
    		var data = Ext.getStore('news').getData().items[0].data
                new google.maps.Marker({
                    position: new google.maps.LatLng(
                            data.Latitude, 
                            data.Longitude
                    ),
                    map: map,
                    title: "Incident Location",
                    animation: google.maps.Animation.BOUNCE
                });
            });
            me.callParent(arguments);
        }
    });
    Thank you Jerome you have been of massive help! I couldn't thank you more! For now it's taking the first value from the list and the others are the same, but I'll try and figure out how to get a for loop for the itemtap in my controller! Thank you once again!

  8. #18
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    101
      1  

    Default

    Glad it worked finally Good luck.

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

    Default

    Hi Jerome,

    Sorry but I hope you can help me out on this, I've been unlucky in finding out how to iterate through the incident list. I have an itemtap in my controller.

    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);
    
    
                    }
                }
    
    
            }	
        }
    });
    This is part of the mapo.js in which you had helped me out:

    Mapo:
    Code:
    for (i=0; i<Ext.getStore('news').getData().length; i++){
    			var data = Ext.getStore('news').getData().items[i].data
    		};
                new google.maps.Marker({
                    position: new google.maps.LatLng(
                            data.Latitude, 
                            data.Longitude
                    ),
    				// icon: image,
                    map: map,
                    title: "Incident Location",
                    animation: google.maps.Animation.BOUNCE
                });
    I had added a 'for' loop so that when I click on the incident list each item on the list will show a different marker. For now, every item on the list leads to the same marker. Hope you have the time to help and sorry to disturb!
    Thank You!!

  10. #20
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    101
      0  

    Default

    Try
    Code:
    Ext.getStore('news').getData().items.length
    That is what I use.

Page 2 of 3 FirstFirst 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
  •