Added (proper) initial Leaflet support.
This commit is contained in:
FrozenCow
parent
bf85b2a8be
commit
baf7bf83c5
17 changed files with 950 additions and 178 deletions
|
|
@ -1,90 +1,111 @@
|
|||
function CustomMarker(latlng, map, oncreated) {
|
||||
google.maps.OverlayView.call(this);
|
||||
|
||||
this.latlng_ = latlng;
|
||||
|
||||
// Once the LatLng and text are set, add the overlay to the map. This will
|
||||
// trigger a call to panes_changed which should in turn call draw.
|
||||
this.setMap(map);
|
||||
|
||||
this.oncreated = oncreated;
|
||||
}
|
||||
L.CustomMarker = L.Class.extend({
|
||||
|
||||
CustomMarker.prototype = new google.maps.OverlayView();
|
||||
|
||||
CustomMarker.prototype.draw = function() {
|
||||
var me = this;
|
||||
if (this.removed)
|
||||
return;
|
||||
// Check if the div has been created.
|
||||
var div = this.div_;
|
||||
if (!div) {
|
||||
// Create a overlay text DIV
|
||||
div = this.div_ = document.createElement('DIV');
|
||||
// Create the DIV representing our CustomMarker
|
||||
div.style.position = "absolute";
|
||||
includes: L.Mixin.Events,
|
||||
|
||||
options: {
|
||||
contentCreator: undefined,
|
||||
shadowCreator: undefined,
|
||||
clickable: true,
|
||||
draggable: false
|
||||
},
|
||||
|
||||
initialize: function(latlng, options) {
|
||||
L.Util.setOptions(this, options);
|
||||
this._latlng = latlng;
|
||||
},
|
||||
|
||||
onAdd: function(map) {
|
||||
this._map = map;
|
||||
|
||||
google.maps.event.addDomListener(div, "click", function(event) {
|
||||
google.maps.event.trigger(me, "click");
|
||||
});
|
||||
if (!this._element && this.options.elementCreator) {
|
||||
this._element = this.options.elementCreator();
|
||||
|
||||
|
||||
// TODO: Pass this fix to Leaflet-dev(s), it may be a bug in Leaflet.
|
||||
this._element.style.position = 'absolute';
|
||||
|
||||
|
||||
this._initInteraction();
|
||||
}
|
||||
if (!this._shadow && this.options.shadowCreator) {
|
||||
this._shadow = this.options.shadowCreator();
|
||||
}
|
||||
|
||||
this.oncreated(div);
|
||||
if (this._element) {
|
||||
map._panes.markerPane.appendChild(this._element);
|
||||
}
|
||||
if (this._shadow) {
|
||||
map._panes.shadowPane.appendChild(this._shadow);
|
||||
}
|
||||
|
||||
// Then add the overlay to the DOM
|
||||
var panes = this.getPanes();
|
||||
panes.overlayLayer.appendChild(div);
|
||||
}
|
||||
map.on('viewreset', this._reset, this);
|
||||
this._reset();
|
||||
},
|
||||
|
||||
// Position the overlay
|
||||
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
|
||||
if (point) {
|
||||
div.style.left = point.x + 'px';
|
||||
div.style.top = point.y + 'px';
|
||||
}
|
||||
};
|
||||
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);
|
||||
},
|
||||
|
||||
getLatLng: function() {
|
||||
return this._latlng;
|
||||
},
|
||||
|
||||
setLatLng: function(latlng) {
|
||||
this._latlng = latlng;
|
||||
this._reset();
|
||||
},
|
||||
|
||||
_reset: function() {
|
||||
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);
|
||||
|
||||
CustomMarker.prototype.setPosition = function(p) {
|
||||
this.latlng_ = p;
|
||||
var projection = this.getProjection();
|
||||
if (projection) {
|
||||
var point = projection.fromLatLngToDivPixel(this.latlng_);
|
||||
this.div_.style.left = point.x + 'px';
|
||||
this.div_.style.top = point.y + 'px';
|
||||
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();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_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);
|
||||
}
|
||||
};
|
||||
|
||||
CustomMarker.prototype.getPosition = function(p) {
|
||||
return this.latlng_;
|
||||
};
|
||||
|
||||
CustomMarker.prototype.hide = function() {
|
||||
if (this.div_ && !this.isHidden) {
|
||||
this.div_.style.display = 'none';
|
||||
this.isHidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
CustomMarker.prototype.show = function() {
|
||||
if (this.div_ && this.isHidden) {
|
||||
this.div_.style.display = 'block';
|
||||
this.isHidden = false;
|
||||
}
|
||||
}
|
||||
|
||||
CustomMarker.prototype.toggle = function(t) {
|
||||
if ((typeof t) == "boolean") {
|
||||
if (t) { this.show(); }
|
||||
else { this.hide(); }
|
||||
} else {
|
||||
this.toggle((this.isHidden) == true);
|
||||
}
|
||||
}
|
||||
|
||||
CustomMarker.prototype.remove = function() {
|
||||
// Check if the overlay was on the map and needs to be removed.
|
||||
if (this.div_) {
|
||||
this.div_.parentNode.removeChild(this.div_);
|
||||
this.div_ = null;
|
||||
this.removed = true;
|
||||
}
|
||||
};
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue