diff --git a/src/components/map/vector/Points.vue b/src/components/map/vector/Points.vue index 8ee7091..7165092 100644 --- a/src/components/map/vector/Points.vue +++ b/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); } } }); diff --git a/src/util/points.ts b/src/util/points.ts new file mode 100644 index 0000000..fa6e13e --- /dev/null +++ b/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; +}