PDA

View Full Version : Google maps combined with CardLayout



omar.belkhodja
27 Jan 2011, 1:40 PM
Hello,

I have create a sort of wizard using the CardLayout. One of the cards has a google map panel. When calling the function to center the map on a specific location, the result is not correct. The problem happens only if use the map within a CardLayout. If use the google map panel into a Window, no problem happens. Below is the source code that I'm using. Anybody to help ? Thanks !



Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
initComponent : function(){

var defConfig = {
plain: true,
zoomLevel: 3,
yaw: 180,
pitch: 0,
zoom: 0,
border: false
};

Ext.applyIf(this,defConfig);

Ext.ux.GMapPanel.superclass.initComponent.call(this);
},
afterRender : function(){
//var wh = this.ownerCt.getSize();
//Ext.applyIf(this, wh);

Ext.ux.GMapPanel.superclass.afterRender.call(this);

this.gmap = new GMap2(this.body.dom, {
draggableCursor: "crosshair"
});

// Bind map events
GEvent.bind(this.gmap, 'load', this, function(){
this.onMapReady();
});
GEvent.bind(this.gmap, 'click', this, function(){
this.onMapClick();
});
GEvent.bind(this.gmap, 'mousemove', this, function(point){
this.onMapMouseMove(point);
});

// Add all controls to the Map
this.gmap.addControl(new GScaleControl());
this.gmap.addControl(new GLargeMapControl());
this.gmap.addControl(new GMapTypeControl());

// Enable zooming using the wheel
this.gmap.enableContinuousZoom();
this.gmap.enableScrollWheelZoom();

// Center the map
this.setCenter(this.center.lat, this.center.lng);
this.cLat = this.center.lat;
this.cLng = this.center.lng;


},
setCenter : function(lat, lng) {
if (typeof this.getMap() == 'object') {
this.gmap.checkResize();
var point = new GLatLng(lat, lng);
this.gmap.setCenter(point, this.zoomLevel);
}
},
setZoomLevel : function(level) {
if (typeof this.getMap() == 'object') {
this.gmap.checkResize();
this.zoomLevel = level;
this.gmap.setCenter(this.getCenter(), this.zoomLevel);
}
},
onMapReady : function(){
this.addMarkers(this.markers);
},
onMapMouseMove: function(point) {
this.cLat = point.lat().toFixed(6);
this.cLng = point.lng().toFixed(6);
},
onMapClick : function(){
this.fireEvent('click', {lat: this.cLat, lng: this.cLng});
},
onResize : function(w, h){
var console = window.console;
console.log('resize w='+w+' h='+h);
if (typeof this.getMap() == 'object') {
this.gmap.checkResize();
}
Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
},
setSize : function(width, height, animate){
if (typeof this.getMap() == 'object') {
this.gmap.checkResize();
}
Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
},
getMap : function(){
return this.gmap;
},
getCenter : function(){
return this.getMap().getCenter();
},
getCenterLatLng : function(){
var ll = this.getCenter();
return {lat: ll.lat(), lng: ll.lng()};
},
addMarkers : function(markers) {
if (Ext.isArray(markers)){
for (var i = 0; i < markers.length; i++) {
var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
}
}
},
addMarker : function(point, marker, clear, center, listeners){
Ext.applyIf(marker,G_DEFAULT_ICON);

if (clear === true){
this.getMap().clearOverlays();
}
if (center === true) {
this.getMap().setCenter(point, this.zoomLevel);
}

var mark = new GMarker(point,marker);
if (typeof listeners === 'object'){
for (evt in listeners) {
GEvent.bind(mark, evt, this, listeners[evt]);
}
}
this.getMap().addOverlay(mark);
}
});

Ext.reg('gmappanel', Ext.ux.GMapPanel);

Ext.ns('Application');
// map Panel class
Application.MapPanel = Ext.extend(Ext.Panel, {
position : null,
setCenter : function(lat, lng) {
this.items.get('map').setCenter(lat, lng);
},
setZoomLevel : function(level) {
this.items.get('map').setZoomLevel(level);
},
getPosition : function() {
return this.position;
},
addMarker : function(point) {
this.items.get('map').addMarker(new GLatLng(point.lat, point.lng), null, true);
this.position = point;
},
scope : this,
initComponent : function() {
// Apply configuration
var config = {
layout : 'border',
items: [{
scope : this,
id : 'map',
region : 'east',
width : 360,
frame : true,
xtype : 'gmappanel',
zoomLevel : 10,
frame : true,
center : this.center,
}, {
region: 'center',
frame: true,
bodyStyle: 'padding:15px 15px 0',
html: mapHelpMessage,
}]
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.MapPanel.superclass.initComponent.apply(this, arguments);

// Add click handler in order (adds a marker)
this.items.get('map').on('click', function(point){
this.addMarker(point);
},
this);
}
});

// Google maps card
var mapCard = new Application.MapPanel({
id : 'card-2',
center : {
lat: cLat,
lng: cLng
}
});

new Ext.Window({
height : 480,
width : 640,
layout : 'card',
activeItem : 0,
items: [othercard, mapCard]
}).show();

omar.belkhodja
27 Jan 2011, 2:11 PM
I think I have posted this thread on the wrong forum... I have duplicated it now on the EXTJS forum.
Sorry....

VinylFox
27 Jan 2011, 2:54 PM
That is quite an odd way to setup a panel. Have you considered a more standard usage, like what is done in the examples?

https://github.com/VinylFox/ExtJS.ux.GMapPanel/blob/master/examples/tabs/tabs-basic.js

omar.belkhodja
29 Jan 2011, 5:42 AM
Could you please provide more precisions about what is "odd" in my source code ? As I said before, the mapPanel class works perfectly when it is embedded alone into a Window, but gives bad result when used in a card layout, on the 2nd page.

My requirement is to have a card with instructions on the left, and a map on the right (see attachement). Do you think it is possible to do it in some other way ?