Replace MapProvider.getMarkerIconURL with passing full URL to GenericMarker
This commit is contained in:
parent
60d84d61a0
commit
bd13e67f48
@ -60,7 +60,7 @@ export default defineComponent({
|
|||||||
})),
|
})),
|
||||||
icon = computed(() => {
|
icon = computed(() => {
|
||||||
if('icon' in props.marker) {
|
if('icon' in props.marker) {
|
||||||
return store.state.currentMapProvider!.getMarkerIconUrl((props.marker as LiveAtlasPointMarker).icon);
|
return (props.marker as LiveAtlasPointMarker).iconUrl;
|
||||||
}
|
}
|
||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
|
4
src/index.d.ts
vendored
4
src/index.d.ts
vendored
@ -191,8 +191,6 @@ interface LiveAtlasMapProvider {
|
|||||||
login(formData: FormData): void;
|
login(formData: FormData): void;
|
||||||
logout(): void;
|
logout(): void;
|
||||||
register(formData: FormData): void;
|
register(formData: FormData): void;
|
||||||
|
|
||||||
getMarkerIconUrl(icon: string): string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface LiveAtlasMarkerSet {
|
interface LiveAtlasMarkerSet {
|
||||||
@ -220,7 +218,7 @@ interface LiveAtlasMarker {
|
|||||||
interface LiveAtlasPointMarker extends LiveAtlasMarker {
|
interface LiveAtlasPointMarker extends LiveAtlasMarker {
|
||||||
type: LiveAtlasMarkerType.POINT;
|
type: LiveAtlasMarkerType.POINT;
|
||||||
dimensions: PointTuple;
|
dimensions: PointTuple;
|
||||||
icon: string;
|
iconUrl: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface LiveAtlasPathMarker extends LiveAtlasMarker {
|
interface LiveAtlasPathMarker extends LiveAtlasMarker {
|
||||||
|
@ -18,10 +18,9 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import {PointExpression, Icon, DomUtil, point, BaseIconOptions, PointTuple, Layer, LayerOptions, Util} from 'leaflet';
|
import {PointExpression, Icon, DomUtil, point, BaseIconOptions, PointTuple, Layer, LayerOptions, Util} from 'leaflet';
|
||||||
import {useStore} from "@/store";
|
|
||||||
|
|
||||||
export interface GenericIconOptions extends BaseIconOptions {
|
export interface GenericIconOptions extends BaseIconOptions {
|
||||||
icon: string;
|
iconUrl: string;
|
||||||
label: string;
|
label: string;
|
||||||
isHtml?: boolean;
|
isHtml?: boolean;
|
||||||
showLabel?: boolean;
|
showLabel?: boolean;
|
||||||
@ -39,7 +38,7 @@ const markerLabel: HTMLSpanElement = document.createElement('span');
|
|||||||
markerLabel.className = 'marker__label';
|
markerLabel.className = 'marker__label';
|
||||||
|
|
||||||
const defaultOptions: GenericIconOptions = {
|
const defaultOptions: GenericIconOptions = {
|
||||||
icon: 'default',
|
iconUrl: 'default',
|
||||||
label: '',
|
label: '',
|
||||||
iconSize: [16, 16],
|
iconSize: [16, 16],
|
||||||
popupAnchor: [0, 0],
|
popupAnchor: [0, 0],
|
||||||
@ -71,11 +70,10 @@ export class GenericIcon extends Layer implements Icon<GenericIconOptions> {
|
|||||||
DomUtil.remove(oldIcon);
|
DomUtil.remove(oldIcon);
|
||||||
}
|
}
|
||||||
|
|
||||||
const div = markerContainer.cloneNode(false) as HTMLDivElement,
|
const div = markerContainer.cloneNode(false) as HTMLDivElement;
|
||||||
url = useStore().state.currentMapProvider!.getMarkerIconUrl(this.options.icon);
|
|
||||||
|
|
||||||
this._image = markerIcon.cloneNode(false) as HTMLImageElement;
|
this._image = markerIcon.cloneNode(false) as HTMLImageElement;
|
||||||
this._image.src = url;
|
this._image.src = this.options.iconUrl;
|
||||||
|
|
||||||
div.appendChild(this._image);
|
div.appendChild(this._image);
|
||||||
div.classList.add('marker', 'leaflet-marker-icon');
|
div.classList.add('marker', 'leaflet-marker-icon');
|
||||||
@ -138,9 +136,9 @@ export class GenericIcon extends Layer implements Icon<GenericIconOptions> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
update(options: GenericIconOptions) {
|
update(options: GenericIconOptions) {
|
||||||
if(this._image && options.icon !== this.options.icon) {
|
if(this._image && options.iconUrl !== this.options.iconUrl) {
|
||||||
this.options.icon = options.icon;
|
this.options.iconUrl = options.iconUrl;
|
||||||
this._image!.src = useStore().state.currentMapProvider!.getMarkerIconUrl(this.options.icon);
|
this._image!.src = this.options.iconUrl;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.options.iconSize = options.iconSize;
|
this.options.iconSize = options.iconSize;
|
||||||
|
@ -31,7 +31,7 @@ export class GenericMarker extends Marker {
|
|||||||
super(latLng, {});
|
super(latLng, {});
|
||||||
|
|
||||||
this.options.icon = new GenericIcon({
|
this.options.icon = new GenericIcon({
|
||||||
icon: options.icon,
|
iconUrl: options.iconUrl,
|
||||||
label: options.tooltipHTML || options.tooltip,
|
label: options.tooltipHTML || options.tooltip,
|
||||||
iconSize: options.dimensions,
|
iconSize: options.dimensions,
|
||||||
isHtml: !!options.tooltipHTML,
|
isHtml: !!options.tooltipHTML,
|
||||||
|
@ -110,7 +110,7 @@ export default class DynmapMapProvider extends MapProvider {
|
|||||||
markerSet = buildMarkerSet(key, set),
|
markerSet = buildMarkerSet(key, set),
|
||||||
markers = new Map<string, LiveAtlasMarker>();
|
markers = new Map<string, LiveAtlasMarker>();
|
||||||
|
|
||||||
buildMarkers(set.markers || {}, markers);
|
buildMarkers(set.markers || {}, markers, this.config);
|
||||||
buildAreas(set.areas || {}, markers);
|
buildAreas(set.areas || {}, markers);
|
||||||
buildLines(set.lines || {}, markers);
|
buildLines(set.lines || {}, markers);
|
||||||
buildCircles(set.circles || {}, markers);
|
buildCircles(set.circles || {}, markers);
|
||||||
@ -173,7 +173,7 @@ export default class DynmapMapProvider extends MapProvider {
|
|||||||
|
|
||||||
const response = await this.getJSON(url, this.updateAbort.signal);
|
const response = await this.getJSON(url, this.updateAbort.signal);
|
||||||
const players: Set<LiveAtlasPlayer> = new Set(),
|
const players: Set<LiveAtlasPlayer> = new Set(),
|
||||||
updates = buildUpdates(response.updates || [], this.updateTimestamp),
|
updates = buildUpdates(response.updates || [], this.updateTimestamp, this.config),
|
||||||
worldState = {
|
worldState = {
|
||||||
timeOfDay: response.servertime || 0,
|
timeOfDay: response.servertime || 0,
|
||||||
thundering: response.isThundering || false,
|
thundering: response.isThundering || false,
|
||||||
@ -311,10 +311,6 @@ export default class DynmapMapProvider extends MapProvider {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getMarkerIconUrl(icon: string): string {
|
|
||||||
return `${this.config.markers}_markers_/${icon}.png`;
|
|
||||||
}
|
|
||||||
|
|
||||||
async login(data: any) {
|
async login(data: any) {
|
||||||
if (!this.store.getters.loginEnabled) {
|
if (!this.store.getters.loginEnabled) {
|
||||||
return Promise.reject(this.store.state.messages.loginErrorDisabled);
|
return Promise.reject(this.store.state.messages.loginErrorDisabled);
|
||||||
|
@ -33,8 +33,6 @@ export default abstract class MapProvider implements LiveAtlasMapProvider {
|
|||||||
abstract loadServerConfiguration(): Promise<void>;
|
abstract loadServerConfiguration(): Promise<void>;
|
||||||
abstract createTileLayer(options: LiveAtlasTileLayerOptions): LiveAtlasTileLayer;
|
abstract createTileLayer(options: LiveAtlasTileLayerOptions): LiveAtlasTileLayer;
|
||||||
|
|
||||||
abstract getMarkerIconUrl(icon: string): string;
|
|
||||||
|
|
||||||
async populateWorld(world: LiveAtlasWorldDefinition): Promise<void> {}
|
async populateWorld(world: LiveAtlasWorldDefinition): Promise<void> {}
|
||||||
async populateMap(map: LiveAtlasMapDefinition): Promise<void> {}
|
async populateMap(map: LiveAtlasMapDefinition): Promise<void> {}
|
||||||
|
|
||||||
|
@ -247,7 +247,7 @@ export default class OverviewerMapProvider extends MapProvider {
|
|||||||
|
|
||||||
(markers[set.groupName]?.raw || []).forEach((marker: any, index: number) => {
|
(markers[set.groupName]?.raw || []).forEach((marker: any, index: number) => {
|
||||||
const id = `marker_${index}`;
|
const id = `marker_${index}`;
|
||||||
setContents.set(id, OverviewerMapProvider.buildMarker(id, marker, set));
|
setContents.set(id, this.buildMarker(id, marker, set));
|
||||||
});
|
});
|
||||||
|
|
||||||
this.mapMarkers.get(map)!.set(set.groupName, setContents);
|
this.mapMarkers.get(map)!.set(set.groupName, setContents);
|
||||||
@ -255,7 +255,7 @@ export default class OverviewerMapProvider extends MapProvider {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private static buildMarker(id: string, data: any, markerSet: any): LiveAtlasMarker {
|
private buildMarker(id: string, data: any, markerSet: any): LiveAtlasMarker {
|
||||||
const marker: any = {
|
const marker: any = {
|
||||||
id,
|
id,
|
||||||
tooltip: stripHTML(data.hovertext.trim()),
|
tooltip: stripHTML(data.hovertext.trim()),
|
||||||
@ -276,7 +276,7 @@ export default class OverviewerMapProvider extends MapProvider {
|
|||||||
} else {
|
} else {
|
||||||
marker.type = LiveAtlasMarkerType.POINT;
|
marker.type = LiveAtlasMarkerType.POINT;
|
||||||
marker.location = {x: data.x, y: data.y, z: data.z};
|
marker.location = {x: data.x, y: data.y, z: data.z};
|
||||||
marker.icon = data.icon || markerSet.icon;
|
marker.iconUrl = this.config + (data.icon || markerSet.icon);
|
||||||
}
|
}
|
||||||
|
|
||||||
return marker as LiveAtlasMarker;
|
return marker as LiveAtlasMarker;
|
||||||
@ -317,8 +317,4 @@ export default class OverviewerMapProvider extends MapProvider {
|
|||||||
createTileLayer(options: LiveAtlasTileLayerOptions): LiveAtlasTileLayer {
|
createTileLayer(options: LiveAtlasTileLayerOptions): LiveAtlasTileLayer {
|
||||||
return new OverviewerTileLayer(options);
|
return new OverviewerTileLayer(options);
|
||||||
}
|
}
|
||||||
|
|
||||||
getMarkerIconUrl(icon: string): string {
|
|
||||||
return this.config + icon;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -280,7 +280,7 @@ export default class Pl3xmapMapProvider extends MapProvider {
|
|||||||
switch(marker.type) {
|
switch(marker.type) {
|
||||||
case 'icon':
|
case 'icon':
|
||||||
markerId = `point_${markers.size}`;
|
markerId = `point_${markers.size}`;
|
||||||
markers.set(markerId, Pl3xmapMapProvider.buildMarker(markerId, marker));
|
markers.set(markerId, this.buildMarker(markerId, marker));
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'polyline':
|
case 'polyline':
|
||||||
@ -316,7 +316,7 @@ export default class Pl3xmapMapProvider extends MapProvider {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private static buildMarker(id: string, marker: any): LiveAtlasPointMarker {
|
private buildMarker(id: string, marker: any): LiveAtlasPointMarker {
|
||||||
return {
|
return {
|
||||||
id,
|
id,
|
||||||
type: LiveAtlasMarkerType.POINT,
|
type: LiveAtlasMarkerType.POINT,
|
||||||
@ -326,7 +326,7 @@ export default class Pl3xmapMapProvider extends MapProvider {
|
|||||||
z: marker.point?.z || 0,
|
z: marker.point?.z || 0,
|
||||||
},
|
},
|
||||||
dimensions: marker.size ? [marker.size.x || 16, marker.size.z || 16] : [16, 16],
|
dimensions: marker.size ? [marker.size.x || 16, marker.size.z || 16] : [16, 16],
|
||||||
icon: marker.icon || "default",
|
iconUrl: `${this.config}images/icon/registered/${marker.icon || "default"}.png`,
|
||||||
|
|
||||||
tooltip: marker.tooltip ? stripHTML(marker.tooltip) : '',
|
tooltip: marker.tooltip ? stripHTML(marker.tooltip) : '',
|
||||||
tooltipHTML: marker.tooltip,
|
tooltipHTML: marker.tooltip,
|
||||||
@ -599,8 +599,4 @@ export default class Pl3xmapMapProvider extends MapProvider {
|
|||||||
this.markersAbort.abort();
|
this.markersAbort.abort();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getMarkerIconUrl(icon: string): string {
|
|
||||||
return `${this.config}images/icon/registered/${icon}.png`;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -317,7 +317,7 @@ export function buildMarkerSet(id: string, data: MarkerSet): any {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function buildMarkers(data: any, list: Map<string, LiveAtlasMarker>): void {
|
export function buildMarkers(data: any, list: Map<string, LiveAtlasMarker>, config: DynmapUrlConfig): void {
|
||||||
let id;
|
let id;
|
||||||
|
|
||||||
for (const key in data) {
|
for (const key in data) {
|
||||||
@ -326,11 +326,11 @@ export function buildMarkers(data: any, list: Map<string, LiveAtlasMarker>): voi
|
|||||||
}
|
}
|
||||||
|
|
||||||
id = `point_${key}`;
|
id = `point_${key}`;
|
||||||
list.set(id, buildMarker(id, data[key]));
|
list.set(id, buildMarker(id, data[key], config));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function buildMarker(id: string, data: Marker): LiveAtlasPointMarker {
|
function buildMarker(id: string, data: Marker, config: DynmapUrlConfig): LiveAtlasPointMarker {
|
||||||
let dimensions;
|
let dimensions;
|
||||||
|
|
||||||
if(data.dim) {
|
if(data.dim) {
|
||||||
@ -350,7 +350,7 @@ export function buildMarker(id: string, data: Marker): LiveAtlasPointMarker {
|
|||||||
z: !isNaN(data.z) ? Number.isInteger(data.z) ? data.z + 0.5 : data.z : 0,
|
z: !isNaN(data.z) ? Number.isInteger(data.z) ? data.z + 0.5 : data.z : 0,
|
||||||
},
|
},
|
||||||
dimensions: (dimensions || [16, 16]) as PointTuple,
|
dimensions: (dimensions || [16, 16]) as PointTuple,
|
||||||
icon: data.icon || "default",
|
iconUrl: `${config.markers}_markers_/${data.icon || "default"}.png`,
|
||||||
minZoom: typeof data.minzoom !== 'undefined' && data.minzoom > -1 ? data.minzoom : undefined,
|
minZoom: typeof data.minzoom !== 'undefined' && data.minzoom > -1 ? data.minzoom : undefined,
|
||||||
maxZoom: typeof data.maxzoom !== 'undefined' && data.maxzoom > -1 ? data.maxzoom : undefined,
|
maxZoom: typeof data.maxzoom !== 'undefined' && data.maxzoom > -1 ? data.maxzoom : undefined,
|
||||||
tooltip: data.markup ? stripHTML(data.label) : data.label,
|
tooltip: data.markup ? stripHTML(data.label) : data.label,
|
||||||
@ -504,7 +504,7 @@ export function buildCircle(id: string, circle: MarkerCircle): LiveAtlasCircleMa
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function buildUpdates(data: Array<any>, lastUpdate: Date) {
|
export function buildUpdates(data: Array<any>, lastUpdate: Date, config: DynmapUrlConfig) {
|
||||||
const updates = {
|
const updates = {
|
||||||
markerSets: [] as DynmapMarkerSetUpdate[],
|
markerSets: [] as DynmapMarkerSetUpdate[],
|
||||||
markers: [] as DynmapMarkerUpdate[],
|
markers: [] as DynmapMarkerUpdate[],
|
||||||
@ -565,7 +565,7 @@ export function buildUpdates(data: Array<any>, lastUpdate: Date) {
|
|||||||
if (entry.msg.startsWith("marker")) {
|
if (entry.msg.startsWith("marker")) {
|
||||||
update.id = `point_${entry.id}`;
|
update.id = `point_${entry.id}`;
|
||||||
update.type = LiveAtlasMarkerType.POINT;
|
update.type = LiveAtlasMarkerType.POINT;
|
||||||
update.payload = update.removed ? undefined : buildMarker(update.id, entry);
|
update.payload = update.removed ? undefined : buildMarker(update.id, entry, config);
|
||||||
} else if (entry.msg.startsWith("area")) {
|
} else if (entry.msg.startsWith("area")) {
|
||||||
update.id = `area_${entry.id}`;
|
update.id = `area_${entry.id}`;
|
||||||
update.type = LiveAtlasMarkerType.AREA;
|
update.type = LiveAtlasMarkerType.AREA;
|
||||||
|
@ -52,7 +52,7 @@ export const updatePointLayer = (marker: Marker | undefined, options: LiveAtlasP
|
|||||||
|
|
||||||
if(icon && icon instanceof GenericIcon) {
|
if(icon && icon instanceof GenericIcon) {
|
||||||
icon.update({
|
icon.update({
|
||||||
icon: options.icon,
|
iconUrl: options.iconUrl,
|
||||||
label: options.tooltipHTML || options.tooltip,
|
label: options.tooltipHTML || options.tooltip,
|
||||||
iconSize: options.dimensions,
|
iconSize: options.dimensions,
|
||||||
isHtml: !!options.tooltipHTML,
|
isHtml: !!options.tooltipHTML,
|
||||||
|
Loading…
Reference in New Issue
Block a user