PDA

View Full Version : Make Map Interactive



Sasha172
6 Sep 2011, 10:45 PM
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 :



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

NickT
7 Sep 2011, 7:44 AM
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.


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


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