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

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


    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
    daftwolfie is on a distinguished road

      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
    daftwolfie is on a distinguished road

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

  6. #16
    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


    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
    daftwolfie is on a distinguished road

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

      1  

    Default


    Glad it worked finally Good luck.

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

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


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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."