PDA

View Full Version : Ext.ux.YMapPanel - Yahoo Maps



moegal
15 Mar 2009, 4:49 AM
I have been working on a Yahoo map extension, thanks mainly in part to the fine Google map extension by VinylFox.

I could use some help with a few things. I am having trouble firing events. I get an error of "this.fireEvent is not a function".

Any help would be appreciated.



/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

/**
* @author Moegal
*/
Ext.apply(Ext, {
isFirebug: (window.console && window.console.firebug)
});
Ext.namespace('Ext.ux');

/**
*
* @class YMapPanel
* @extends Ext.Panel
*/
Ext.ux.YMapPanel = Ext.extend(Ext.Panel, {
initComponent : function(){

var defConfig = {
ymaptype: 'map',
plain: true,
zoomLevel: 4,
zoom: 0,
border: false,
startLoc: '32714',
panControl: false,
zoomLong: false,
zoomShort: false,
zoomScale: false,
typeControl: false,
zoomBox: false,
isLoadedAtStart: false
}
Ext.applyIf(this,defConfig);
this.addEvents(
'changeZoom'
);
Ext.ux.YMapPanel.superclass.initComponent.call(this);
},
afterRender : function(){

var wh = this.ownerCt.getSize();
Ext.applyIf(this, wh);

Ext.ux.YMapPanel.superclass.afterRender.call(this);
// Create a map object
this.ymap = new YMap(this.body.dom);
//remove all existing markers
this.ymap.removeMarkersAll();
// Display the map centered on a geocoded location
this.ymap.drawZoomAndCenter(this.startLoc, this.zoomLevel);
YEvent.Capture(this.ymap, EventsList.endMapDraw,this.onEndMapDraw);
YEvent.Capture(this.ymap, EventsList.changeZoom,this.onChangeZoom);
YEvent.Capture(this.ymap, EventsList.MouseClick,this.onMouseClick);
YEvent.Capture(this.ymap, EventsList.MouseDoubleClick,this.onMouseDoubleClick);
YEvent.Capture(this.ymap, EventsList.MouseOut,this.onMouseOut);
YEvent.Capture(this.ymap, EventsList.MouseOver,this.onMouseOver);
YEvent.Capture(this.ymap, EventsList.MouseUp,this.onMouseUp);
YEvent.Capture(this.ymap, EventsList.MouseDown,this.onMouseDown);
YEvent.Capture(this.ymap, EventsList.startPan,this.onStartPan);
YEvent.Capture(this.ymap, EventsList.endPan,this.onEndPan);
YEvent.Capture(this.ymap, EventsList.endAutoPan,this.onEndAutoPan);

var dt = new Ext.util.DelayedTask();
dt.delay(500, function(){
this.onMapReady();
}, this);

},
onMapReady : function(){
if (Ext.isFirebug) {
console.log('onMapReady');
}
this.setMapType(this.ymaptype);
this.addMarkers(this.markers);
this.addMapControls();
},
onEndMapDraw : function(){
if (Ext.isFirebug) {
console.log('onEndMapDraw');
}
},
onResize : function(w, h){
if (typeof this.ymap == 'object') {
if((parseFloat(w) == parseInt(w)) && !isNaN(parseInt(w))){
var dt = new Ext.util.DelayedTask();
dt.delay(300, function(){
this.ymap.resizeTo(new YSize(w,h));
}, this);
}
}
Ext.ux.YMapPanel.superclass.onResize.call(this, w, h);
},
setSize : function(width, height, animate){
if (typeof this.ymap == 'object') {
if((parseFloat(width) == parseInt(width)) && !isNaN(parseInt(width))){
var dt = new Ext.util.DelayedTask();
dt.delay(300, function(){
this.ymap.resizeTo(new YSize(width,height));
}, this);
}
}
Ext.ux.YMapPanel.superclass.setSize.call(this, width, height, animate);
},
getMap: function(){
return this.ymap;
},
addMarkers: function(markers) {
if (Ext.isArray(markers)){
for (var i = 0; i < markers.length; i++) {
var mkr_point = new YGeoPoint(markers[i].lat,markers[i].lon);
this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter);
}
}
},
addMarker: function(point, marker, clear, center){

if (typeof(clear) == 'boolean' && clear === true){
this.ymap.removeMarkersAll();
}
if (typeof(center) == 'boolean' && center === true) {
this.ymap.drawZoomAndCenter(point,this.zoomLevel);
}
var ymark = new YMarker(point);
if (typeof(marker.title) == 'string') {
ymark.addAutoExpand(marker.title);
}
if (typeof(marker.markup) == 'string') {
YEvent.Capture(ymark, EventsList.MouseClick,
function(){
ymark.openSmartWindow(marker.markup);
});
}
this.ymap.addOverlay(ymark);

},
addSingleMark : function(lat, lon, zoomLevel, setCenter, title, markup, clear) {
var point = new YGeoPoint(lat, lon);
if (typeof(clear) == 'boolean' && clear === true){
this.ymap.removeMarkersAll();
}
if (typeof(setCenter) == 'boolean' && setCenter === true) {
this.ymap.drawZoomAndCenter(point,zoomLevel);
}
var ymark = new YMarker(point);
if (typeof(title) == 'string') {
ymark.addAutoExpand(title);
}
if (typeof(markup) == 'string') {
YEvent.Capture(ymark, EventsList.MouseClick,
function(){
ymark.openSmartWindow(markup);
});
}
this.ymap.addOverlay(ymark);
},
removeAllMarkers : function() {
this.markers = '';
this.ymap.removeMarkersAll();
},
removeMarker : function(lat, lon) {
},
addMapControls : function(){
this.ymap.removeZoomScale();
if (this.panControl == true){
this.addMapControl('panControl');
}
if (this.typeControl == true){
this.addMapControl('typeControl');
}
if (this.zoomLong == true){
this.addMapControl('zoomLong');
}
if (this.zoomShort == true){
this.addMapControl('zoomShort');
}
if (this.zoomScale == true){
this.addMapControl('zoomScale');
} else if (this.zoomScale == false){
this.removeMapControl('zoomScale');
}
},
addMapControl : function(theControl){
if(theControl == 'typeControl'){
this.ymap.addTypeControl();
}else if(theControl == 'zoomLong'){
this.ymap.addZoomLong();
}else if(theControl == 'zoomShort'){
this.ymap.addZoomShort();
}else if(theControl == 'zoomScale'){
this.ymap.addZoomScale();
}else if(theControl == 'panControl'){
this.ymap.addPanControl();
}
},
removeMapControl : function(theControl){
if(theControl == 'panControl'){
this.ymap.removePanControl();
}else if(theControl == 'typeControl'){
//Map type control cannot be removed once it has been added
}else if(theControl == 'zoomLong'){
this.ymap.removeZoomControl();
}else if(theControl == 'zoomShort'){
this.ymap.removeZoomControl();
}else if(theControl == 'zoomScale'){
this.ymap.removeZoomScale();
}
},
setZoomLevel : function(zoom) {
this.zoomLevel = zoom;
this.ymap.drawZoomAndCenter(this.ymap.getCenterLatLon(), this.zoomLevel);
},
getZoomLevel : function() {
//return this.zoomLevel;
return this.ymap.getZoomLevel();
},
getCenterLatLon : function() {
return this.ymap.getCenterLatLon();
},
getBoundsLatLon : function() {
return this.ymap.getBoundsLatLon();
},
getEventsList : function() {
return this.ymap.getEventsList();
},
getMapType : function() {
if(this.ymap.getCurrentMapType() == 'YAHOO_MAP'){
return 'map';
}else if(this.ymap.getCurrentMapType() == 'YAHOO_SAT'){
return 'sat';
}else if(this.ymap.getCurrentMapType() == 'YAHOO_HYB'){
return 'hyb';
} else {
return 'und';
}
},
setMapType : function(mapType) {
if(mapType == 'map'){
this.ymap.setMapType(YAHOO_MAP_REG);
}else if(mapType == 'sat'){
this.ymap.setMapType(YAHOO_MAP_SAT);
}else if(mapType == 'hyb'){
this.ymap.setMapType(YAHOO_MAP_HYB);
}
},
disableDragMap : function(){
this.ymap.disableDragMap();
},
enableDragMap : function(){
this.ymap.enableDragMap();
},
onChangeZoom : function(){
this.fireEvent('changeZoom',this);
if (Ext.isFirebug) {
//console.log(this.getZoomLevel());
}
},
onMouseClick : function(e,click_geo_point){
if (Ext.isFirebug) {
console.log('MouseClick');
console.log(click_geo_point);
}
},
onMouseDoubleClick : function(){
if (Ext.isFirebug) {
//console.log('onMouseDoubleClick');
}
},
onMouseOut : function(e,click_geo_point){
if (Ext.isFirebug) {
//console.log(click_geo_point);
}
},
onMouseOver : function(e,click_geo_point){
if (Ext.isFirebug) {
//console.log('MouseOver');
//console.log(click_geo_point);
}
},
onMouseUp : function(e,click_geo_point){
if (Ext.isFirebug) {
//console.log('MouseUp');
//console.log(click_geo_point);
}
},
onMouseDown : function(e,click_geo_point){
if (Ext.isFirebug) {
//console.log('MouseDown');
//console.log(click_geo_point);
}
},
onStartPan : function(){
if (Ext.isFirebug) {
//console.log('onStartPan');
}
},
onEndPan : function(){
if (Ext.isFirebug) {
//console.log('onEndPan');
}
},
onEndAutoPan : function(){
if (Ext.isFirebug) {
//console.log('onEndAutoPan');
}
}
});

Ext.reg('ymappanel',Ext.ux.YMapPanel);


Example Usage:



var mappanel = new Ext.Panel({
layout: 'fit',
renderTo: 'mappanel',
width:500,
height:500,
tbar: [
{
text: 'X Mark Spot',
handler: function(){
Ext.getCmp('ymap1').removeAllMarkers();
}
},{
text: '+ Marker',
handler: function(){
Ext.getCmp('ymap1').addSingleMark(26.468114, -81.938781, 3, false, 'Fort Myers Beach', '<h3>Welcome to Fort Myers Beach</h3>', true);
}
},{
text: '++ Marker',
handler: function(){
Ext.getCmp('ymap1').addSingleMark(26.142802, -81.795616, 3, false, 'Naple', '<h3>Welcome To Naples</h3>', false);
}
},{
text: '+ Zoom Scale',
handler: function(){
Ext.getCmp('ymap1').addMapControl('zoomScale');
}
},{
text: 'Get Map Type',
handler: function(){
alert(Ext.getCmp('ymap1').getMapType());
}
},{
text: 'M',
handler: function(){
Ext.getCmp('ymap1').setMapType('map');
}
},{
text: 'S',
handler: function(){
Ext.getCmp('ymap1').setMapType('sat');
}
},{
text: 'H',
handler: function(){
Ext.getCmp('ymap1').setMapType('hyb');
}
},{
text: 'E Drag',
handler: function(){
Ext.getCmp('ymap1').enableDragMap();
}
},{
text: 'D Drag',
handler: function(){
Ext.getCmp('ymap1').disableDragMap();
}
}
],
items: [{
xtype: 'ymappanel',
id: 'ymap1',
layout: 'fit',
ymaptype: 'map', //map, sat or hyb
startLoc: '10150 Daniels Parkway, 33913',
zoomLevel: 5,
typeControl: false,
panControl: false,
zoomLong: false,
zoomShort: false,
zoomScale: false,
markers: [{
lat: 26.482865,
lon: -81.844024,
setCenter: true,
marker: {title: 'Location 1', markup: '<b>Test 1</b>'}
},{
lat: 26.302033,
lon: -81.749267,
marker: {title: 'Location 2', markup: '<b>Test 2</b>'}
}],
listeners: {
changeZoom: function(t){
console.log(t);
}
}

}]
});

Animal
15 Mar 2009, 8:30 AM
YEvent.Capture(this.ymap, EventsList.endMapDraw,this.onEndMapDraw);


If you read the docs on the ymap, I'm sure that there will be a way to specify what scope (the "this" reference) any event handler function executes in. That's what's causing your problem. WHen onEndMapDraw is called, "this" is not your Ext.ux.YMapPanel object. There has to be a way to tell it to use that.

moegal
15 Mar 2009, 11:20 AM
Animal,

Thanks. The private event fires just fine. I get the error when I try to call the fireEvent function. I am new to js so please excuse my confusion.

I will look again tomorrow.

Thanks, Marty

Animal
16 Mar 2009, 12:45 AM
That's what I said.

In your handler, "this" is not the Ext.ux.YMapPanel object. So it won't have the fireEvent method.

Read the docs on YEvent.capture. There will be a way of setting the scope.

moegal
16 Mar 2009, 4:45 AM
Animal,

Thanks. I added the optional privateObject to the method. It wasn't used in the yahoo map examples but it is listed in the docs. The yahoo maps api docs are pretty sparse.

Capture(object,event,callback,privateObject)

I changed:

YEvent.Capture(this.ymap, EventsList.changeZoom,this.onChangeZoom);
To
YEvent.Capture(this.ymap, EventsList.changeZoom,this.onChangeZoom,this);

I will post the changes later today with an improved example.

Marty

eyurdakul
10 Sep 2009, 10:17 AM
try to find yahoo equavalent of google's getMap() function.

moegal
10 Sep 2009, 11:03 AM
isn't it already there?



getMap: function(){
return this.ymap;
},