Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

npm Pakete overlapping-marker-spiderfier-leaflet und leaflet.smooth_marker_bouncing benutzt

Browse Source
This commit is contained in:
ISA
2024-04-19 07:11:04 +02:00
parent 82f259a3a6
commit ee992d5a86
9 changed files with 483 additions and 813 deletions
Download Patch File Download Diff File Expand all files Collapse all files

464
components/MapComponent.js
View File

@@ -5,88 +5,16 @@ import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import "leaflet-contextmenu";
import * as config from "../config/config.js";
import dynamic from "next/dynamic";
import "leaflet.smooth_marker_bouncing";
//import { OverlappingMarkerSpiderfier } from "../lib/OverlappingMarkerSpiderfier.js";
//import { OverlappingMarkerSpiderfier } from "../public/js/OverlappingMarkerSpiderfier.js";
import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
const MapComponent = ({ locations, onLocationUpdate }) => {
const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
const [map, setMap] = useState(null); // Zustand der Karteninstanz
const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung
// Funktionen zur Überwachung der Internetverbindung
const checkInternet = () => {
fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
.then((response) => setOnline(response.ok))
.catch(() => setOnline(false));
};
// Handle online/offline status
useEffect(() => {
window.addEventListener("online", checkInternet);
window.addEventListener("offline", checkInternet);
return () => {
window.removeEventListener("online", checkInternet);
window.removeEventListener("offline", checkInternet);
};
}, []);
// Initialisiere die Karte
useEffect(() => {
if (mapRef.current && !map) {
initialMap = L.map(mapRef.current, {
center: [53.111111, 8.4625],
zoom: 10,
layers: [
TALAS,
ECI,
ULAF,
GSMModem,
CiscoRouter,
WAGO,
Siemens,
OTDR,
WDM,
GMA,
Sonstige,
TALASICL,
],
zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
contextmenu: true,
contextmenuItems: [
{ text: "Station hinzufügen", callback: showAddStationPopup },
{
text: "Station öffnen (Tab)",
icon: "img/screen_new.png",
callback: newLink,
},
{
text: "Station öffnen",
icon: "img/screen_same.png",
callback: sameLink,
},
{
text: "Koordinaten",
icon: "img/screen_same.png",
callback: lata,
},
"-", // Divider
{ text: "Reinzoomen", callback: zoomIn },
{ text: "Rauszoomen", callback: zoomOut },
{ text: "Hier zentrieren", callback: centerHere },
],
});
L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(initialMap);
if (window.OverlappingMarkerSpiderfier) {
const oms = new window.OverlappingMarkerSpiderfier(initialMap, {
nearbyDistance: 50,
});
setOms(oms);
}
setMap(initialMap);
setMap(initialMap);
}
}, [mapRef, map]);
const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useState(
[]
); // Zustand für statische Daten
@@ -154,65 +82,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
fetchData();
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
//------------------------------------------
//\talas5\TileMap\img\icons\icon1.png
// minor-marker-icon-23.png
// Marker hinzufügen für GisStationsStaticDistrict
useEffect(() => {
if (map && GisStationsStaticDistrict.length > 0) {
// Zuerst alte Marker entfernen
/* map.eachLayer((layer) => {
if (layer instanceof L.Marker) {
map.removeLayer(layer);
}
}); */
// Neue Marker für jede Station hinzufügen
GisStationsStaticDistrict.forEach((station) => {
const marker = L.marker([station.X, station.Y], {
// X als Breitengrad, Y als Längengrad
icon: L.icon({
iconUrl: getIconPath(station.Icon),
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41],
}),
}).addTo(map);
// Popup beim Überfahren mit der Maus öffnen
marker.on("mouseover", function (e) {
this.openPopup();
});
// Popup schließen, wenn die Maus den Marker verlässt
marker.on("mouseout", function (e) {
this.closePopup();
});
// Ein Popup mit Informationen zur Station hinzufügen
marker
.bindPopup(`<b>${station.LD_Name}</b><br>${station.Device}`)
.openPopup();
marker.bindTooltip(
`<div class="tooltip-content">${station.LD_Name}</div>`,
{ permanent: false, direction: "top" }
);
// Zugriff auf das Tooltip-Element und Anwendung von Stilen
marker.on("mouseover", () => {
document.querySelector(".tooltip-content").style.backgroundColor =
"#ffffff";
document.querySelector(".tooltip-content").style.padding = "0.5rem";
document.querySelector(".tooltip-content").style.borderRadius =
"0.25rem";
document.querySelector(".tooltip-content").style.border =
"1px solid #d1d5db";
});
});
}
}, [map, GisStationsStaticDistrict]); // Abhängigkeiten hinzufügen, um sicherzustellen, dass Effekt bei Änderungen neu ausgeführt wird
//------------------------------------------
//GisStationsStaticDistrict Daten laden
useEffect(() => {
const fetchData = async () => {
@@ -266,6 +135,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
//------------------------------------------
//GisStationsMeasurements Daten laden
useEffect(() => {
const fetchData = async () => {
try {
@@ -343,31 +213,74 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}
}, []);
// Update map layers based on online status
// Funktionen zur Überwachung der Internetverbindung
const checkInternet = () => {
fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
.then((response) => setOnline(response.ok))
.catch(() => setOnline(false));
};
// Initialisierung der karte und hinzuügen der Layers
useEffect(() => {
if (map) {
const newLayer = L.tileLayer(
online ? onlineTileLayer : offlineTileLayer,
{
minZoom: 7,
maxZoom: online ? 19 : 14,
attribution:
'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}
);
map.eachLayer((layer) => {
if (layer instanceof L.TileLayer) {
map.removeLayer(layer);
}
if (mapRef.current && !map) {
const newMap = L.map(mapRef.current, {
center: [53.111111, 8.4625],
zoom: 8,
layers: [
TALAS,
ECI,
ULAF,
GSMModem,
CiscoRouter,
WAGO,
Siemens,
OTDR,
WDM,
GMA,
Sonstige,
TALASICL,
],
zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
contextmenu: true,
contextmenuItems: [
{ text: "Station hinzufügen", callback: showAddStationPopup },
{
text: "Station öffnen (Tab)",
icon: "img/screen_new.png",
callback: newLink,
},
{
text: "Station öffnen",
icon: "img/screen_same.png",
callback: sameLink,
},
{
text: "Koordinaten",
icon: "img/screen_same.png",
callback: lata,
},
"-", // Divider
{ text: "Reinzoomen", callback: zoomIn },
{ text: "Rauszoomen", callback: zoomOut },
{ text: "Hier zentrieren", callback: centerHere },
],
});
newLayer.addTo(map);
}
}, [online, map]);
L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(newMap);
// Marker handling
useEffect(() => {
const newOms = new window.OverlappingMarkerSpiderfier(newMap, {
nearbyDistance: 50,
});
setMap(newMap);
setOms(newOms);
}
}, [mapRef, map]); // Abhängigkeiten prüfen
// Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
/* useEffect(() => {
// Remove old markers
if (map) {
map.eachLayer((layer) => {
@@ -410,7 +323,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.addTo(map);
});
}
}, [map, locations, onLocationUpdate]);
}, [map, locations, onLocationUpdate]); */
//------------------------------------------
function parsePoint(pointString) {
@@ -557,22 +470,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
L.DomEvent.on(popupContent, "submit", handleSubmit);
};
/*
const handleSubmit = (event) => {
event.preventDefault();
const form = event.target;
const data = {
name: form.name.value,
type: form.type.value,
latitude: form.lat.value,
longitude: form.lng.value,
};
onAddLocation(name, type, lat, lng);
console.log("Name: ", name, "Type: ", type, "Lat: ", lat, "Lng: ", lng);
map.closePopup();
};
*/
// Funktion zum Hinzufügen eines neuen Standorts
async function handleSubmit(event) {
event.preventDefault();
@@ -615,138 +512,123 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
var y = 7.739617925303934;
var zoom = 7;
/* for (var i = 0; i < GisStationsStaticDistrictlength; i++) {
var gisStatics = GisStationsStaticDistrict[i];
if (stationValue === gisStatics.Area_Name) {
//console.log(gisStatics.X+","+gisStatics.Y);
x = gisStatics.X;
y = gisStatics.Y;
initialMap.flyTo([x, y], zoom);
}
function getIconPath(status, iconNumber, marker) {
let path = status
? `TileMap/img/icons/${status}-marker-icon-${iconNumber}.png`
: `TileMap/img/icons/marker-icon-${iconNumber}.png`;
// Wenn der Pfad das Wort "critical" enthält, dann den Marker bouncing options setzen
if (path.includes("critical")) {
// Setze Bouncing-Optionen
marker.setBouncingOptions({
bounceHeight: 15, // Höhe des Bounces
contractHeight: 12, // Höhe des Einzugs beim Landen
bounceSpeed: 52, // Geschwindigkeit des Bounces
contractSpeed: 52, // Geschwindigkeit des Einzugs
shadowAngle: null, // Standard-Schattenwinkel
});
// Check if the icon path includes 'critical'
if (path.includes("critical")) {
// marker.bounce(3);
}
}
if (y === 7.739617925303934) {
zoom = 8;
} */
initialMap.flyTo([x, y], zoom);
/* var popup = new L.Popup();
oms.addListener("click", function (marker) {
popup.setContent(marker.desc);
popup.setLatLng(marker.getLatLng());
map.openPopup(popup);
});
for (var i = 0; i < window.mapData.length; i++) {
var datum = window.mapData[i];
var loc = new L.LatLng(datum.lat, datum.lon);
var marker = new L.Marker(loc);
marker.desc = datum.d;
map.addLayer(marker);
//oms.addMarker(marker); // <-- here
} */
//-------------------------------------
return path;
}
//------------------------------------------
//Informationen in Tooltips einfügen
//\talas5\TileMap\img\icons\icon1.png
// minor-marker-icon-23.png
// Marker hinzufügen für GisStationsStaticDistrict
useEffect(() => {
if (map && oms && GisStationsStaticDistrict.length > 0) {
map.eachLayer((layer) => {
if (layer instanceof L.Marker) {
map.removeLayer(layer);
}
});
// Stellen Sie sicher, dass sowohl `map` als auch `oms` initialisiert sind
if (!map || !oms) {
console.error("Map or OMS is not initialized");
return;
}
GisStationsStaticDistrict.forEach((station) => {
// Filtere alle Statusobjekte für diese station.Na
const statusObjects = GisStationsStatusDistrict.filter(
(status) => status.IdLD === station.IdLD
);
// Alte Marker entfernen, indem alle Marker, die durch OMS verwaltet werden, gelöscht werden
oms.clearMarkers();
map.eachLayer((layer) => {
if (layer instanceof L.Marker) {
map.removeLayer(layer);
}
});
// Alle Status-Objekte mit gleicher IdLD finden
const matchingStatuses = GisStationsStatusDistrict.filter(
(status) => status.IdLD === station.IdLD
);
let status2 = "";
let statusInfo = "";
// Neue Marker für jede Station hinzufügen
GisStationsStaticDistrict.forEach((station) => {
// Filter für Statusobjekte dieser spezifischen Station
const matchingStatuses = GisStationsStatusDistrict.filter(
(status) => status.IdLD === station.IdLD
);
// Umdrehen der Reihenfolge der Statusmeldungen
matchingStatuses.reverse().forEach((status) => {
statusInfo += `
<div class="flex items-center my-1">
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
</div>`;
const marker = L.marker([station.X, station.Y], {
icon: L.icon({
iconUrl: "default-icon.png", // Default, wird geändert
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41],
}),
}).addTo(map);
status2 = status.Na;
});
let iconPath = getIconPath(status2, station.Icon);
const marker = L.marker([station.X, station.Y], {
icon: L.icon({
iconUrl: iconPath,
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41],
}),
});
marker.addTo(map);
oms.addMarker(marker); // Add marker to the OverlappingMarkerSpiderfier instance
marker.on("mouseover", function (e) {
this.openPopup();
});
marker.on("mouseout", function (e) {
this.closePopup();
});
// String-Zusammenstellung für das Popup-Infofenster
let statusInfo = matchingStatuses
.reverse()
.map(
(status) => `
<div class="flex items-center my-1">
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
</div>
`
)
.join("");
// Bestimmen des Icons basierend auf dem Status
let iconPath = getIconPath(
matchingStatuses[0]?.Na || "",
station.Icon,
marker
.bindPopup(
`<b>${station.LD_Name}</b><br>${station.Device}<br>${station.Area_Short} (${station.Area_Name})<br>${station.Location_Short} (${station.Location_Name}) <br>${statusInfo}<br><br>`
)
.openPopup();
});
}
}, [map, GisStationsStaticDistrict, oms, GisStationsStatusDistrict]); // Include GisStationsStatusDistrict in dependencies
);
marker.setIcon(
L.icon({
iconUrl: iconPath,
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41],
})
);
// Check if the icon path includes 'critical' and initiate bouncing
if (iconPath.includes("critical")) {
marker.setBouncingOptions({
bounceHeight: 15,
contractHeight: 12,
bounceSpeed: 52,
contractSpeed: 52,
shadowAngle: null,
});
marker.bounce(3);
}
// Marker zu OMS und der Karte hinzufügen
oms.addMarker(marker);
marker.addTo(map).bindPopup(`
<b>${station.LD_Name}</b><br>
${station.Device}<br>
${station.Area_Short} (${station.Area_Name})<br>
${station.Location_Short} (${station.Location_Name})<br>
${statusInfo}<br>
`);
});
}, [map, oms, GisStationsStaticDistrict, GisStationsStatusDistrict]);
//------------------------------------------
// Funktion, die den Pfad zum entsprechenden Icon basierend auf dem Status generiert
/* function getIconPath(status, iconId) {
let prefix = "";
switch (status) {
case "critical":
prefix = "critical-marker-icon";
break;
case "major":
prefix = "major-marker-icon";
break;
case "minor":
prefix = "minor-marker-icon";
break;
case "system":
prefix = "system-marker-icon";
break;
case "ok":
default:
prefix = "marker-icon"; // Annahme: "ok" ist der Standardstatus und grün
break;
}
return `path/to/icons/${prefix}-${iconId}.png`;
} */
//------------------------------------------
function getIconPath(status, iconNumber) {
if (status) {
// Wenn status vorhanden ist, füge ihn in den Pfad ein mit Bindestrich
return `TileMap/img/icons/${status}-marker-icon-${iconNumber}.png`;
} else {
// Wenn kein status vorhanden ist, lasse den Status-Teil ganz weg
return `TileMap/img/icons/marker-icon-${iconNumber}.png`;
}
}
return (
<div

8
config/config.js
View File

@@ -37,12 +37,12 @@ if (typeof window !== "undefined") {
mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
/* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
/* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`;
mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`;
mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`;
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
*/
mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`;
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
// URLs zu Offline-Daten, falls benötigt
}

468
lib/OverlappingMarkerSpiderfier.js
View File

@@ -1,398 +1,104 @@
// Generated by CoffeeScript 1.6.2
/** @preserve OverlappingMarkerSpiderfier
https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet
Copyright (c) 2011 - 2012 George MacKerron
Released under the MIT licence: http://opensource.org/licenses/mit-license
Note: The Leaflet maps API must be included *before* this code
*/
import L from "leaflet";
export class OverlappingMarkerSpiderfier {
constructor(map, options = {}) {
this.map = map;
this.markers = [];
this.markerListeners = [];
this.keepSpiderfied = options.keepSpiderfied || false;
(function() {
var __hasProp = {}.hasOwnProperty,
__slice = [].slice;
// Basiseinstellungen für die Distanz und die Zoomstufenabhängigkeit
this.baseNearbyDistance = options.nearbyDistance || 20;
this.nearbyDistance = this.baseNearbyDistance; // Initialwert setzen
if (this['L'] == null) {
return;
this.circleSpiralSwitchover = options.circleSpiralSwitchover || 9;
this.circleFootSeparation = options.circleFootSeparation || 25;
this.circleStartAngle = options.circleStartAngle || Math.PI / 6;
this.spiralFootSeparation = options.spiralFootSeparation || 28;
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());
this.map.on("zoomend", () => this.unspiderfy());
}
this['OverlappingMarkerSpiderfier'] = (function() {
var p, twoPi;
initMarkerArrays() {
this.markers = [];
this.markerListeners = [];
}
p = _Class.prototype;
p['VERSION'] = '0.2.6';
twoPi = Math.PI * 2;
p['keepSpiderfied'] = false;
p['nearbyDistance'] = 20;
p['circleSpiralSwitchover'] = 9;
p['circleFootSeparation'] = 25;
p['circleStartAngle'] = twoPi / 12;
p['spiralFootSeparation'] = 28;
p['spiralLengthStart'] = 11;
p['spiralLengthFactor'] = 5;
p['legWeight'] = 1.5;
p['legColors'] = {
'usual': '#222',
'highlighted': '#f00'
};
function _Class(map, opts) {
var e, k, v, _i, _len, _ref,
_this = this;
this.map = map;
if (opts == null) {
opts = {};
}
for (k in opts) {
if (!__hasProp.call(opts, k)) continue;
v = opts[k];
this[k] = v;
}
this.initMarkerArrays();
this.listeners = {};
_ref = ['click', 'zoomend'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
e = _ref[_i];
this.map.addEventListener(e, function() {
return _this['unspiderfy']();
});
}
addMarker(marker) {
if (!marker._oms) {
marker._oms = {}; // Stellt sicher, dass _oms ein Objekt ist
}
p.initMarkerArrays = function() {
this.markers = [];
return this.markerListeners = [];
const listener = () => {
this.spiderListener(marker);
};
p['addMarker'] = function(marker) {
var markerListener,
_this = this;
marker.on("click", listener);
this.markerListeners.push(listener);
this.markers.push(marker);
if (marker['_oms'] != null) {
return this;
return this;
}
spiderListener(marker) {
const spidered = marker._oms.spidered;
if (!spidered) {
const nearMarkers = this.nearbyMarkers(marker);
if (nearMarkers.length > 1) {
this.spiderfy(nearMarkers);
}
marker['_oms'] = true;
markerListener = function() {
return _this.spiderListener(marker);
};
marker.addEventListener('click', markerListener);
this.markerListeners.push(markerListener);
this.markers.push(marker);
return this;
};
} else {
this.unspiderfy(); // Schließt alle gespiderfied Marker, wenn einer erneut geklickt wird
}
}
p['getMarkers'] = function() {
return this.markers.slice(0);
};
nearbyMarkers(marker) {
return this.markers.filter((m) => {
const distance = this.map.distance(marker.getLatLng(), m.getLatLng());
return distance < this.nearbyDistance && marker !== m;
});
}
p['removeMarker'] = function(marker) {
var i, markerListener;
spiderfy(markers) {
const centerPt = this.map.latLngToLayerPoint(markers[0].getLatLng());
markers.forEach((marker, i) => {
const angle = this.circleStartAngle + (i * 2 * Math.PI) / markers.length;
const legLength = this.circleFootSeparation * (2 + i / markers.length);
const newPt = L.point(
centerPt.x + legLength * Math.cos(angle),
centerPt.y + legLength * Math.sin(angle)
);
const newLatLng = this.map.layerPointToLatLng(newPt);
if (marker['_omsData'] != null) {
this['unspiderfy']();
if (!marker._oms) {
marker._oms = {}; // Stellt sicher, dass _oms ein Objekt ist
}
i = this.arrIndexOf(this.markers, marker);
if (i < 0) {
return this;
// Speichert die aktuelle Position, bevor sie verändert wird
marker._oms.usualPosition = marker.getLatLng();
marker._oms.spidered = true; // Markiert, dass der Marker gespiderfied ist
marker.setLatLng(newLatLng);
marker.setZIndexOffset(1000);
});
}
unspiderfy() {
this.markers.forEach((marker) => {
if (marker._oms && marker._oms.spidered) {
// Setzt den Marker nur dann zurück, wenn er gespiderfied war
marker.setLatLng(marker._oms.usualPosition);
marker.setZIndexOffset(0);
marker._oms.spidered = false; // Setzt zurück, dass der Marker nicht mehr gespiderfied ist
}
markerListener = this.markerListeners.splice(i, 1)[0];
marker.removeEventListener('click', markerListener);
delete marker['_oms'];
this.markers.splice(i, 1);
return this;
};
p['clearMarkers'] = function() {
var i, marker, markerListener, _i, _len, _ref;
this['unspiderfy']();
_ref = this.markers;
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
marker = _ref[i];
markerListener = this.markerListeners[i];
marker.removeEventListener('click', markerListener);
delete marker['_oms'];
}
this.initMarkerArrays();
return this;
};
p['addListener'] = function(event, func) {
var _base, _ref;
((_ref = (_base = this.listeners)[event]) != null ? _ref : _base[event] = []).push(func);
return this;
};
p['removeListener'] = function(event, func) {
var i;
i = this.arrIndexOf(this.listeners[event], func);
if (!(i < 0)) {
this.listeners[event].splice(i, 1);
}
return this;
};
p['clearListeners'] = function(event) {
this.listeners[event] = [];
return this;
};
p.trigger = function() {
var args, event, func, _i, _len, _ref, _ref1, _results;
event = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
_ref1 = (_ref = this.listeners[event]) != null ? _ref : [];
_results = [];
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
func = _ref1[_i];
_results.push(func.apply(null, args));
}
return _results;
};
p.generatePtsCircle = function(count, centerPt) {
var angle, angleStep, circumference, i, legLength, _i, _results;
circumference = this['circleFootSeparation'] * (2 + count);
legLength = circumference / twoPi;
angleStep = twoPi / count;
_results = [];
for (i = _i = 0; 0 <= count ? _i < count : _i > count; i = 0 <= count ? ++_i : --_i) {
angle = this['circleStartAngle'] + i * angleStep;
_results.push(new L.Point(centerPt.x + legLength * Math.cos(angle), centerPt.y + legLength * Math.sin(angle)));
}
return _results;
};
p.generatePtsSpiral = function(count, centerPt) {
var angle, i, legLength, pt, _i, _results;
legLength = this['spiralLengthStart'];
angle = 0;
_results = [];
for (i = _i = 0; 0 <= count ? _i < count : _i > count; i = 0 <= count ? ++_i : --_i) {
angle += this['spiralFootSeparation'] / legLength + i * 0.0005;
pt = new L.Point(centerPt.x + legLength * Math.cos(angle), centerPt.y + legLength * Math.sin(angle));
legLength += twoPi * this['spiralLengthFactor'] / angle;
_results.push(pt);
}
return _results;
};
p.spiderListener = function(marker) {
var m, mPt, markerPt, markerSpiderfied, nearbyMarkerData, nonNearbyMarkers, pxSq, _i, _len, _ref;
markerSpiderfied = marker['_omsData'] != null;
if (!(markerSpiderfied && this['keepSpiderfied'])) {
this['unspiderfy']();
}
if (markerSpiderfied) {
return this.trigger('click', marker);
} else {
nearbyMarkerData = [];
nonNearbyMarkers = [];
pxSq = this['nearbyDistance'] * this['nearbyDistance'];
markerPt = this.map.latLngToLayerPoint(marker.getLatLng());
_ref = this.markers;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
m = _ref[_i];
if (!this.map.hasLayer(m)) {
continue;
}
mPt = this.map.latLngToLayerPoint(m.getLatLng());
if (this.ptDistanceSq(mPt, markerPt) < pxSq) {
nearbyMarkerData.push({
marker: m,
markerPt: mPt
});
} else {
nonNearbyMarkers.push(m);
}
}
if (nearbyMarkerData.length === 1) {
return this.trigger('click', marker);
} else {
return this.spiderfy(nearbyMarkerData, nonNearbyMarkers);
}
}
};
p.makeHighlightListeners = function(marker) {
var _this = this;
return {
highlight: function() {
return marker['_omsData'].leg.setStyle({
color: _this['legColors']['highlighted']
});
},
unhighlight: function() {
return marker['_omsData'].leg.setStyle({
color: _this['legColors']['usual']
});
}
};
};
p.spiderfy = function(markerData, nonNearbyMarkers) {
var bodyPt, footLl, footPt, footPts, leg, marker, md, mhl, nearestMarkerDatum, numFeet, spiderfiedMarkers;
this.spiderfying = true;
numFeet = markerData.length;
bodyPt = this.ptAverage((function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = markerData.length; _i < _len; _i++) {
md = markerData[_i];
_results.push(md.markerPt);
}
return _results;
})());
footPts = numFeet >= this['circleSpiralSwitchover'] ? this.generatePtsSpiral(numFeet, bodyPt).reverse() : this.generatePtsCircle(numFeet, bodyPt);
spiderfiedMarkers = (function() {
var _i, _len, _results,
_this = this;
_results = [];
for (_i = 0, _len = footPts.length; _i < _len; _i++) {
footPt = footPts[_i];
footLl = this.map.layerPointToLatLng(footPt);
nearestMarkerDatum = this.minExtract(markerData, function(md) {
return _this.ptDistanceSq(md.markerPt, footPt);
});
marker = nearestMarkerDatum.marker;
leg = new L.Polyline([marker.getLatLng(), footLl], {
color: this['legColors']['usual'],
weight: this['legWeight'],
clickable: false
});
this.map.addLayer(leg);
marker['_omsData'] = {
usualPosition: marker.getLatLng(),
leg: leg
};
if (this['legColors']['highlighted'] !== this['legColors']['usual']) {
mhl = this.makeHighlightListeners(marker);
marker['_omsData'].highlightListeners = mhl;
marker.addEventListener('mouseover', mhl.highlight);
marker.addEventListener('mouseout', mhl.unhighlight);
}
marker.setLatLng(footLl);
marker.setZIndexOffset(1000000);
_results.push(marker);
}
return _results;
}).call(this);
delete this.spiderfying;
this.spiderfied = true;
return this.trigger('spiderfy', spiderfiedMarkers, nonNearbyMarkers);
};
p['unspiderfy'] = function(markerNotToMove) {
var marker, mhl, nonNearbyMarkers, unspiderfiedMarkers, _i, _len, _ref;
if (markerNotToMove == null) {
markerNotToMove = null;
}
if (this.spiderfied == null) {
return this;
}
this.unspiderfying = true;
unspiderfiedMarkers = [];
nonNearbyMarkers = [];
_ref = this.markers;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
marker = _ref[_i];
if (marker['_omsData'] != null) {
this.map.removeLayer(marker['_omsData'].leg);
if (marker !== markerNotToMove) {
marker.setLatLng(marker['_omsData'].usualPosition);
}
marker.setZIndexOffset(0);
mhl = marker['_omsData'].highlightListeners;
if (mhl != null) {
marker.removeEventListener('mouseover', mhl.highlight);
marker.removeEventListener('mouseout', mhl.unhighlight);
}
delete marker['_omsData'];
unspiderfiedMarkers.push(marker);
} else {
nonNearbyMarkers.push(marker);
}
}
delete this.unspiderfying;
delete this.spiderfied;
this.trigger('unspiderfy', unspiderfiedMarkers, nonNearbyMarkers);
return this;
};
p.ptDistanceSq = function(pt1, pt2) {
var dx, dy;
dx = pt1.x - pt2.x;
dy = pt1.y - pt2.y;
return dx * dx + dy * dy;
};
p.ptAverage = function(pts) {
var numPts, pt, sumX, sumY, _i, _len;
sumX = sumY = 0;
for (_i = 0, _len = pts.length; _i < _len; _i++) {
pt = pts[_i];
sumX += pt.x;
sumY += pt.y;
}
numPts = pts.length;
return new L.Point(sumX / numPts, sumY / numPts);
};
p.minExtract = function(set, func) {
var bestIndex, bestVal, index, item, val, _i, _len;
for (index = _i = 0, _len = set.length; _i < _len; index = ++_i) {
item = set[index];
val = func(item);
if ((typeof bestIndex === "undefined" || bestIndex === null) || val < bestVal) {
bestVal = val;
bestIndex = index;
}
}
return set.splice(bestIndex, 1)[0];
};
p.arrIndexOf = function(arr, obj) {
var i, o, _i, _len;
if (arr.indexOf != null) {
return arr.indexOf(obj);
}
for (i = _i = 0, _len = arr.length; _i < _len; i = ++_i) {
o = arr[i];
if (o === obj) {
return i;
}
}
return -1;
};
return _Class;
})();
}).call(this);
});
}
}

14
package-lock.json generated
View File

@@ -1,5 +1,5 @@
{
"name": "wwwrootTalas5NodeMap",
"name": "wwwrootTalas5NodeMap4",
"lockfileVersion": 3,
"requires": true,
"packages": {
@@ -8,8 +8,10 @@
"http-proxy-middleware": "^3.0.0",
"leaflet": "^1.9.4",
"leaflet-contextmenu": "^1.4.0",
"leaflet.smooth_marker_bouncing": "^3.0.3",
"mysql": "^2.18.1",
"next": "^14.2.0",
"overlapping-marker-spiderfier-leaflet": "^0.2.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.2.1"
@@ -1013,6 +1015,11 @@
"resolved": "https://registry.npmjs.org/leaflet-contextmenu/-/leaflet-contextmenu-1.4.0.tgz",
"integrity": "sha512-BXASCmJ5bLkuJGDCpWmvGqhZi5AzeOY0IbQalfkgBcMAMfAOFSvD4y0gIQxF/XzEyLkjXaRiUpibVj4+Cf3tUA=="
},
"node_modules/leaflet.smooth_marker_bouncing": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/leaflet.smooth_marker_bouncing/-/leaflet.smooth_marker_bouncing-3.0.3.tgz",
"integrity": "sha512-Y+1MJ1nX0vy/NjvzW4Kq2gE3Pnpz3fgP3dZJQNMQW90bFQ8d2TjXrqazP5oWKNUWjvrVVzfMv/FrB7vUFmsLDA=="
},
"node_modules/lilconfig": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -1258,6 +1265,11 @@
"node": ">= 6"
}
},
"node_modules/overlapping-marker-spiderfier-leaflet": {
"version": "0.2.7",
"resolved": "https://registry.npmjs.org/overlapping-marker-spiderfier-leaflet/-/overlapping-marker-spiderfier-leaflet-0.2.7.tgz",
"integrity": "sha512-U2biV2Ge0SU+4IEmq4BZOglvzA8Aj8G7/hp5v6lBnF9Kd3/Xf6ZEPsJyPOExtLvMxOqlrlTAfl55s6JJDND7Ew=="
},
"node_modules/path-key": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",

2
package.json
View File

@@ -3,8 +3,10 @@
"http-proxy-middleware": "^3.0.0",
"leaflet": "^1.9.4",
"leaflet-contextmenu": "^1.4.0",
"leaflet.smooth_marker_bouncing": "^3.0.3",
"mysql": "^2.18.1",
"next": "^14.2.0",
"overlapping-marker-spiderfier-leaflet": "^0.2.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.2.1"

17
pages/_app.js
View File

@@ -14,3 +14,20 @@ export default function MyApp({ Component, pageProps }) {
</>
);
}
// Bibliotheken, die in der _app.js-Datei importiert werden, werden auf jeder Seite geladen.
/* import Script from 'next/script';
function MyApp({ Component, pageProps }) {
return (
<>
<Script
src="/js/OverlappingMarkerSpiderfier.js"
strategy="beforeInteractive"
/>
<Component {...pageProps} />
</>
);
}
export default MyApp; */

1
pages/api/[...path].js
View File

@@ -3,6 +3,7 @@ import { createProxyMiddleware } from "http-proxy-middleware";
export default createProxyMiddleware({
target: "http://10.10.0.13", // Ziel-URL des Proxys
//target: "http://192.168.10.52:3000", // Ziel-URL des Proxys
changeOrigin: true,
pathRewrite: {
"^/api": "/", // Optional: Entfernt /api aus dem Pfad, wenn das Backend dies nicht erfordert

39
pages/index.js
View File

@@ -1,17 +1,14 @@
// pages/index.js
import { useEffect, useState } from "react";
import dynamic from "next/dynamic";
const MapComponentWithNoSSR = dynamic(
() => import("../components/MapComponent"),
{ ssr: false }
);
export default function Home() {
const [mParam,setMParam] = useState([""]);
const [uParam,setUParam] = useState([""]);
const [mParam, setMParam] = useState([""]);
const [uParam, setUParam] = useState([""]);
const [locations, setLocations] = useState([]);
const [formData, setFormData] = useState({
@@ -28,19 +25,19 @@ export default function Home() {
};
useEffect(() => {
// Funktion, um URL-Parameter zu holen
function getURLParameter(name) {
// Nutze URLSearchParams, eine Web API für die Arbeit mit Query-Strings
const params = new URLSearchParams(window.location.search);
return params.get(name); // Holt den Wert des Parameternamens
}
// Hole die Parameter 'm' und 'u'
setMParam(getURLParameter('m'));
setUParam(getURLParameter('u'));
// Logge die Werte in der Konsole
console.log(`Parameter m: ${mParam}, Parameter u: ${uParam}`);
// Funktion, um URL-Parameter zu holen
function getURLParameter(name) {
// Nutze URLSearchParams, eine Web API für die Arbeit mit Query-Strings
const params = new URLSearchParams(window.location.search);
return params.get(name); // Holt den Wert des Parameternamens
}
// Hole die Parameter 'm' und 'u'
setMParam(getURLParameter("m"));
setUParam(getURLParameter("u"));
// Logge die Werte in der Konsole
console.log(`Parameter m: ${mParam}, Parameter u: ${uParam}`);
loadData();
}, []);
const handleAddLocation = async (name, type, lat, lng) => {
@@ -91,7 +88,7 @@ export default function Home() {
return {
...location,
// Hier musst du ggf. die Formatierung anpassen, je nachdem wie du die Koordinaten speicherst
position: `POINT(${newLongitude} ${newLatitude})`
position: `POINT(${newLongitude} ${newLatitude})`,
};
}
return location;
@@ -105,7 +102,7 @@ export default function Home() {
locations={locations}
onAddLocation={handleAddLocation}
onLocationUpdate={handleLocationUpdate}
/>
/>
</div>
);
}
}

283
public/js/OverlappingMarkerSpiderfier.js
View File

@@ -5,50 +5,55 @@ Copyright (c) 2011 - 2012 George MacKerron
Released under the MIT licence: http://opensource.org/licenses/mit-license
Note: The Leaflet maps API must be included *before* this code
*/
console.log("OverlappingMarkerSpiderfier.js loaded..");
(function() {
(function () {
var __hasProp = {}.hasOwnProperty,
__slice = [].slice;
if (this['L'] == null) {
if (this["L"] == null) {
return;
}
this['OverlappingMarkerSpiderfier'] = (function() {
this["OverlappingMarkerSpiderfier"] = (function () {
var p, twoPi;
p = _Class.prototype;
p['VERSION'] = '0.2.6';
p["VERSION"] = "0.2.6";
twoPi = Math.PI * 2;
p['keepSpiderfied'] = false;
p["keepSpiderfied"] = false;
p['nearbyDistance'] = 20;
p["nearbyDistance"] = 20;
p['circleSpiralSwitchover'] = 9;
p["circleSpiralSwitchover"] = 9;
p['circleFootSeparation'] = 25;
p["circleFootSeparation"] = 25;
p['circleStartAngle'] = twoPi / 12;
p["circleStartAngle"] = twoPi / 12;
p['spiralFootSeparation'] = 28;
p["spiralFootSeparation"] = 28;
p['spiralLengthStart'] = 11;
p["spiralLengthStart"] = 11;
p['spiralLengthFactor'] = 5;
p["spiralLengthFactor"] = 5;
p['legWeight'] = 1.5;
p["legWeight"] = 1.5;
p['legColors'] = {
'usual': '#222',
'highlighted': '#f00'
p["legColors"] = {
usual: "#222",
highlighted: "#f00",
};
function _Class(map, opts) {
var e, k, v, _i, _len, _ref,
var e,
k,
v,
_i,
_len,
_ref,
_this = this;
this.map = map;
@@ -62,81 +67,84 @@ Note: The Leaflet maps API must be included *before* this code
}
this.initMarkerArrays();
this.listeners = {};
_ref = ['click', 'zoomend'];
_ref = ["click", "zoomend"];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
e = _ref[_i];
this.map.addEventListener(e, function() {
return _this['unspiderfy']();
this.map.addEventListener(e, function () {
return _this["unspiderfy"]();
});
}
}
p.initMarkerArrays = function() {
p.initMarkerArrays = function () {
this.markers = [];
return this.markerListeners = [];
return (this.markerListeners = []);
};
p['addMarker'] = function(marker) {
p["addMarker"] = function (marker) {
var markerListener,
_this = this;
if (marker['_oms'] != null) {
if (marker["_oms"] != null) {
return this;
}
marker['_oms'] = true;
markerListener = function() {
marker["_oms"] = true;
markerListener = function () {
return _this.spiderListener(marker);
};
marker.addEventListener('click', markerListener);
marker.addEventListener("click", markerListener);
this.markerListeners.push(markerListener);
this.markers.push(marker);
return this;
};
p['getMarkers'] = function() {
p["getMarkers"] = function () {
return this.markers.slice(0);
};
p['removeMarker'] = function(marker) {
p["removeMarker"] = function (marker) {
var i, markerListener;
if (marker['_omsData'] != null) {
this['unspiderfy']();
if (marker["_omsData"] != null) {
this["unspiderfy"]();
}
i = this.arrIndexOf(this.markers, marker);
if (i < 0) {
return this;
}
markerListener = this.markerListeners.splice(i, 1)[0];
marker.removeEventListener('click', markerListener);
delete marker['_oms'];
marker.removeEventListener("click", markerListener);
delete marker["_oms"];
this.markers.splice(i, 1);
return this;
};
p['clearMarkers'] = function() {
p["clearMarkers"] = function () {
var i, marker, markerListener, _i, _len, _ref;
this['unspiderfy']();
this["unspiderfy"]();
_ref = this.markers;
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
marker = _ref[i];
markerListener = this.markerListeners[i];
marker.removeEventListener('click', markerListener);
delete marker['_oms'];
marker.removeEventListener("click", markerListener);
delete marker["_oms"];
}
this.initMarkerArrays();
return this;
};
p['addListener'] = function(event, func) {
p["addListener"] = function (event, func) {
var _base, _ref;
((_ref = (_base = this.listeners)[event]) != null ? _ref : _base[event] = []).push(func);
((_ref = (_base = this.listeners)[event]) != null
? _ref
: (_base[event] = [])
).push(func);
return this;
};
p['removeListener'] = function(event, func) {
p["removeListener"] = function (event, func) {
var i;
i = this.arrIndexOf(this.listeners[event], func);
@@ -146,15 +154,16 @@ Note: The Leaflet maps API must be included *before* this code
return this;
};
p['clearListeners'] = function(event) {
p["clearListeners"] = function (event) {
this.listeners[event] = [];
return this;
};
p.trigger = function() {
p.trigger = function () {
var args, event, func, _i, _len, _ref, _ref1, _results;
event = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
(event = arguments[0]),
(args = 2 <= arguments.length ? __slice.call(arguments, 1) : []);
_ref1 = (_ref = this.listeners[event]) != null ? _ref : [];
_results = [];
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
@@ -164,48 +173,73 @@ Note: The Leaflet maps API must be included *before* this code
return _results;
};
p.generatePtsCircle = function(count, centerPt) {
p.generatePtsCircle = function (count, centerPt) {
var angle, angleStep, circumference, i, legLength, _i, _results;
circumference = this['circleFootSeparation'] * (2 + count);
circumference = this["circleFootSeparation"] * (2 + count);
legLength = circumference / twoPi;
angleStep = twoPi / count;
_results = [];
for (i = _i = 0; 0 <= count ? _i < count : _i > count; i = 0 <= count ? ++_i : --_i) {
angle = this['circleStartAngle'] + i * angleStep;
_results.push(new L.Point(centerPt.x + legLength * Math.cos(angle), centerPt.y + legLength * Math.sin(angle)));
for (
i = _i = 0;
0 <= count ? _i < count : _i > count;
i = 0 <= count ? ++_i : --_i
) {
angle = this["circleStartAngle"] + i * angleStep;
_results.push(
new L.Point(
centerPt.x + legLength * Math.cos(angle),
centerPt.y + legLength * Math.sin(angle)
)
);
}
return _results;
};
p.generatePtsSpiral = function(count, centerPt) {
p.generatePtsSpiral = function (count, centerPt) {
var angle, i, legLength, pt, _i, _results;
legLength = this['spiralLengthStart'];
legLength = this["spiralLengthStart"];
angle = 0;
_results = [];
for (i = _i = 0; 0 <= count ? _i < count : _i > count; i = 0 <= count ? ++_i : --_i) {
angle += this['spiralFootSeparation'] / legLength + i * 0.0005;
pt = new L.Point(centerPt.x + legLength * Math.cos(angle), centerPt.y + legLength * Math.sin(angle));
legLength += twoPi * this['spiralLengthFactor'] / angle;
for (
i = _i = 0;
0 <= count ? _i < count : _i > count;
i = 0 <= count ? ++_i : --_i
) {
angle += this["spiralFootSeparation"] / legLength + i * 0.0005;
pt = new L.Point(
centerPt.x + legLength * Math.cos(angle),
centerPt.y + legLength * Math.sin(angle)
);
legLength += (twoPi * this["spiralLengthFactor"]) / angle;
_results.push(pt);
}
return _results;
};
p.spiderListener = function(marker) {
var m, mPt, markerPt, markerSpiderfied, nearbyMarkerData, nonNearbyMarkers, pxSq, _i, _len, _ref;
p.spiderListener = function (marker) {
var m,
mPt,
markerPt,
markerSpiderfied,
nearbyMarkerData,
nonNearbyMarkers,
pxSq,
_i,
_len,
_ref;
markerSpiderfied = marker['_omsData'] != null;
if (!(markerSpiderfied && this['keepSpiderfied'])) {
this['unspiderfy']();
markerSpiderfied = marker["_omsData"] != null;
if (!(markerSpiderfied && this["keepSpiderfied"])) {
this["unspiderfy"]();
}
if (markerSpiderfied) {
return this.trigger('click', marker);
return this.trigger("click", marker);
} else {
nearbyMarkerData = [];
nonNearbyMarkers = [];
pxSq = this['nearbyDistance'] * this['nearbyDistance'];
pxSq = this["nearbyDistance"] * this["nearbyDistance"];
markerPt = this.map.latLngToLayerPoint(marker.getLatLng());
_ref = this.markers;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
@@ -217,93 +251,110 @@ Note: The Leaflet maps API must be included *before* this code
if (this.ptDistanceSq(mPt, markerPt) < pxSq) {
nearbyMarkerData.push({
marker: m,
markerPt: mPt
markerPt: mPt,
});
} else {
nonNearbyMarkers.push(m);
}
}
if (nearbyMarkerData.length === 1) {
return this.trigger('click', marker);
return this.trigger("click", marker);
} else {
return this.spiderfy(nearbyMarkerData, nonNearbyMarkers);
}
}
};
p.makeHighlightListeners = function(marker) {
p.makeHighlightListeners = function (marker) {
var _this = this;
return {
highlight: function() {
return marker['_omsData'].leg.setStyle({
color: _this['legColors']['highlighted']
highlight: function () {
return marker["_omsData"].leg.setStyle({
color: _this["legColors"]["highlighted"],
});
},
unhighlight: function() {
return marker['_omsData'].leg.setStyle({
color: _this['legColors']['usual']
unhighlight: function () {
return marker["_omsData"].leg.setStyle({
color: _this["legColors"]["usual"],
});
}
},
};
};
p.spiderfy = function(markerData, nonNearbyMarkers) {
var bodyPt, footLl, footPt, footPts, leg, marker, md, mhl, nearestMarkerDatum, numFeet, spiderfiedMarkers;
p.spiderfy = function (markerData, nonNearbyMarkers) {
var bodyPt,
footLl,
footPt,
footPts,
leg,
marker,
md,
mhl,
nearestMarkerDatum,
numFeet,
spiderfiedMarkers;
this.spiderfying = true;
numFeet = markerData.length;
bodyPt = this.ptAverage((function() {
var _i, _len, _results;
bodyPt = this.ptAverage(
(function () {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = markerData.length; _i < _len; _i++) {
md = markerData[_i];
_results.push(md.markerPt);
}
return _results;
})());
footPts = numFeet >= this['circleSpiralSwitchover'] ? this.generatePtsSpiral(numFeet, bodyPt).reverse() : this.generatePtsCircle(numFeet, bodyPt);
spiderfiedMarkers = (function() {
var _i, _len, _results,
_results = [];
for (_i = 0, _len = markerData.length; _i < _len; _i++) {
md = markerData[_i];
_results.push(md.markerPt);
}
return _results;
})()
);
footPts =
numFeet >= this["circleSpiralSwitchover"]
? this.generatePtsSpiral(numFeet, bodyPt).reverse()
: this.generatePtsCircle(numFeet, bodyPt);
spiderfiedMarkers = function () {
var _i,
_len,
_results,
_this = this;
_results = [];
for (_i = 0, _len = footPts.length; _i < _len; _i++) {
footPt = footPts[_i];
footLl = this.map.layerPointToLatLng(footPt);
nearestMarkerDatum = this.minExtract(markerData, function(md) {
nearestMarkerDatum = this.minExtract(markerData, function (md) {
return _this.ptDistanceSq(md.markerPt, footPt);
});
marker = nearestMarkerDatum.marker;
leg = new L.Polyline([marker.getLatLng(), footLl], {
color: this['legColors']['usual'],
weight: this['legWeight'],
clickable: false
color: this["legColors"]["usual"],
weight: this["legWeight"],
clickable: false,
});
this.map.addLayer(leg);
marker['_omsData'] = {
marker["_omsData"] = {
usualPosition: marker.getLatLng(),
leg: leg
leg: leg,
};
if (this['legColors']['highlighted'] !== this['legColors']['usual']) {
if (this["legColors"]["highlighted"] !== this["legColors"]["usual"]) {
mhl = this.makeHighlightListeners(marker);
marker['_omsData'].highlightListeners = mhl;
marker.addEventListener('mouseover', mhl.highlight);
marker.addEventListener('mouseout', mhl.unhighlight);
marker["_omsData"].highlightListeners = mhl;
marker.addEventListener("mouseover", mhl.highlight);
marker.addEventListener("mouseout", mhl.unhighlight);
}
marker.setLatLng(footLl);
marker.setZIndexOffset(1000000);
_results.push(marker);
}
return _results;
}).call(this);
}.call(this);
delete this.spiderfying;
this.spiderfied = true;
return this.trigger('spiderfy', spiderfiedMarkers, nonNearbyMarkers);
return this.trigger("spiderfy", spiderfiedMarkers, nonNearbyMarkers);
};
p['unspiderfy'] = function(markerNotToMove) {
p["unspiderfy"] = function (markerNotToMove) {
var marker, mhl, nonNearbyMarkers, unspiderfiedMarkers, _i, _len, _ref;
if (markerNotToMove == null) {
@@ -318,18 +369,18 @@ Note: The Leaflet maps API must be included *before* this code
_ref = this.markers;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
marker = _ref[_i];
if (marker['_omsData'] != null) {
this.map.removeLayer(marker['_omsData'].leg);
if (marker["_omsData"] != null) {
this.map.removeLayer(marker["_omsData"].leg);
if (marker !== markerNotToMove) {
marker.setLatLng(marker['_omsData'].usualPosition);
marker.setLatLng(marker["_omsData"].usualPosition);
}
marker.setZIndexOffset(0);
mhl = marker['_omsData'].highlightListeners;
mhl = marker["_omsData"].highlightListeners;
if (mhl != null) {
marker.removeEventListener('mouseover', mhl.highlight);
marker.removeEventListener('mouseout', mhl.unhighlight);
marker.removeEventListener("mouseover", mhl.highlight);
marker.removeEventListener("mouseout", mhl.unhighlight);
}
delete marker['_omsData'];
delete marker["_omsData"];
unspiderfiedMarkers.push(marker);
} else {
nonNearbyMarkers.push(marker);
@@ -337,11 +388,11 @@ Note: The Leaflet maps API must be included *before* this code
}
delete this.unspiderfying;
delete this.spiderfied;
this.trigger('unspiderfy', unspiderfiedMarkers, nonNearbyMarkers);
this.trigger("unspiderfy", unspiderfiedMarkers, nonNearbyMarkers);
return this;
};
p.ptDistanceSq = function(pt1, pt2) {
p.ptDistanceSq = function (pt1, pt2) {
var dx, dy;
dx = pt1.x - pt2.x;
@@ -349,7 +400,7 @@ Note: The Leaflet maps API must be included *before* this code
return dx * dx + dy * dy;
};
p.ptAverage = function(pts) {
p.ptAverage = function (pts) {
var numPts, pt, sumX, sumY, _i, _len;
sumX = sumY = 0;
@@ -362,13 +413,17 @@ Note: The Leaflet maps API must be included *before* this code
return new L.Point(sumX / numPts, sumY / numPts);
};
p.minExtract = function(set, func) {
p.minExtract = function (set, func) {
var bestIndex, bestVal, index, item, val, _i, _len;
for (index = _i = 0, _len = set.length; _i < _len; index = ++_i) {
item = set[index];
val = func(item);
if ((typeof bestIndex === "undefined" || bestIndex === null) || val < bestVal) {
if (
typeof bestIndex === "undefined" ||
bestIndex === null ||
val < bestVal
) {
bestVal = val;
bestIndex = index;
}
@@ -376,7 +431,7 @@ Note: The Leaflet maps API must be included *before* this code
return set.splice(bestIndex, 1)[0];
};
p.arrIndexOf = function(arr, obj) {
p.arrIndexOf = function (arr, obj) {
var i, o, _i, _len;
if (arr.indexOf != null) {
@@ -392,7 +447,5 @@ Note: The Leaflet maps API must be included *before* this code
};
return _Class;
})();
}).call(this);
}).call(this);