114 lines
3.2 KiB
JavaScript
114 lines
3.2 KiB
JavaScript
import L from "leaflet";
|
|
|
|
export class OverlappingMarkerSpiderfier {
|
|
constructor(map, options = {}) {
|
|
this.map = map;
|
|
this.markers = [];
|
|
this.markerListeners = [];
|
|
this.listeners = {};
|
|
this.nearbyDistance = options.nearbyDistance || 20;
|
|
this.circleSpiralSwitchover = options.circleSpiralSwitchover || 9;
|
|
this.circleFootSeparation = options.circleFootSeparation || 25; // pixels
|
|
this.circleStartAngle = options.circleStartAngle || Math.PI / 6;
|
|
this.spiralFootSeparation = options.spiralFootSeparation || 28; // pixels
|
|
this.spiralLengthStart = options.spiralLengthStart || 11;
|
|
this.spiralLengthFactor = options.spiralLengthFactor || 5;
|
|
this.legWeight = options.legWeight || 1.5;
|
|
this.legColors = options.legColors || {
|
|
usual: "#222",
|
|
highlighted: "#f00",
|
|
};
|
|
|
|
this.initMarkerArrays();
|
|
this.map.on("click", this.unspiderfy.bind(this));
|
|
this.map.on("zoomend", this.unspiderfy.bind(this));
|
|
}
|
|
|
|
initMarkerArrays() {
|
|
this.markers = [];
|
|
this.markerListeners = [];
|
|
}
|
|
|
|
addMarker(marker) {
|
|
if (marker._oms) return this;
|
|
marker._oms = true;
|
|
|
|
const listener = () => {
|
|
this.spiderListener(marker);
|
|
};
|
|
|
|
marker.on("click", listener);
|
|
this.markerListeners.push(listener);
|
|
this.markers.push(marker);
|
|
|
|
return this;
|
|
}
|
|
|
|
spiderListener(marker) {
|
|
const spidered = !!marker._omsData;
|
|
if (!spidered) {
|
|
const nearMarkers = this.nearbyMarkers(marker);
|
|
if (nearMarkers.length > 1) {
|
|
this.spiderfy(nearMarkers);
|
|
}
|
|
}
|
|
}
|
|
|
|
nearbyMarkers(marker) {
|
|
const nearby = [];
|
|
const markerPt = this.map.latLngToLayerPoint(marker.getLatLng());
|
|
this.markers.forEach((m) => {
|
|
if (m !== marker) {
|
|
const mPt = this.map.latLngToLayerPoint(m.getLatLng());
|
|
const distanceSq = this.ptDistanceSq(mPt, markerPt);
|
|
if (distanceSq < this.nearbyDistance * this.nearbyDistance) {
|
|
nearby.push(m);
|
|
}
|
|
}
|
|
});
|
|
return nearby;
|
|
}
|
|
|
|
spiderfy(markers) {
|
|
const centerPt = this.map.latLngToLayerPoint(markers[0].getLatLng());
|
|
markers.forEach((marker, index) => {
|
|
const angle =
|
|
this.circleStartAngle + (index * 2 * Math.PI) / markers.length;
|
|
const legLength =
|
|
this.circleFootSeparation * (2 + index / markers.length);
|
|
const newPt = L.point(
|
|
centerPt.x + legLength * Math.cos(angle),
|
|
centerPt.y + legLength * Math.sin(angle)
|
|
);
|
|
|
|
const newLatLng = this.map.layerPointToLatLng(newPt);
|
|
marker.setLatLng(newLatLng);
|
|
marker.setZIndexOffset(1000);
|
|
|
|
const polyline = L.polyline([marker.getLatLng(), newLatLng], {
|
|
color: this.legColors.usual,
|
|
weight: this.legWeight,
|
|
clickable: false,
|
|
});
|
|
this.map.addLayer(polyline);
|
|
});
|
|
}
|
|
|
|
unspiderfy() {
|
|
this.markers.forEach((marker) => {
|
|
if (marker._omsData) {
|
|
marker.setLatLng(marker._omsData.usualPosition);
|
|
marker.setZIndexOffset(0);
|
|
this.map.removeLayer(marker._omsData.leg);
|
|
delete marker._omsData;
|
|
}
|
|
});
|
|
}
|
|
|
|
ptDistanceSq(pt1, pt2) {
|
|
const dx = pt1.x - pt2.x;
|
|
const dy = pt1.y - pt2.y;
|
|
return dx * dx + dy * dy;
|
|
}
|
|
}
|