Search code examples
sencha-touchextjssencha-touch-2sencha-touch-theming

Using Marker to Spot a particular address in a Map (Sencha Touch 2) Sencha Map

Am trying to build an app which gives a user direction once he or she clicks on the address. the structure of my App goes this way:

i have manage to compile all the address i want in a list form, meaning the user can click on the address and it will load the second page. view the picture below: This is my current App

The picture above shows my current app and my current stage of development which am stuck there, when the app loads it show the Page A and when you click on any of the address, it goes to page B. Page be of my App should be a Map with a Marker showing the exact location of the address in the map and if possible giving a driving direction to the exact address from the users current location. view the picture below: This is the exact thing i want What i want

The Second picture is exactly what i want to achieve, meaning that once the user clicks on any of the address, A map will show with the marker pointing on the exact location of the address (Latitude and Longtitude) is provided, i need just exactly like how the picture looks.

my codes are as follows: In my view panel, i have the following codes:

Ext.define('List.view.PresidentList', {
extend: 'Ext.List',
xtype: 'presidentlist',
requires: ['List.store.Presidents'],

config: {
     xtype:'container',
    title: 'Takaful Branch',
    //grouped: true,
    itemTpl: '{firstName} {lastName}',
    styleHtmlContent: true,
    store: 'Presidents',
    onItemDisclosure: true,


}

});

also in the view panel i have:

Ext.define('List.view.PresidentDetail', {
extend: 'Ext.Panel',
xtype: 'presidentdetail',

config: {
    title: 'Details',
    styleHtmlContent: true,
    scrollable: 'vertical',
    tpl: [
        'Google Map Goes Here'
         ]
}

});

the last file in my view folder is:

Ext.define('List.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'mainpanel',
requires: [
    'List.view.PresidentList',
    'List.view.PresidentDetail'
],

config: {
    items: [
    {
        xtype: 'presidentlist'
    },
   ]
}

});

This is my STORE:

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: "PEJABAT WILAYAH SARAWAK", lastName: "Ground, 1st & 3rd Floor, Section 6, Kuching Town Land District (KTLD), Jalan Kulas, 93400 Kuching, Sarawak" },
        {   firstName: "PEJABAT WILAYAH TERENGGANU", lastName: "Lot PT 3593, Ground, Mezzanine & 1st Floor, Jalan Sultan Zainal Abidin, 20000 Kuala Terengganu, Terengganu" },
        {   firstName: "PEJABAT WILAYAH MELAKA", lastName: "No. 10, Jalan Melaka Raya 8, Taman Melaka Raya, 75000, Melaka. " },



    ]
}

});

This My MODEL:

Ext.define('List.model.President', {
extend: 'Ext.data.Model',
config: {
    fields: ['firstName', 'middleInitial', 'lastName']
},

fullName: function() {
    var d = this.data,
    names = [
        d.firstName,
        (!d.middleInitial ? "" : d.middleInitial + "."),
        d.lastName
    ];
    return names.join(" ");
}

});

Lastly my CONTROLLER:

Ext.define('List.model.President', {
extend: 'Ext.data.Model',
config: {
    fields: ['firstName', 'middleInitial', 'lastName']
},

fullName: function() {
    var d = this.data,
    names = [
        d.firstName,
        (!d.middleInitial ? "" : d.middleInitial + "."),
        d.lastName
    ];
    return names.join(" ");
}

});

i have the exact coordinates of the address in my store: first Address: Latitude:4.600381 Longtitude:101.094174 second Address: Latitude:5.336649 Longtitude:103.142497 Third Address: Latitude:2.184044 Longtitude:102.25982

Will be waiting for replies while i still research on my own to figure things out. i believe your replies will help me and help many others out there with similar problem. Thanks

My store:

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 : "PEJABAT WILAYAH SARAWAK",
        lastName : "Ground, 1st & 3rd Floor, Section 6, Kuching Town Land District (KTLD), Jalan Kulas, 93400 Kuching, Sarawak",
        latitude : 4.600381 ,
        longitude : 101.094174
    }, {
        firstName : "PEJABAT WILAYAH TERENGGANU",
        lastName : "Lot PT 3593, Ground, Mezzanine & 1st Floor, Jalan Sultan Zainal Abidin, 20000 Kuala Terengganu, Terengganu",
        latitude : 5.336649,
        longitude : 103.142497
    }, {
        firstName : "PEJABAT WILAYAH MELAKA",
        lastName : "No. 10, Jalan Melaka Raya 8, Taman Melaka Raya, 75000, Melaka. ",
        latitude : 2.184044,
        longitude : 102.25982
    }]
}

});

My controller:

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(component, map, geo, eOpts) {
                var position = new google.maps.LatLng(2.184044,102.25982);
                var marker = new google.maps.Marker({
                    position: position,
                    map: map
                        });

                var infowindow = new google.maps.InfoWindow({
                    content: 'Working Fine <br /> I have been working On you', 


                        });

            google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                        });

            setTimeout(function() {
                    map.panTo(position);
                }, 1000);

                },
           }, 
        })
     },
});

My model:

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 + ".")];
    return names.join(" ");
}
});

My view:

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


});

So far, the results of the code above is just like the Image above, and can only display just one latitude and longitude for the 3items in the list. My problem now is to get it to work in such a way that once a user Tap on any of the item in the list, it will show the exact latitude and longitude of that particular address. please help me look into the logic in my App (controller). Thanks

Solution

  • You're on your own for directions but he're dropping the pins (Assuming you add lat/long to your model and pass the model to the view when its created):

    Ext.define('List.view.PresidentDetail', {
    extend : 'Ext.Map',
    xtype : 'presidentdetail',
    config : {
        title : 'Details',
        styleHtmlContent : true,
        scrollable : 'vertical',
        president: null
    },
    onGeoUpdate : function(geo) {
        if (geo) {
            this.fireEvent('setcenter', this, this.getMap(), geo);
        }
    }
});

    And in your controller:

    Ext.define('List.controller.PresidentDetailController', {
    extend : 'Ext.app.Controller',
    config : {
        control : {
            'presidentdetail' : {
                activate : 'activateGPS',
                setcenter : 'dropPins'
            }
        },
        markersArray : [],
    },
    activateGPS : function(container, options){
        container.setUseCurrentLocation(true);
    },
    dropPins : function(component, map, geo, eOpts) {
        //only do this the first time? 
        //geo updates are constantly recieved so turn useCurrentLocation off
        comp.setUseCurrentLocation(true);

        //Remove all markers from the map.
        for(var i = 0; i < this.getMarkersArray().length; i++) {
            this.getMarkersArray()[i].setMap(null);
        }
        this.setMarkersArray(Array());

        var currentPosition = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude());
        var yourLocationMarker = new google.maps.Marker({
                position : currentPosition,
                title : 'Current Location',
                map : map
            });
        self.getMarkersArray().push(yourLocationMarker);

        var president = comp.getPresident();
        var presidentsPosition = new google.maps.LatLng(president.getLatitude(), president.getLongitude());
        var yourLocationMarker = new google.maps.Marker({
                position : presidentsPosition,
                title : president.fullName(),
                map : map
            });
        self.getMarkersArray().push(presidentsPosition);
    }
});

    EDIT Here is the model with the latitude and longitude fields added:

    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(" ");
    }
});

    And the store with the additional fields:

    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 : "PEJABAT WILAYAH SARAWAK",
            lastName : "Ground, 1st & 3rd Floor, Section 6, Kuching Town Land District (KTLD), Jalan Kulas, 93400 Kuching, Sarawak",
            latitude : 4.600381 ,
            longitude : 101.094174
        }, {
            firstName : "PEJABAT WILAYAH TERENGGANU",
            lastName : "Lot PT 3593, Ground, Mezzanine & 1st Floor, Jalan Sultan Zainal Abidin, 20000 Kuala Terengganu, Terengganu",
            latitude : 5.336649,
            longitude : 103.142497
        }, {
            firstName : "PEJABAT WILAYAH MELAKA",
            lastName : "No. 10, Jalan Melaka Raya 8, Taman Melaka Raya, 75000, Melaka. ",
            latitude : 2.184044,
            longitude : 102.25982
        }]
    }
});