Marker changes
- Merge marker label/tooltipContent - Rename tooltipContent/popupContent to tooltip/popup - Set tooltip from label for all dynmap marker types
This commit is contained in:
parent
4415b17ceb
commit
9c74d7b163
17
src/index.d.ts
vendored
17
src/index.d.ts
vendored
@ -180,24 +180,25 @@ interface LiveAtlasMarkerSetContents {
|
|||||||
circles: Map<string, LiveAtlasCircleMarker>;
|
circles: Map<string, LiveAtlasCircleMarker>;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface LiveAtlasPointMarker {
|
interface LiveAtlasMarker {
|
||||||
|
tooltip: string;
|
||||||
|
isTooltipHTML: boolean;
|
||||||
|
popup?: string;
|
||||||
|
isPopupHTML: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LiveAtlasPointMarker extends LiveAtlasMarker {
|
||||||
dimensions: PointTuple;
|
dimensions: PointTuple;
|
||||||
icon: string;
|
icon: string;
|
||||||
label: string;
|
|
||||||
isLabelHTML: boolean;
|
|
||||||
location: Coordinate;
|
location: Coordinate;
|
||||||
minZoom?: number;
|
minZoom?: number;
|
||||||
maxZoom?: number;
|
maxZoom?: number;
|
||||||
popupContent?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface LiveAtlasPathMarker {
|
interface LiveAtlasPathMarker extends LiveAtlasMarker {
|
||||||
style: PathOptions;
|
style: PathOptions;
|
||||||
minZoom?: number;
|
minZoom?: number;
|
||||||
maxZoom?: number;
|
maxZoom?: number;
|
||||||
popupContent?: string;
|
|
||||||
tooltipContent?: string;
|
|
||||||
isPopupHTML: boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface LiveAtlasAreaMarker extends LiveAtlasPathMarker {
|
interface LiveAtlasAreaMarker extends LiveAtlasPathMarker {
|
||||||
|
@ -32,9 +32,9 @@ export class GenericMarker extends Marker {
|
|||||||
|
|
||||||
this.options.icon = new GenericIcon({
|
this.options.icon = new GenericIcon({
|
||||||
icon: options.icon,
|
icon: options.icon,
|
||||||
label: options.label,
|
label: options.tooltip,
|
||||||
iconSize: options.dimensions,
|
iconSize: options.dimensions,
|
||||||
isHtml: options.isLabelHTML,
|
isHtml: options.isTooltipHTML,
|
||||||
});
|
});
|
||||||
|
|
||||||
this.options.maxZoom = options.maxZoom;
|
this.options.maxZoom = options.maxZoom;
|
||||||
|
@ -300,8 +300,10 @@ export default class Pl3xmapMapProvider extends MapProvider {
|
|||||||
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",
|
icon: marker.icon || "default",
|
||||||
|
|
||||||
label: (marker.tooltip || '').trim(),
|
tooltip: (marker.tooltip || '').trim(),
|
||||||
isLabelHTML: true
|
isTooltipHTML: true,
|
||||||
|
popup: marker.popup,
|
||||||
|
isPopupHTML: true,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -325,8 +327,9 @@ export default class Pl3xmapMapProvider extends MapProvider {
|
|||||||
],
|
],
|
||||||
outline: false,
|
outline: false,
|
||||||
|
|
||||||
tooltipContent: area.tooltip,
|
tooltip: area.tooltip,
|
||||||
popupContent: area.popup,
|
isTooltipHTML: true,
|
||||||
|
popup: area.popup,
|
||||||
isPopupHTML: true,
|
isPopupHTML: true,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -346,8 +349,9 @@ export default class Pl3xmapMapProvider extends MapProvider {
|
|||||||
points: area.points,
|
points: area.points,
|
||||||
outline: false,
|
outline: false,
|
||||||
|
|
||||||
tooltipContent: area.tooltip,
|
tooltip: area.tooltip,
|
||||||
popupContent: area.popup,
|
isTooltipHTML: true,
|
||||||
|
popup: area.popup,
|
||||||
isPopupHTML: true,
|
isPopupHTML: true,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -362,8 +366,9 @@ export default class Pl3xmapMapProvider extends MapProvider {
|
|||||||
},
|
},
|
||||||
points: line.points,
|
points: line.points,
|
||||||
|
|
||||||
tooltipContent: line.tooltip,
|
tooltip: line.tooltip,
|
||||||
popupContent: line.popup,
|
isTooltipHTML: true,
|
||||||
|
popup: line.popup,
|
||||||
isPopupHTML: true,
|
isPopupHTML: true,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -387,8 +392,9 @@ export default class Pl3xmapMapProvider extends MapProvider {
|
|||||||
fillRule: circle.fillRule,
|
fillRule: circle.fillRule,
|
||||||
},
|
},
|
||||||
|
|
||||||
tooltipContent: circle.tooltip,
|
tooltip: circle.tooltip,
|
||||||
popupContent: circle.popup,
|
isTooltipHTML: true,
|
||||||
|
popup: circle.popup,
|
||||||
isPopupHTML: true
|
isPopupHTML: true
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -28,12 +28,12 @@ export const createArea = (options: LiveAtlasAreaMarker, converter: Function): L
|
|||||||
points = options.points.map(projectPointsMapCallback, converter) as LatLngExpression[] | LatLngExpression[][],
|
points = options.points.map(projectPointsMapCallback, converter) as LatLngExpression[] | LatLngExpression[][],
|
||||||
area = outline ? new LiveAtlasPolyline(points, options) : new LiveAtlasPolygon(points, options);
|
area = outline ? new LiveAtlasPolyline(points, options) : new LiveAtlasPolygon(points, options);
|
||||||
|
|
||||||
if (options.popupContent) {
|
if (options.popup) {
|
||||||
area.bindPopup(() => createPopup(options, 'AreaPopup'));
|
area.bindPopup(() => createPopup(options, 'AreaPopup'));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.tooltipContent) {
|
if (options.tooltip) {
|
||||||
area.bindTooltip(() => options.tooltipContent as string, tooltipOptions);
|
area.bindTooltip(() => options.tooltip as string, tooltipOptions);
|
||||||
}
|
}
|
||||||
|
|
||||||
return area;
|
return area;
|
||||||
|
@ -28,12 +28,12 @@ export const createCircle = (options: LiveAtlasCircleMarker, converter: Function
|
|||||||
points = getCirclePoints(options, converter, outline),
|
points = getCirclePoints(options, converter, outline),
|
||||||
circle = outline ? new LiveAtlasPolyline(points, options) : new LiveAtlasPolygon(points, options);
|
circle = outline ? new LiveAtlasPolyline(points, options) : new LiveAtlasPolygon(points, options);
|
||||||
|
|
||||||
if(options.popupContent) {
|
if(options.popup) {
|
||||||
circle.bindPopup(() => createPopup(options, 'CirclePopup'));
|
circle.bindPopup(() => createPopup(options, 'CirclePopup'));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.tooltipContent) {
|
if (options.tooltip) {
|
||||||
circle.bindTooltip(() => options.tooltipContent as string, tooltipOptions);
|
circle.bindTooltip(() => options.tooltip as string, tooltipOptions);
|
||||||
}
|
}
|
||||||
|
|
||||||
return circle;
|
return circle;
|
||||||
|
@ -293,8 +293,6 @@ export function buildMarker(data: Marker): LiveAtlasPointMarker {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const marker = {
|
const marker = {
|
||||||
label: data.label || '',
|
|
||||||
isLabelHTML: data.markup || false,
|
|
||||||
location: {
|
location: {
|
||||||
x: data.x || 0,
|
x: data.x || 0,
|
||||||
y: data.y || 0,
|
y: data.y || 0,
|
||||||
@ -304,12 +302,15 @@ export function buildMarker(data: Marker): LiveAtlasPointMarker {
|
|||||||
icon: data.icon || "default",
|
icon: data.icon || "default",
|
||||||
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,
|
||||||
popupContent: data.desc || undefined,
|
tooltip: data.label || '',
|
||||||
|
isTooltipHTML: data.markup || false,
|
||||||
|
popup: data.desc || undefined,
|
||||||
|
isPopupHTML: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
//Fix double escaping on non-HTML labels
|
//Fix double escaping on non-HTML labels
|
||||||
if(!marker.isLabelHTML) {
|
if(!marker.isTooltipHTML) {
|
||||||
marker.label = decodeHTMLEntities(marker.label);
|
marker.tooltip = decodeHTMLEntities(marker.tooltip);
|
||||||
}
|
}
|
||||||
|
|
||||||
return marker;
|
return marker;
|
||||||
@ -347,8 +348,10 @@ export function buildArea(area: MarkerArea): LiveAtlasAreaMarker {
|
|||||||
minZoom: typeof area.minzoom !== 'undefined' && area.minzoom > -1 ? area.minzoom : undefined,
|
minZoom: typeof area.minzoom !== 'undefined' && area.minzoom > -1 ? area.minzoom : undefined,
|
||||||
maxZoom: typeof area.maxzoom !== 'undefined' && area.maxzoom > -1 ? area.maxzoom : undefined,
|
maxZoom: typeof area.maxzoom !== 'undefined' && area.maxzoom > -1 ? area.maxzoom : undefined,
|
||||||
|
|
||||||
|
tooltip: area.label,
|
||||||
|
isTooltipHTML: area.markup || false,
|
||||||
|
popup: area.desc || area.label || undefined,
|
||||||
isPopupHTML: area.desc ? true : area.markup || false,
|
isPopupHTML: area.desc ? true : area.markup || false,
|
||||||
popupContent: area.desc || area.label || undefined,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -377,8 +380,10 @@ export function buildLine(line: MarkerLine): LiveAtlasLineMarker {
|
|||||||
minZoom: typeof line.minzoom !== 'undefined' && line.minzoom > -1 ? line.minzoom : undefined,
|
minZoom: typeof line.minzoom !== 'undefined' && line.minzoom > -1 ? line.minzoom : undefined,
|
||||||
maxZoom: typeof line.maxzoom !== 'undefined' && line.maxzoom > -1 ? line.maxzoom : undefined,
|
maxZoom: typeof line.maxzoom !== 'undefined' && line.maxzoom > -1 ? line.maxzoom : undefined,
|
||||||
|
|
||||||
|
tooltip: line.label,
|
||||||
|
isTooltipHTML: line.markup || false,
|
||||||
|
popup: line.desc || line.label || undefined,
|
||||||
isPopupHTML: line.desc ? true : line.markup || false,
|
isPopupHTML: line.desc ? true : line.markup || false,
|
||||||
popupContent: line.desc || line.label || undefined,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -414,8 +419,10 @@ export function buildCircle(circle: MarkerCircle): LiveAtlasCircleMarker {
|
|||||||
minZoom: typeof circle.minzoom !== 'undefined' && circle.minzoom > -1 ? circle.minzoom : undefined,
|
minZoom: typeof circle.minzoom !== 'undefined' && circle.minzoom > -1 ? circle.minzoom : undefined,
|
||||||
maxZoom: typeof circle.maxzoom !== 'undefined' && circle.maxzoom > -1 ? circle.maxzoom : undefined,
|
maxZoom: typeof circle.maxzoom !== 'undefined' && circle.maxzoom > -1 ? circle.maxzoom : undefined,
|
||||||
|
|
||||||
|
tooltip: circle.label,
|
||||||
|
isTooltipHTML: circle.markup || false,
|
||||||
|
popup: circle.desc || circle.label || undefined,
|
||||||
isPopupHTML: circle.desc ? true : circle.markup || false,
|
isPopupHTML: circle.desc ? true : circle.markup || false,
|
||||||
popupContent: circle.desc || circle.label || undefined,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -26,12 +26,12 @@ export const createLine = (options: LiveAtlasLineMarker, converter: Function): L
|
|||||||
const points = options.points.map(projectPointsMapCallback, converter),
|
const points = options.points.map(projectPointsMapCallback, converter),
|
||||||
line = new LiveAtlasPolyline(points, options);
|
line = new LiveAtlasPolyline(points, options);
|
||||||
|
|
||||||
if(options.popupContent) {
|
if(options.popup) {
|
||||||
line.bindPopup(() => createPopup(options, 'LinePopup'));
|
line.bindPopup(() => createPopup(options, 'LinePopup'));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.tooltipContent) {
|
if (options.tooltip) {
|
||||||
line.bindTooltip(() => options.tooltipContent as string, tooltipOptions);
|
line.bindTooltip(() => options.tooltip as string, tooltipOptions);
|
||||||
}
|
}
|
||||||
|
|
||||||
return line;
|
return line;
|
||||||
|
@ -31,7 +31,7 @@ export const createMarker = (options: LiveAtlasPointMarker, converter: Function)
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if(options.popupContent) {
|
if(options.popup) {
|
||||||
marker.bindPopup(() => createPopup(options));
|
marker.bindPopup(() => createPopup(options));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -56,9 +56,9 @@ export const updateMarker = (marker: Marker | undefined, options: LiveAtlasPoint
|
|||||||
if(icon && icon instanceof GenericIcon) {
|
if(icon && icon instanceof GenericIcon) {
|
||||||
icon.update({
|
icon.update({
|
||||||
icon: options.icon,
|
icon: options.icon,
|
||||||
label: options.label,
|
label: options.tooltip,
|
||||||
iconSize: options.dimensions,
|
iconSize: options.dimensions,
|
||||||
isHtml: options.isLabelHTML,
|
isHtml: options.isTooltipHTML,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -66,7 +66,7 @@ export const updateMarker = (marker: Marker | undefined, options: LiveAtlasPoint
|
|||||||
marker.closePopup();
|
marker.closePopup();
|
||||||
marker.unbindPopup();
|
marker.unbindPopup();
|
||||||
|
|
||||||
if(options.popupContent) {
|
if(options.popup) {
|
||||||
marker.bindPopup(() => createPopup(options));
|
marker.bindPopup(() => createPopup(options));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -76,9 +76,9 @@ export const updateMarker = (marker: Marker | undefined, options: LiveAtlasPoint
|
|||||||
const createPopup = (options: LiveAtlasPointMarker) => {
|
const createPopup = (options: LiveAtlasPointMarker) => {
|
||||||
const popup = document.createElement('span');
|
const popup = document.createElement('span');
|
||||||
|
|
||||||
if (options.popupContent) {
|
if (options.popup) {
|
||||||
popup.classList.add('MarkerPopup');
|
popup.classList.add('MarkerPopup');
|
||||||
popup.insertAdjacentHTML('afterbegin', options.popupContent);
|
popup.insertAdjacentHTML('afterbegin', options.popup);
|
||||||
}
|
}
|
||||||
|
|
||||||
return popup;
|
return popup;
|
||||||
|
@ -43,9 +43,9 @@ export const createPopup = (options: LiveAtlasPathMarker, className: string): HT
|
|||||||
|
|
||||||
if(options.isPopupHTML) {
|
if(options.isPopupHTML) {
|
||||||
popup.classList.add(className);
|
popup.classList.add(className);
|
||||||
popup.insertAdjacentHTML('afterbegin', options.popupContent as string);
|
popup.insertAdjacentHTML('afterbegin', options.popup as string);
|
||||||
} else {
|
} else {
|
||||||
popup.textContent = options.popupContent as string;
|
popup.textContent = options.popup as string;
|
||||||
}
|
}
|
||||||
|
|
||||||
return popup;
|
return popup;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user