Results 1 to 2 of 2

Thread: Make Map Interactive

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    120
    Answers
    11

    Default Make Map Interactive

    Hi,

    I have a Bus Routes app that I'm trying to make on Sencha. So far I have displayed a static map of the bus stop using the following code segment :

    Code:
            var latitude = 19.929192,
            longitude = 73.836038;
    
    var map = new Ext.Map({
                  geo:new Ext.util.GeoLocation({
                  autoUpdate:false,
                  timeout:1000,
                  listeners:{
                  locationupdate: function(geo) {
                     // alert([values.latitude]);
                     //var center = new google.maps.LatLng(values.)
                      var center = new google.maps.LatLng(latitude,longitude);
    
    
                      if (map.rendered)
                        map.update(center)
                      else
                        map.on('activate', map.onUpdate, map, {single: true, data: center});
                },
                locationerror: function(geo){
                alert('got geo error');
    However, as you can tell, the map is fixed and static.... it doesn't let the user pan around or zoom in.... How do I add in those features ??

    Thanks
    Sasha

  2. #2
    Sencha Premium Member
    Join Date
    May 2008
    Location
    Pasadena, California
    Posts
    172
    Answers
    27

    Default

    I made a few modifications that you may consider. I tested it and am able to pan and zoom as well as switch to satellite view. I added a mapOptions that may be irrelevant to your particular usage, but this structure will allow you to change things like zoom level and map type. You can refer to the google map api for what properties are allowed in the mapOptions structure.

    Code:
        var latitude = 19.929192,            longitude = 73.836038;
    
    
        var map = new Ext.Map({
            height: 500,
            width: 500,
            mapOptions: {
                zoom: 17,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            geo:new Ext.util.GeoLocation({
                autoUpdate:false,
                timeout:1000,
                listeners:{
                    locationupdate: function(geo) {
                        // alert([values.latitude]);
                        //var center = new google.maps.LatLng(values.)
                        var center = new google.maps.LatLng(latitude, longitude);
    
    
    
    
                        if (map.rendered)
                            map.update(center);
                        else
                            map.on('activate', map.onUpdate, map, {single: true, data: center});
                    },
                    locationerror: function(geo) {
                        alert('got geo error');
                    }
                }
            })
        });
    I don't know how you have your app structured, but in terms of the map, you might want to wrap it in a panel that cancels out dragging and scroll so that you can do those things on the map without having the app container panels responding to drag. Here is how you can do that....

    Code:
                {                xtype:'panel',
                    scroll: false,
                    listeners: {
                        el: {
                            drag: { fn: function() {
                            } }
                        }
                    },
                    items:[map]
                }

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
  •