Rename markers.ts

src/components/map/vector/Points.vue

@@ -19,7 +19,7 @@ import {defineComponent, computed, onMounted, onUnmounted, watch} from "@vue/run
 import {Marker} from 'leaflet';
 import {useStore} from "@/store";
 import {ActionTypes} from "@/store/action-types";
-import {createMarker, updateMarker} from "@/util/markers";
+import {createPointMarker, updatePointMarker} from "@/util/points";
 import LiveAtlasLayerGroup from "@/leaflet/layer/LiveAtlasLayerGroup";
 import {LiveAtlasPointMarker, LiveAtlasMarkerSet} from "@/index";
 import {nonReactiveState} from "@/store/state";
@@ -52,7 +52,7 @@ export default defineComponent({
 				const converter = currentMap.value!.locationToLatLng.bind(store.state.currentMap);
 
 				nonReactiveState.markers.get(props.set.id)!.points.forEach((marker: LiveAtlasPointMarker, id: string) => {
-					const layer = createMarker(marker, converter);
+					const layer = createPointMarker(marker, converter);
 
 					layers.set(id, layer);
 					props.layerGroup.addLayer(layer);
@@ -81,7 +81,7 @@ export default defineComponent({
 					if(update.removed) {
 						deleteMarker(update.id);
 					} else {
-						const layer = updateMarker(layers.get(update.id), update.payload as LiveAtlasPointMarker, converter);
+						const layer = updatePointMarker(layers.get(update.id), update.payload as LiveAtlasPointMarker, converter);
 
 						if(!layers.has(update.id)) {
 							props.layerGroup.addLayer(layer);
@@ -104,7 +104,7 @@ export default defineComponent({
 				const converter = currentMap.value!.locationToLatLng.bind(store.state.currentMap);
 
 				for (const [id, marker] of nonReactiveState.markers.get(props.set.id)!.points) {
-					updateMarker(layers.get(id), marker, converter);
+					updatePointMarker(layers.get(id), marker, converter);
 				}
 			}
 		});

src/util/points.ts

@@ -0,0 +1,85 @@
+/*
+ * Copyright 2021 James Lyne
+ *
+ * Some portions of this file were taken from https://github.com/webbukkit/dynmap.
+ * These portions are Copyright 2020 Dynmap Contributors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {LeafletMouseEvent, Marker} from "leaflet";
+import {GenericIcon} from "@/leaflet/icon/GenericIcon";
+import {GenericMarker} from "@/leaflet/marker/GenericMarker";
+import {LiveAtlasPointMarker} from "@/index";
+
+export const createPointMarker = (options: LiveAtlasPointMarker, converter: Function): Marker => {
+	const marker = new GenericMarker(converter(options.location), options);
+
+	marker.on('click', (e: LeafletMouseEvent) => {
+		if(!e.target.getPopup() || e.target.isPopupOpen()) {
+			e.target._map.panTo(e.target.getLatLng());
+		}
+	});
+
+	if(options.popup) {
+		marker.bindPopup(() => createPopup(options));
+	}
+
+	return marker;
+};
+
+export const updatePointMarker = (marker: Marker | undefined, options: LiveAtlasPointMarker, converter: Function): Marker => {
+	if (!marker) {
+		return createPointMarker(options, converter);
+	}
+
+	const oldLocation = marker.getLatLng(),
+		newLocation = converter(options.location);
+
+	if(!oldLocation.equals(newLocation)) {
+		marker.setLatLng(newLocation);
+	}
+
+	if(marker instanceof GenericMarker) {
+		const icon = marker.getIcon();
+
+		if(icon && icon instanceof GenericIcon) {
+			icon.update({
+				icon: options.icon,
+				label: options.tooltip,
+				iconSize: options.dimensions,
+				isHtml: !!options.tooltipHTML,
+			});
+		}
+	}
+
+	marker.closePopup();
+	marker.unbindPopup();
+
+	if(options.popup) {
+		marker.bindPopup(() => createPopup(options));
+	}
+
+	return marker;
+};
+
+const createPopup = (options: LiveAtlasPointMarker) => {
+	const popup = document.createElement('span');
+
+	if (options.popup) {
+		popup.classList.add('MarkerPopup');
+		popup.insertAdjacentHTML('afterbegin', options.popup);
+	}
+
+	return popup;
+}