Bing now supports draggable markers. I''ve implemented draggable markers
on my branch, but I''m having trouble using them because of something I
don''t understand about JavaScript.
PROBLEM STATEMENT
I''m having trouble writing a method compatible with the
callEventListeners method:
/**
* Call listeners for a particular event.
* @param {String} sEventType Call listeners of this event type
* @param {Object} oEventArgs Event args object to pass back to the callback
*/
Mapstraction.prototype.callEventListeners = function(sEventType, oEventArgs) {
oEventArgs.source = this;
for(var i = 0; i < this.eventListeners.length; i++) {
var evLi = this.eventListeners[i];
if(evLi.event_type == sEventType) {
// only two cases for this, click and move
if(evLi.back_compat_mode) {
if(evLi.event_type == ''click'') {
evLi.callback_function(oEventArgs.location);
}
else {
evLi.callback_function();
}
}
else {
var scope = evLi.callback_object || this;
evLi.callback_function.call(scope, oEventArgs);
}
}
}
};
I''ve tried adding method with a "call()" function but it
says it can''t find the method. Does anybody have an example of adding
and event listener that is compatible with the bold function above? I need to
plug it in the code below:
if (marker.draggable) {
map.addEventListener(''dragEnded'', marker, CALLABLE FUNCTION);
}
DRAGGABLE IMPLEMENTATION
Here is my implementation of draggable. I''ve done this for Google. I
will also do it for Microsoft if there is agreement that it is worth doing:
mxn.core.js
/**
* Marker drag Started {marker: Marker}
* @name mxn.Mapstraction#markerMoved
* @event
*/
''dragStrated'',
/**
* Marker drag ended {marker: Marker}
* @name mxn.Mapstraction#markerMoved
* @event
*/
''dragEnded'',
/**
* Marker drag start handler attached to native API
* @param {Marker} The marker being moved
* @param {LatLongPoint} The starting location
*/
Mapstraction.prototype.dragstartHandler = function(marker, location) {
this.callEventListeners(''dragStarted'', {location: location,
marker: marker});
};
/**
* Marker drag end handler attached to native API
* @param {Marker} The marker being moved
* @param {LatLongPoint} The ending location
*/
Mapstraction.prototype.dragendHandler = function(marker, location) {
marker.location = location;
this.callEventListeners(''dragEnded'', {location: location,
marker: marker});
};
mxn.google.core.js
addMarker: function(marker, old) {
var map = this.maps[this.api];
var gpin = marker.toProprietary(this.api);
map.addOverlay(gpin);
GEvent.addListener(gpin, ''infowindowopen'', function() {
marker.openInfoBubble.fire();
});
GEvent.addListener(gpin, ''infowindowclose'', function() {
marker.closeInfoBubble.fire();
});
if(gpin.draggable) {
GEvent.addListener(gpin, ''dragstart'', function() {
var location = new mxn.LatLonPoint(this.mapstraction_marker,
gpin.getPoint().lat(), gpin.getPoint().lng());
mapstraction.dragstartHandler(this.mapstraction_marker, location);
});
GEvent.addListener(gpin, ''dragend'', function() {
var location = new mxn.LatLonPoint(this.mapstraction_marker,
gpin.getPoint().lat(), gpin.getPoint().lng());
mapstraction.dragendHandler(this.mapstraction_marker, location);
});
}
return gpin;
},
________________________________
This e-mail and any attachments may contain confidential material for the sole
use of the intended recipient. If you are not the intended recipient, please be
aware that any disclosure, copying, distribution or use of this e-mail or any
attachment is prohibited. If you have received this e-mail in error, please
contact the sender and delete all copies.
Thank you for your cooperation.
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
<http://lists.mapstraction.com/pipermail/mapstraction-mapstraction.com/attachments/20100823/323ad709/attachment.htm>
addEventListener and callEventListeners are the legacy eventing methods in
Mapstraction. I''m considering removing them as they just cause
confusion and
make the library bigger without adding any extra functionality. The new
style events are outlined in the documentation against each type and
they''re
implemented as an mxn.Event type.
call() is a method of the function type in JavaScript, there is also
apply(). They essentially just execute the function but they allow you to
specify the scope the function is executed in (the first argument). With
call() the remaining arguments are passed along to the function as its
arguments, with apply() the second argument is an array containing the
arguments to be passed to the function.
var doThing = function(foo, bar) { alert(this + '' '' + foo +
'' '' + bar); };
var a = ''scope(a)'';
var b = ''scope(b)'';
doThing.call(a, ''hello'', ''world'');
doThing.call(b, ''hello'', ''world'');
doThing.apply(a, [''hello'', ''world'']);
doThing.apply(b, [''hello'', ''world'']);
I''ll take a look at this dragging stuff along with the click stuff.
Cheers,
Derek
On 23 August 2010 21:42, Mitchell, Steve <Steve.Mitchell at garmin.com>
wrote:
> Bing now supports draggable markers. I?ve implemented draggable markers
> on my branch, but I?m having trouble using them because of something I
don?t
> understand about JavaScript.
>
>
>
> *PROBLEM STATEMENT*
>
>
>
> I?m having trouble writing a method compatible with the callEventListeners
> method:
>
>
>
> /**
>
> * Call listeners for a particular event.
>
> * @param {String} sEventType Call listeners of this event type
>
> * @param {Object} oEventArgs Event args object to pass back to the
> callback
>
> */
>
> Mapstraction.prototype.callEventListeners = function(sEventType,
> oEventArgs) {
>
> oEventArgs.source = this;
>
> for(var i = 0; i < this.eventListeners.length; i++) {
>
> var evLi = this.eventListeners[i];
>
> if(evLi.event_type == sEventType) {
>
> // only two cases for this, click and move
>
> if(evLi.back_compat_mode) {
>
> if(evLi.event_type == ''click'') {
>
> evLi.callback_function(oEventArgs.location);
>
> }
>
> else {
>
> evLi.callback_function();
>
> }
>
> }
>
> else {
>
> var scope = evLi.callback_object || this;
>
> *evLi.callback_function.call(scope, oEventArgs);*
>
> }
>
> }
>
> }
>
> };
>
>
>
> I?ve tried adding method with a ?call()? function but it says it can?t
> find the method. Does anybody have an example of adding and event listener
> that is compatible with the bold function above? I need to plug it in the
> code below:
>
>
>
> if (marker.draggable) {
>
> map.addEventListener(''dragEnded'', marker, *CALLABLE
FUNCTION*);
>
> }
>
>
>
> *DRAGGABLE IMPLEMENTATION*
>
>
>
> Here is my implementation of draggable. I?ve done this for Google. I will
> also do it for Microsoft if there is agreement that it is worth doing:
>
>
>
> *mxn.core.js*
>
>
>
> /**
>
> * Marker drag Started {marker: Marker}
>
> * @name mxn.Mapstraction#markerMoved
>
> * @event
>
> */
>
> ''dragStrated'',
>
>
>
> /**
>
> * Marker drag ended {marker: Marker}
>
> * @name mxn.Mapstraction#markerMoved
>
> * @event
>
> */
>
> ''dragEnded'',
>
>
>
> /**
>
> * Marker drag start handler attached to native API
>
> * @param {Marker} The marker being moved
>
> * @param {LatLongPoint} The starting location
>
> */
>
> Mapstraction.prototype.dragstartHandler = function(marker, location) {
>
> this.callEventListeners(''dragStarted'', {location:
location, marker:
> marker});
>
> };
>
>
>
> /**
>
> * Marker drag end handler attached to native API
>
> * @param {Marker} The marker being moved
>
> * @param {LatLongPoint} The ending location
>
> */
>
> Mapstraction.prototype.dragendHandler = function(marker, location) {
>
> marker.location = location;
>
> this.callEventListeners(''dragEnded'', {location: location,
marker: marker});
>
> };
>
>
>
>
>
> *mxn.google.core.js*
>
>
>
> addMarker: function(marker, old) {
>
> var map = this.maps[this.api];
>
> var gpin = marker.toProprietary(this.api);
>
> map.addOverlay(gpin);
>
> GEvent.addListener(gpin, ''infowindowopen'', function() {
>
> marker.openInfoBubble.fire();
>
> });
>
> GEvent.addListener(gpin, ''infowindowclose'', function() {
>
> marker.closeInfoBubble.fire();
>
> });
>
> *if(gpin.draggable) {*
>
> *GEvent.addListener(gpin, ''dragstart'', function() {*
>
> *var location = new mxn.LatLonPoint(this.mapstraction_marker,
> gpin.getPoint().lat(), gpin.getPoint().lng());*
>
> *mapstraction.dragstartHandler(this.mapstraction_marker, location);*
>
> *});*
>
> *GEvent.addListener(gpin, ''dragend'', function() {*
>
> *var location = new mxn.LatLonPoint(this.mapstraction_marker,
> gpin.getPoint().lat(), gpin.getPoint().lng());*
>
> *mapstraction.dragendHandler(this.mapstraction_marker, location);*
>
> *});*
>
> *}*
>
> return gpin;
>
> },
>
>
>
>
>
>
>
>
>
>
>
> ------------------------------
> This e-mail and any attachments may contain confidential material for the
> sole use of the intended recipient. If you are not the intended recipient,
> please be aware that any disclosure, copying, distribution or use of this
> e-mail or any attachment is prohibited. If you have received this e-mail in
> error, please contact the sender and delete all copies.
>
> Thank you for your cooperation.
>
> _______________________________________________
> Mapstraction mailing list
> Mapstraction at lists.mapstraction.com
> http://lists.mapstraction.com/listinfo.cgi/mapstraction-mapstraction.com
>
>
--
Derek Fowler
m. +44 (0) 7966 512 369
e. dezfowler at gmail.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
<http://lists.mapstraction.com/pipermail/mapstraction-mapstraction.com/attachments/20100825/44aa68a0/attachment-0001.htm>
Derek,
Thanks for the heads up on this. Sounds like my approach is out of sync with the
direction of Mapstraction.
I will pull what I?ve done for draggable out of my branch and re-commit, and
then I will look at the Event type and see if I can figure out how to implement
it in the new style. If you have a chance to look at dragging that would be
great, otherwise, I?m sure I?ll get there following your tip below.
Thanks,
Steve
From: mapstraction-bounces at lists.mapstraction.com
[mailto:mapstraction-bounces at lists.mapstraction.com] On Behalf Of Derek
Fowler
Sent: Wednesday, August 25, 2010 4:03 AM
To: mapstraction at lists.mapstraction.com
Subject: Re: [Mapstraction] Draggable Markers Help
addEventListener and callEventListeners are the legacy eventing methods in
Mapstraction. I''m considering removing them as they just cause
confusion and make the library bigger without adding any extra functionality.
The new style events are outlined in the documentation against each type and
they''re implemented as an mxn.Event type.
call() is a method of the function type in JavaScript, there is also apply().
They essentially just execute the function but they allow you to specify the
scope the function is executed in (the first argument). With call() the
remaining arguments are passed along to the function as its arguments, with
apply() the second argument is an array containing the arguments to be passed to
the function.
var doThing = function(foo, bar) { alert(this + '' '' + foo +
'' '' + bar); };
var a = ''scope(a)'';
var b = ''scope(b)'';
doThing.call(a, ''hello'', ''world'');
doThing.call(b, ''hello'', ''world'');
doThing.apply(a, [''hello'', ''world'']);
doThing.apply(b, [''hello'', ''world'']);
I''ll take a look at this dragging stuff along with the click stuff.
Cheers,
Derek
On 23 August 2010 21:42, Mitchell, Steve <Steve.Mitchell at
garmin.com<mailto:Steve.Mitchell at garmin.com>> wrote:
Bing now supports draggable markers. I?ve implemented draggable markers on my
branch, but I?m having trouble using them because of something I don?t
understand about JavaScript.
PROBLEM STATEMENT
I?m having trouble writing a method compatible with the callEventListeners
method:
/**
* Call listeners for a particular event.
* @param {String} sEventType Call listeners of this event type
* @param {Object} oEventArgs Event args object to pass back to the callback
*/
Mapstraction.prototype.callEventListeners = function(sEventType, oEventArgs) {
oEventArgs.source = this;
for(var i = 0; i < this.eventListeners.length; i++) {
var evLi = this.eventListeners[i];
if(evLi.event_type == sEventType) {
// only two cases for this, click and move
if(evLi.back_compat_mode) {
if(evLi.event_type == ''click'') {
evLi.callback_function(oEventArgs.location);
}
else {
evLi.callback_function();
}
}
else {
var scope = evLi.callback_object || this;
evLi.callback_function.call(scope, oEventArgs);
}
}
}
};
I?ve tried adding method with a ?call()? function but it says it can?t find the
method. Does anybody have an example of adding and event listener that is
compatible with the bold function above? I need to plug it in the code below:
if (marker.draggable) {
map.addEventListener(''dragEnded'', marker, CALLABLE FUNCTION);
}
DRAGGABLE IMPLEMENTATION
Here is my implementation of draggable. I?ve done this for Google. I will also
do it for Microsoft if there is agreement that it is worth doing:
mxn.core.js
/**
* Marker drag Started {marker: Marker}
* @name mxn.Mapstraction#markerMoved
* @event
*/
''dragStrated'',
/**
* Marker drag ended {marker: Marker}
* @name mxn.Mapstraction#markerMoved
* @event
*/
''dragEnded'',
/**
* Marker drag start handler attached to native API
* @param {Marker} The marker being moved
* @param {LatLongPoint} The starting location
*/
Mapstraction.prototype.dragstartHandler = function(marker, location) {
this.callEventListeners(''dragStarted'', {location: location,
marker: marker});
};
/**
* Marker drag end handler attached to native API
* @param {Marker} The marker being moved
* @param {LatLongPoint} The ending location
*/
Mapstraction.prototype.dragendHandler = function(marker, location) {
marker.location = location;
this.callEventListeners(''dragEnded'', {location: location,
marker: marker});
};
mxn.google.core.js
addMarker: function(marker, old) {
var map = this.maps[this.api];
var gpin = marker.toProprietary(this.api);
map.addOverlay(gpin);
GEvent.addListener(gpin, ''infowindowopen'', function() {
marker.openInfoBubble.fire();
});
GEvent.addListener(gpin, ''infowindowclose'', function() {
marker.closeInfoBubble.fire();
});
if(gpin.draggable) {
GEvent.addListener(gpin, ''dragstart'', function() {
var location = new mxn.LatLonPoint(this.mapstraction_marker,
gpin.getPoint().lat(), gpin.getPoint().lng());
mapstraction.dragstartHandler(this.mapstraction_marker, location);
});
GEvent.addListener(gpin, ''dragend'', function() {
var location = new mxn.LatLonPoint(this.mapstraction_marker,
gpin.getPoint().lat(), gpin.getPoint().lng());
mapstraction.dragendHandler(this.mapstraction_marker, location);
});
}
return gpin;
},
________________________________
This e-mail and any attachments may contain confidential material for the sole
use of the intended recipient. If you are not the intended recipient, please be
aware that any disclosure, copying, distribution or use of this e-mail or any
attachment is prohibited. If you have received this e-mail in error, please
contact the sender and delete all copies.
Thank you for your cooperation.
_______________________________________________
Mapstraction mailing list
Mapstraction at lists.mapstraction.com<mailto:Mapstraction at
lists.mapstraction.com>
http://lists.mapstraction.com/listinfo.cgi/mapstraction-mapstraction.com
--
Derek Fowler
m. +44 (0) 7966 512 369
e. dezfowler at gmail.com<mailto:dezfowler at gmail.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
<http://lists.mapstraction.com/pipermail/mapstraction-mapstraction.com/attachments/20100825/84121934/attachment-0001.htm>
Derek,
Here are some examples of Google code snippets that I am trying to convert to
Mapstraction for use with Microsoft maps. My implementation (samples at bottom
of email) don?t throw any errors, nor do they ever get called. I?m missing
something. Note that what I am trying to convert is a mixture of
GEvent.addListener and GEvent.addDomListener . I?m not sure if that makes any
difference on mxn.Event. I tried switching both to mxn.Event.addHandler(). Also,
note that the second from the last GEvent is binding two references.
GEvent.addListener(
this.map,
"dragend",
function() {
$(SearchBarHandlerConstants.LOCATION_ID).setValue(bundle_activitysearch_api.current_map_search);
this.setUserMapBoundaries();
}.bind(this)
);
GEvent.addDomListener(
this.map,
''zoomend'',
function(e) {
$(SearchBarHandlerConstants.LOCATION_ID).setValue(bundle_activitysearch_api.current_map_search);
this.setUserMapBoundaries();
}.bind(this)
);
GEvent.addDomListener(
document.getElementById(ExploreConstants.collapsedDom+activity.id),
''click'',
function(e) {
this.resetMarkers(i, activities, markers);
this.openGridAndPopup(activities, markers, expandeds, activity, i);
this.drawPolyline(activities[i].id);
}.bind(this)
);
GEvent.addDomListener(
document.getElementById(ExploreConstants.collapsedDom+activity.id),
''mouseover'',
function(e) {
markers[i].setImage(activities[i].highlightPath);
}
);
GEvent.addDomListener(
document.getElementById(ExploreConstants.expandedDom+activity.id),
''click'',
function(e) {
markers[i].closeInfoWindow();
markers[i].setImage(activities[i].path);
expandeds[i] = false;
}.bind(i, this)
);
GEvent.addListener(
markers[i],
''click'',
function(e) {
this.resetMarkers(i, activities, markers);
gridHandler.highlightAndExpandActivity(activities[i].id);
this.openGridAndPopup(activities, markers, expandeds, activity, i);
this.drawPolyline(activities[i].id);
}.bind(this)
);
Here is my attempt at implanting those with mxn.Event. Does this look right? It
runs, but drag and zoom on the bing map never hit the handler functions.
new mxn.Event("dragend", this.map).addHandler(
function() {
$(SearchBarHandlerConstants.LOCATION_ID).setValue(bundle_activitysearch_api.current_map_search);
this.setUserMapBoundaries();
}, this);
new mxn.Event("zoomend", this.map).addHandler(
function(e) {
$(SearchBarHandlerConstants.LOCATION_ID).setValue(bundle_activitysearch_api.current_map_search);
this.setUserMapBoundaries();
},this);
new
mxn.Event("click",document.getElementById(ExploreConstants.collapsedDom+activity.id)).addHandler(
function(e) {
this.resetMarkers(i, activities, markers);
this.openGridAndPopup(activities, markers, expandeds, activity, i);
this.drawPolyline(activities[i].id);
}, this);
new
mxn.Event(''mouseover'',document.getElementById(ExploreConstants.collapsedDom+activity.id)).addHandler(
function(e) {
markers[i].setImage(activities[i].highlightPath);
}, this);
new
mxn.Event(''mouseout'',document.getElementById(ExploreConstants.collapsedDom+activity.id)).addHandler(
function(e) {
if(!expandeds[i]){
markers[i].setImage(activities[i].path);
}
}, this);
From: mapstraction-bounces at lists.mapstraction.com
[mailto:mapstraction-bounces at lists.mapstraction.com] On Behalf Of Derek
Fowler
Sent: Wednesday, August 25, 2010 4:03 AM
To: mapstraction at lists.mapstraction.com
Subject: Re: [Mapstraction] Draggable Markers Help
addEventListener and callEventListeners are the legacy eventing methods in
Mapstraction. I''m considering removing them as they just cause
confusion and make the library bigger without adding any extra functionality.
The new style events are outlined in the documentation against each type and
they''re implemented as an mxn.Event type.
call() is a method of the function type in JavaScript, there is also apply().
They essentially just execute the function but they allow you to specify the
scope the function is executed in (the first argument). With call() the
remaining arguments are passed along to the function as its arguments, with
apply() the second argument is an array containing the arguments to be passed to
the function.
var doThing = function(foo, bar) { alert(this + '' '' + foo +
'' '' + bar); };
var a = ''scope(a)'';
var b = ''scope(b)'';
doThing.call(a, ''hello'', ''world'');
doThing.call(b, ''hello'', ''world'');
doThing.apply(a, [''hello'', ''world'']);
doThing.apply(b, [''hello'', ''world'']);
I''ll take a look at this dragging stuff along with the click stuff.
Cheers,
Derek
On 23 August 2010 21:42, Mitchell, Steve <Steve.Mitchell at
garmin.com<mailto:Steve.Mitchell at garmin.com>> wrote:
Bing now supports draggable markers. I?ve implemented draggable markers on my
branch, but I?m having trouble using them because of something I don?t
understand about JavaScript.
PROBLEM STATEMENT
I?m having trouble writing a method compatible with the callEventListeners
method:
/**
* Call listeners for a particular event.
* @param {String} sEventType Call listeners of this event type
* @param {Object} oEventArgs Event args object to pass back to the callback
*/
Mapstraction.prototype.callEventListeners = function(sEventType, oEventArgs) {
oEventArgs.source = this;
for(var i = 0; i < this.eventListeners.length; i++) {
var evLi = this.eventListeners[i];
if(evLi.event_type == sEventType) {
// only two cases for this, click and move
if(evLi.back_compat_mode) {
if(evLi.event_type == ''click'') {
evLi.callback_function(oEventArgs.location);
}
else {
evLi.callback_function();
}
}
else {
var scope = evLi.callback_object || this;
evLi.callback_function.call(scope, oEventArgs);
}
}
}
};
I?ve tried adding method with a ?call()? function but it says it can?t find the
method. Does anybody have an example of adding and event listener that is
compatible with the bold function above? I need to plug it in the code below:
if (marker.draggable) {
map.addEventListener(''dragEnded'', marker, CALLABLE FUNCTION);
}
DRAGGABLE IMPLEMENTATION
Here is my implementation of draggable. I?ve done this for Google. I will also
do it for Microsoft if there is agreement that it is worth doing:
mxn.core.js
/**
* Marker drag Started {marker: Marker}
* @name mxn.Mapstraction#markerMoved
* @event
*/
''dragStrated'',
/**
* Marker drag ended {marker: Marker}
* @name mxn.Mapstraction#markerMoved
* @event
*/
''dragEnded'',
/**
* Marker drag start handler attached to native API
* @param {Marker} The marker being moved
* @param {LatLongPoint} The starting location
*/
Mapstraction.prototype.dragstartHandler = function(marker, location) {
this.callEventListeners(''dragStarted'', {location: location,
marker: marker});
};
/**
* Marker drag end handler attached to native API
* @param {Marker} The marker being moved
* @param {LatLongPoint} The ending location
*/
Mapstraction.prototype.dragendHandler = function(marker, location) {
marker.location = location;
this.callEventListeners(''dragEnded'', {location: location,
marker: marker});
};
mxn.google.core.js
addMarker: function(marker, old) {
var map = this.maps[this.api];
var gpin = marker.toProprietary(this.api);
map.addOverlay(gpin);
GEvent.addListener(gpin, ''infowindowopen'', function() {
marker.openInfoBubble.fire();
});
GEvent.addListener(gpin, ''infowindowclose'', function() {
marker.closeInfoBubble.fire();
});
if(gpin.draggable) {
GEvent.addListener(gpin, ''dragstart'', function() {
var location = new mxn.LatLonPoint(this.mapstraction_marker,
gpin.getPoint().lat(), gpin.getPoint().lng());
mapstraction.dragstartHandler(this.mapstraction_marker, location);
});
GEvent.addListener(gpin, ''dragend'', function() {
var location = new mxn.LatLonPoint(this.mapstraction_marker,
gpin.getPoint().lat(), gpin.getPoint().lng());
mapstraction.dragendHandler(this.mapstraction_marker, location);
});
}
return gpin;
},
________________________________
This e-mail and any attachments may contain confidential material for the sole
use of the intended recipient. If you are not the intended recipient, please be
aware that any disclosure, copying, distribution or use of this e-mail or any
attachment is prohibited. If you have received this e-mail in error, please
contact the sender and delete all copies.
Thank you for your cooperation.
_______________________________________________
Mapstraction mailing list
Mapstraction at lists.mapstraction.com<mailto:Mapstraction at
lists.mapstraction.com>
http://lists.mapstraction.com/listinfo.cgi/mapstraction-mapstraction.com
--
Derek Fowler
m. +44 (0) 7966 512 369
e. dezfowler at gmail.com<mailto:dezfowler at gmail.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
<http://lists.mapstraction.com/pipermail/mapstraction-mapstraction.com/attachments/20100825/bca46482/attachment-0001.htm>
''dragStrated'' - oops Also, if methods are old and slated to die, please document this. We JS wimps find it very hard to walk into complex libraries like Mapstraction/Openlayers etc. Thanks! On Wed, Aug 25, 2010 at 9:43 AM, Mitchell, Steve <Steve.Mitchell at garmin.com> wrote:> Derek, > > > > Here are some examples of Google code snippets that I am trying to convert > to Mapstraction for use with Microsoft maps. My implementation (samples at > bottom of email) don?t throw any errors, nor do they ever get called. I?m > missing something. Note that what I am trying to convert is a mixture of > GEvent.addListener and GEvent.addDomListener . I?m not sure if that makes > any difference on mxn.Event. I tried switching both to > mxn.Event.addHandler(). Also, note that the second from the last GEvent is > binding two references. > > > > GEvent.addListener( > > this.map, > > "dragend", > > function() { > > $(SearchBarHandlerConstants.LOCATION_ID).setValue(bundle_activitysearch_api.current_map_search); > > this.setUserMapBoundaries(); > > }.bind(this) > > ); > > > > GEvent.addDomListener( > > this.map, > > ''zoomend'', > > function(e) { > > $(SearchBarHandlerConstants.LOCATION_ID).setValue(bundle_activitysearch_api.current_map_search); > > this.setUserMapBoundaries(); > > }.bind(this) > > ); > > > > GEvent.addDomListener( > > document.getElementById(ExploreConstants.collapsedDom+activity.id), > > ''click'', > > function(e) { > > this.resetMarkers(i, activities, markers); > > this.openGridAndPopup(activities, markers, expandeds, activity, i); > > this.drawPolyline(activities[i].id); > > }.bind(this) > > ); > > > > GEvent.addDomListener( > > document.getElementById(ExploreConstants.collapsedDom+activity.id), > > ''mouseover'', > > function(e) { > > markers[i].setImage(activities[i].highlightPath); > > } > > ); > > > > GEvent.addDomListener( > > document.getElementById(ExploreConstants.expandedDom+activity.id), > > ''click'', > > function(e) { > > markers[i].closeInfoWindow(); > > markers[i].setImage(activities[i].path); > > expandeds[i] = false; > > }.bind(i, this) > > ); > > > > GEvent.addListener( > > markers[i], > > ''click'', > > function(e) { > > this.resetMarkers(i, activities, markers); > > gridHandler.highlightAndExpandActivity(activities[i].id); > > this.openGridAndPopup(activities, markers, expandeds, activity, i); > > this.drawPolyline(activities[i].id); > > }.bind(this) > > ); > > > > Here is my attempt at implanting those with mxn.Event. Does this look right? > It runs, but drag and zoom on the bing map never hit the handler functions. > > > > new mxn.Event("dragend", this.map).addHandler( > > function() { > > $(SearchBarHandlerConstants.LOCATION_ID).setValue(bundle_activitysearch_api.current_map_search); > > this.setUserMapBoundaries(); > > }, this); > > > > new mxn.Event("zoomend", this.map).addHandler( > > function(e) { > > $(SearchBarHandlerConstants.LOCATION_ID).setValue(bundle_activitysearch_api.current_map_search); > > this.setUserMapBoundaries(); > > },this); > > > > new > mxn.Event("click",document.getElementById(ExploreConstants.collapsedDom+activity.id)).addHandler( > > function(e) { > > this.resetMarkers(i, activities, markers); > > this.openGridAndPopup(activities, markers, expandeds, activity, i); > > this.drawPolyline(activities[i].id); > > }, this); > > > > new > mxn.Event(''mouseover'',document.getElementById(ExploreConstants.collapsedDom+activity.id)).addHandler( > > function(e) { > > markers[i].setImage(activities[i].highlightPath); > > }, this); > > > > new > mxn.Event(''mouseout'',document.getElementById(ExploreConstants.collapsedDom+activity.id)).addHandler( > > function(e) { > > if(!expandeds[i]){ > > markers[i].setImage(activities[i].path); > > } > > }, this); > > > > > > From: mapstraction-bounces at lists.mapstraction.com > [mailto:mapstraction-bounces at lists.mapstraction.com] On Behalf Of Derek > Fowler > Sent: Wednesday, August 25, 2010 4:03 AM > To: mapstraction at lists.mapstraction.com > Subject: Re: [Mapstraction] Draggable Markers Help > > > > addEventListener and callEventListeners are the legacy eventing methods in > Mapstraction. I''m considering removing them as they just cause confusion and > make the library bigger without adding any extra functionality. The new > style events are outlined in the documentation against each type and they''re > implemented as an mxn.Event type. > > > > call() is a method of the function type in JavaScript, there is also > apply(). They essentially just execute the function but they allow you to > specify the scope the function is executed in (the first argument). With > call() the remaining arguments are passed along to the function as its > arguments, with apply() the second argument is an array containing the > arguments to be passed to the function. > > > > var doThing = function(foo, bar) { alert(this + '' ?'' + foo + '' '' + bar); }; > > > > var a = ''scope(a)''; > > var b = ''scope(b)''; > > > > doThing.call(a, ''hello'', ''world''); > > doThing.call(b, ''hello'', ''world''); > > > > doThing.apply(a, [''hello'', ''world'']); > > doThing.apply(b, [''hello'', ''world'']); > > > > I''ll take a look at this dragging stuff along with the click stuff. > > > > Cheers, > > Derek > > > > On 23 August 2010 21:42, Mitchell, Steve <Steve.Mitchell at garmin.com> wrote: > > Bing now supports draggable markers. I?ve implemented draggable markers on > my branch, but I?m having trouble using them because of something I don?t > understand about JavaScript. > > > > PROBLEM STATEMENT > > > > I?m having trouble writing a method compatible with the callEventListeners > method: > > > > /** > > ?* Call listeners for a particular event. > > ?* @param {String} sEventType Call listeners of this event type > > ?* @param {Object} oEventArgs Event args object to pass back to the callback > > ?*/ > > Mapstraction.prototype.callEventListeners = function(sEventType, oEventArgs) > { > > oEventArgs.source = this; > > for(var i = 0; i < this.eventListeners.length; i++) { > > var evLi = this.eventListeners[i]; > > if(evLi.event_type == sEventType) { > > // only two cases for this, click and move > > if(evLi.back_compat_mode) { > > if(evLi.event_type == ''click'') { > > evLi.callback_function(oEventArgs.location); > > } > > else { > > evLi.callback_function(); > > } > > } > > else { > > var scope = evLi.callback_object || this; > > evLi.callback_function.call(scope, oEventArgs); > > } > > } > > } > > }; > > > > I?ve tried? adding method with a ?call()? function but it says it can?t find > the method. Does anybody have an example of adding and event listener that > is compatible with the bold function above? I need to plug it in the code > below: > > > > if (marker.draggable) { > > map.addEventListener(''dragEnded'', marker, CALLABLE FUNCTION); > > } > > > > DRAGGABLE IMPLEMENTATION > > > > Here is my implementation of draggable. I?ve done this for Google. I will > also do it for Microsoft if there is agreement that it is worth doing: > > > > mxn.core.js > > > > /** > > * Marker drag Started {marker: Marker} > > * @name mxn.Mapstraction#markerMoved > > * @event > > */ > > ''dragStrated'', > > > > /** > > * Marker drag ended {marker: Marker} > > * @name mxn.Mapstraction#markerMoved > > * @event > > */ > > ''dragEnded'', > > > > /** > > ?* Marker drag start handler attached to native API > > ?* @param {Marker} The marker being moved > > ?* @param {LatLongPoint} The starting location > > ?*/ > > Mapstraction.prototype.dragstartHandler = function(marker, location) { > > this.callEventListeners(''dragStarted'', {location: location, marker: > marker}); > > }; > > > > /** > > ?* Marker drag end handler attached to native API > > ?* @param {Marker} The marker being moved > > ?* @param {LatLongPoint} The ending location > > ?*/ > > Mapstraction.prototype.dragendHandler = function(marker, location) { > > marker.location = location; > > this.callEventListeners(''dragEnded'', {location: location, marker: marker}); > > }; > > > > > > mxn.google.core.js > > > > addMarker: function(marker, old) { > > var map = this.maps[this.api]; > > var gpin = marker.toProprietary(this.api); > > map.addOverlay(gpin); > > GEvent.addListener(gpin, ''infowindowopen'', function() { > > marker.openInfoBubble.fire(); > > }); > > GEvent.addListener(gpin, ''infowindowclose'', function() { > > marker.closeInfoBubble.fire(); > > }); > > if(gpin.draggable) { > > GEvent.addListener(gpin, ''dragstart'', function() { > > var location = new mxn.LatLonPoint(this.mapstraction_marker, > gpin.getPoint().lat(), gpin.getPoint().lng()); > > mapstraction.dragstartHandler(this.mapstraction_marker, location); > > }); > > GEvent.addListener(gpin, ''dragend'', function() { > > var location = new mxn.LatLonPoint(this.mapstraction_marker, > gpin.getPoint().lat(), gpin.getPoint().lng()); > > mapstraction.dragendHandler(this.mapstraction_marker, location); > > }); > > } > > return gpin; > > }, > > > > > > > > > > > > > > ________________________________ > > This e-mail and any attachments may contain confidential material for the > sole use of the intended recipient. If you are not the intended recipient, > please be aware that any disclosure, copying, distribution or use of this > e-mail or any attachment is prohibited. If you have received this e-mail in > error, please contact the sender and delete all copies. > > Thank you for your cooperation. > > _______________________________________________ > Mapstraction mailing list > Mapstraction at lists.mapstraction.com > http://lists.mapstraction.com/listinfo.cgi/mapstraction-mapstraction.com > > > -- > Derek Fowler > m. +44 (0) 7966 512 369 > e. dezfowler at gmail.com > > _______________________________________________ > Mapstraction mailing list > Mapstraction at lists.mapstraction.com > http://lists.mapstraction.com/listinfo.cgi/mapstraction-mapstraction.com > >-- Lance Norskog goksron at gmail.com