mirror of https://github.com/webbukkit/dynmap.git
Extend CustomMarker from L.Marker, add CustomIcon for icon handling
This commit is contained in:
James Lyne
parent
239f13326b
commit
82119dc32d
|
|
@ -1,146 +1,45 @@
|
|||
L.CustomMarker = L.Class.extend({
|
||||
|
||||
includes: L.Mixin.Events,
|
||||
L.CustomMarker = L.Marker.extend({
|
||||
|
||||
options: {
|
||||
contentCreator: undefined,
|
||||
elementCreator: undefined,
|
||||
shadowCreator: undefined,
|
||||
clickable: true,
|
||||
draggable: false
|
||||
},
|
||||
|
||||
initialize: function(latlng, options) {
|
||||
//Dynmap - Pass options to CustomIcon
|
||||
options.icon = new L.CustomIcon(options);
|
||||
|
||||
L.Util.setOptions(this, options);
|
||||
this._latlng = latlng;
|
||||
},
|
||||
|
||||
onAdd: function(map) {
|
||||
this._map = map;
|
||||
|
||||
if (!this._element && this.options.elementCreator) {
|
||||
this._element = this.options.elementCreator();
|
||||
|
||||
this._element.className += ' leaflet-marker-icon';
|
||||
|
||||
this._initInteraction();
|
||||
}
|
||||
if (!this._shadow && this.options.shadowCreator) {
|
||||
this._shadow = this.options.shadowCreator();
|
||||
}
|
||||
|
||||
if (this._element) {
|
||||
map._panes.markerPane.appendChild(this._element);
|
||||
}
|
||||
if (this._shadow) {
|
||||
map._panes.shadowPane.appendChild(this._shadow);
|
||||
}
|
||||
|
||||
map.on('viewreset', this._reset, this);
|
||||
this._reset();
|
||||
if (map.options.zoomAnimation && map.options.markerZoomAnimation) {
|
||||
map.on('zoomanim', this._animateZoom, this);
|
||||
}
|
||||
},
|
||||
|
||||
onRemove: function(map) {
|
||||
if (this._element) {
|
||||
map._panes.markerPane.removeChild(this._element);
|
||||
}
|
||||
if (this._shadow) {
|
||||
map._panes.shadowPane.removeChild(this._elementShadow);
|
||||
}
|
||||
|
||||
map.off('viewreset', this._reset, this);
|
||||
|
||||
map = null;
|
||||
},
|
||||
|
||||
getLatLng: function() {
|
||||
return this._latlng;
|
||||
},
|
||||
|
||||
setLatLng: function(latlng) {
|
||||
this._latlng = latlng;
|
||||
this._reset();
|
||||
},
|
||||
|
||||
_animateZoom: function (opt) {
|
||||
var pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center);
|
||||
L.DomUtil.setPosition(this._element, pos);
|
||||
this._element.style.zIndex = pos.y;
|
||||
},
|
||||
|
||||
_reset: function() {
|
||||
if(this._map == null)
|
||||
return;
|
||||
var pos = this._map.latLngToLayerPoint(this._latlng);
|
||||
|
||||
if (this._element) {
|
||||
L.DomUtil.setPosition(this._element, pos);
|
||||
}
|
||||
if (this._shadow) {
|
||||
L.DomUtil.setPosition(this._shadow, pos);
|
||||
}
|
||||
|
||||
if (this._element) {
|
||||
this._element.style.zIndex = pos.y;
|
||||
}
|
||||
},
|
||||
|
||||
_initInteraction: function() {
|
||||
if (this._element && this.options.clickable) {
|
||||
this._element.className += ' leaflet-clickable';
|
||||
|
||||
L.DomEvent.addListener(this._element, 'click', this._onMouseClick, this);
|
||||
|
||||
var events = ['dblclick', 'mousedown', 'mouseover', 'mouseout'];
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
L.DomEvent.addListener(this._element, events[i], this._fireMouseEvent, this);
|
||||
}
|
||||
}
|
||||
|
||||
if (this._element && L.Handler.MarkerDrag) {
|
||||
this.dragging = new L.Handler.MarkerDrag(this);
|
||||
|
||||
if (this.options.draggable) {
|
||||
this.dragging.enable();
|
||||
}
|
||||
}
|
||||
var animation = (map.options.zoomAnimation && map.options.markerZoomAnimation);
|
||||
if (this._element)
|
||||
this._element.className += animation ? ' leaflet-zoom-animated' : ' leaflet-zoom-hide';
|
||||
},
|
||||
|
||||
_onMouseClick: function(e) {
|
||||
L.DomEvent.stopPropagation(e);
|
||||
if (this.dragging && this.dragging.moved()) { return; }
|
||||
this.fire(e.type);
|
||||
},
|
||||
|
||||
_fireMouseEvent: function(e) {
|
||||
this.fire(e.type);
|
||||
L.DomEvent.stopPropagation(e);
|
||||
},
|
||||
|
||||
openPopup: function() {
|
||||
this._popup.setLatLng(this._latlng);
|
||||
this._map.openPopup(this._popup);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
closePopup: function() {
|
||||
if (this._popup) {
|
||||
this._popup._close();
|
||||
}
|
||||
},
|
||||
|
||||
bindPopup: function(content, options) {
|
||||
this._popup = new L.Popup(options);
|
||||
this._popup.setContent(content);
|
||||
this.on('click', this.openPopup, this);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
L.CustomIcon = L.DivIcon.extend({
|
||||
options: {
|
||||
elementCreator: function() {
|
||||
return document.createElement('div');
|
||||
},
|
||||
shadowCreator: function() { },
|
||||
className: '', //Remove divIcon class
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
L.Util.setOptions(this, options);
|
||||
},
|
||||
|
||||
createIcon() {
|
||||
//Call elementCreator to create icon
|
||||
var icon = this.options.elementCreator(),
|
||||
className = icon.className;
|
||||
|
||||
icon.className += ' leaflet-marker-icon'; //Required for correct styling
|
||||
|
||||
return icon;
|
||||
},
|
||||
|
||||
createShadow() {
|
||||
return this.options.shadowCreator();
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue