1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    cosmas007 is on a distinguished road

      0  

    Default Sencha Touch 2 List (Maps)

    Sencha Touch 2 List (Maps)


    I am building an app which contains a list of addresses. This app is working in such a way that once the user clicks on each of the items (addresses) in the list, the next page shows a map, and the map has a marker which points to the exact location of the address clicked on. This is made possible due to the Latitude and Longitude coordinates stated in code. My problem is that I have more than one address, and each of these addresses have a unique longitude and latitude. I want to make my app work in such a way that when a user clicks on any address they are interested in, the app will open a page and show the map and a marker pointing to the exact location of the address on the map. My code's below: it is working perfectly, BUT when the user clicks on the address, it takes them to the same logitude and latitude.
    My store:
    Code:
    Ext.define('List.store.Presidents', {
    extend : 'Ext.data.Store',
    
    
    config : {
        model : 'List.model.President',
        sorters : 'lastName',
        grouper : function(record) {
            return record.get('lastName')[0];
        },
    
    
        data : [{
    
    
            firstName : "Ikhlas HQ",
            lastName : "Tower 11A, Avenue 5, Bangsar South, No.8 Jalan Kerinchi 59200 Kuala Lumpur",
            latitude : 3.110649,
            longitude : 101.664991,
            id: 'm12',
        },
        {
            firstName : "PEJABAT WILAYAH SELANGOR",
            lastName : "No. 97, 97-1 & 97-2, Jalan Mahogani 5/KS7, Ambang Botanic, 41200 Klang,   Selangor",
            latitude : 3.003384,
            longitude : 101.45256,
            id: 'm1',
        }, ]
    
    
    }
    });
    My controller:
    Code:
    Ext.define('List.controller.Main', {
    extend: 'Ext.app.Controller',
    
    
    config: {
    
    
        control: {
            'presidentlist': {
                disclose: 'showDetail'
            },
         }
     },
    showDetail: function(list, record) {
                this.getMain().push({
                    xtype: 'presidentdetail',
                    title: record.fullName(),
    
    
    listeners: {
                maprender: function(comp, map) {
                    var position = new google.maps.LatLng(5.978132,116.072617);
                    var marker = new google.maps.Marker({
                        position: position,
                        map: map
                            });
                google.maps.event.addListener(marker, 'click', function() {
                        infowindow.open(map, marker);
                            });
                setTimeout(function() {
                        map.panTo(position);
                    }, 1000);
    
    
                    },
               }, 
            })
         },
    });
    My view: (One of my views)
    Code:
    Ext.define('List.view.PresidentDetail', {
    extend : 'Ext.Map',
    xtype: 'presidentdetail',
    
    
        config: {
                    title: 'Details',
                    styleHtmlContent: true,
                    scrollable: 'vertical',
                    //useCurrentLocation: true,
                    layout: 'fit',
    
    
        mapOptions: {
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    navigationControl: true,
                    navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.DEFAULT
                     }
                },
        }
    
    
    
    
    });
    My model:
    Code:
    Ext.define('List.model.President', {
    extend : 'Ext.data.Model',
    config : {
        fields : ['firstName', 'middleInitial', 'lastName', 'latitude', 'longitude']
    },
    fullName : function() {
        var d = this.data, names = [d.firstName, (!d.middleInitial ? "" : d.middleInitial + "."), d.lastName];
        return names.join(" ");
    }
    });
    Help me out please. I need each of the addresses on the list to be tagged with a latitude and longitude so that when the user clicks on the address, it will point to the exact location the map.
    M5.png
    The image above shows the exact out put of my codes at the current moment. my question now is how do i set up my controller in such a way that each of the items in the list is hooked to a particular LngLat. so when each item is tapped, its marks the exact location on the map.
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Do you have the lat/long coords in the record?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    cosmas007 is on a distinguished road

      0  

    Default


    Thanks for the reply Mitchellsimoens, if you notice in my store, i do have the lat and long, but the problem i have is calling up my lat and long dynamically from my store to my controller so that each time an item in the list is clicked on, the map that pop on the second page will have a marker placed on that exact lat and long.but am not sure of how to write the logic in my controller to manipulate that. thanks

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default Kent Uni

    Kent Uni


    Take a look at the Kent Uni sencha app on GitHub...it has an example using Leaflet maps but it should be useful for you, it has a list of locations when clicked shows a map with a marker.

    :-)