Permalink
Browse files

Support for add/remove markers and for drag/dragend events.

  • Loading branch information...
mmarcon committed Dec 9, 2012
1 parent 9d856b7 commit ab49eb8ce1a6ffdc88f4004f558b826ac0d2c422
Showing with 59 additions and 16 deletions.
  1. +20 −8 src/examples/index.advancedmarkers.html
  2. +39 −8 src/extensions/advancedmarkers.js
@@ -76,19 +76,31 @@
marker.on('click', function(){
this.toggle();
});
};
marker.on('dragend', function(e){
console.log(e.drag);
});
}
function addRemoveClick(marker){
marker.on('click', function(){
this.remove();
});
marker.on('removed', function(){
alert('marker removed');
});
}
$('#map').jHERE({
center: [52.5, 13.3],
zoom: 12
})
.jHERE('marker', [52.5, 13.3], {group: 'restaurants', fill: '#4169e1', selectedFill: '#dc143c'}, addClick)
.jHERE('marker', [52.5, 13.35], {group: 'restaurants', fill: '#4169e1', selectedFill: '#dc143c'}, addClick)
.jHERE('marker', [52.52, 13.3], {group: 'restaurants', fill: '#4169e1', selectedFill: '#dc143c'}, addClick)
.jHERE('marker', [52.51, 13.27], {group: 'restaurants', fill: '#4169e1', selectedFill: '#dc143c'}, addClick)
.jHERE('marker', [52.52, 13.34], {group: 'restaurants', fill: '#4169e1', selectedFill: '#dc143c'}, addClick)
.jHERE('marker', [52.48, 13.4], {group: 'restaurants', fill: '#4169e1', selectedFill: '#dc143c'}, addClick)
.jHERE('marker', [52.52, 13.35], {group: 'restaurants', icon: 'resources/monkey2.png', selectedIcon: 'resources/monkey.png', draggable: true}, addClick);
.jHERE('marker', [52.5, 13.3], {group: 'restaurants', fill: '#4169e1', selectedFill: '#dc143c', draggable: true}, addClick)
.jHERE('marker', [52.5, 13.35], {group: 'restaurants', fill: '#4169e1', selectedFill: '#dc143c', draggable: true}, addClick)
.jHERE('marker', [52.52, 13.3], {group: 'restaurants', fill: '#4169e1', selectedFill: '#dc143c', draggable: true}, addClick)
.jHERE('marker', [52.51, 13.27], {group: 'restaurants', fill: '#4169e1', selectedFill: '#dc143c', draggable: true}, addClick)
.jHERE('marker', [52.52, 13.34], {group: 'restaurants', fill: '#4169e1', selectedFill: '#dc143c', draggable: true}, addClick)
.jHERE('marker', [52.48, 13.4], {group: 'restaurants', fill: '#4169e1', selectedFill: '#dc143c', draggable: true}, addClick)
.jHERE('marker', [52.52, 13.35], {group: 'restaurants', icon: 'resources/monkey2.png', selectedIcon: 'resources/monkey.png', draggable: true}, addRemoveClick);
$('li').on('click', function(e){
var group = $.jHERE.getMarkersGroup($(this).data('group'));
@@ -103,25 +103,46 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
this.map = config.map;
this.group = config.group;
this.config = config;
this.selected = false;
}
M = jHEREMarker.prototype;
function normalizeDragEvent(evt) {
var mapDragType = evt.dataTransfer.getData("application/map-drag-type"),
marker = this.marker, offset;
if (mapDragType.match(/marker/i)) {
// Get the offset of the mouse relative to the top-left corner of the marker.
offset = evt.dataTransfer.getData("application/map-drag-object-offset");
/* Calculate the current coordinate of the marker, so substract the offset from the
* current displayX/Y position to get the top-left position of the marker and then
* add the anchor to get the pixel position of the anchor of the marker and then
* query for the coordinate of that pixel position
*/
evt.drag = this.map.pixelToGeo(evt.displayX - offset.x + marker.anchor.x, evt.displayY - offset.y + marker.anchor.y);
}
return evt;
}
/*click, dblclick, mousemove, mouseover, mouseout, mouseenter, mouseleave, longpress*/
M.on = function(event, callback){
var _callback, b;
if(!this.listeners[event]) {
this.listeners[event] = {};
}
_callback = function(event){
if(event.type && event.type.match(/drag/i)) {
event = normalizeDragEvent.call(this, event);
}
var e = $.Event(event.type, {
originalEvent: event,
geo: {
latitude: event.target.coordinate.latitude,
longitude: event.target.coordinate.longitude
latitude: this.marker.coordinate.latitude,
longitude: this.marker.coordinate.longitude
},
drag: event.drag,
target: event.target
});
/*
@@ -147,12 +168,26 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
this.marker.removeListener(event, l[event]['' + hashCode(callback)]);
};
function trigger(eventName) {
if(!this.listeners[eventName]) {
return;
}
var marker = this, e = $.Event(eventName, {
geo: this.marker.coordinate
});
$.each(this.listeners[eventName], function(k, f){
f.call(marker, e);
});
}
M.remove = function(){
groups[this.group.name].container.objects.remove(this.marker);
trigger.call(this, 'removed');
};
M.add = function(){
groups[this.group.name].container.objects.add(this.marker);
trigger.call(this, 'added');
};
function setColor(color){
@@ -185,11 +220,6 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
this.select();
};
/*
Feautures:
- drag, add, remove events
*/
function init(){
if(_ns) {
return;
@@ -219,6 +249,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
this.map.objects.add(groups[markerOptions.group].container);
}
markerOptions.group = groups[markerOptions.group];
markerOptions.map = this.map;
if (markerOptions.icon) {
marker = new jHEREMarker(new _ns.map.Marker(position, markerOptions), markerOptions);

0 comments on commit ab49eb8

Please sign in to comment.