Add location property for all marker types

Areas/lines will calculate a center point to use for their location

src/index.d.ts

@@ -185,20 +185,18 @@ interface LiveAtlasMarker {
 	tooltipHTML?: string;
 	popup?: string;
 	isPopupHTML?: boolean;
-}
-
-interface LiveAtlasPointMarker extends LiveAtlasMarker {
-	dimensions: PointTuple;
-	icon: string;
 	location: Coordinate;
 	minZoom?: number;
 	maxZoom?: number;
 }
 
+interface LiveAtlasPointMarker extends LiveAtlasMarker {
+	dimensions: PointTuple;
+	icon: string;
+}
+
 interface LiveAtlasPathMarker extends LiveAtlasMarker {
 	style: PathOptions;
-	minZoom?: number;
-	maxZoom?: number;
 }
 
 interface LiveAtlasAreaMarker extends LiveAtlasPathMarker {
@@ -213,7 +211,6 @@ interface LiveAtlasLineMarker extends LiveAtlasPathMarker {
 }
 
 interface LiveAtlasCircleMarker extends LiveAtlasPathMarker {
-	location: Coordinate;
 	radius: PointTuple;
 	style: PathOptions;
 }

src/providers/Pl3xmapMapProvider.ts

@@ -34,7 +34,7 @@ import LiveAtlasMapDefinition from "@/model/LiveAtlasMapDefinition";
 import {MutationTypes} from "@/store/mutation-types";
 import MapProvider from "@/providers/MapProvider";
 import {ActionTypes} from "@/store/action-types";
-import {stripHTML, titleColoursRegex} from "@/util";
+import {getMiddleFromPoints, stripHTML, titleColoursRegex} from "@/util";
 
 export default class Pl3xmapMapProvider extends MapProvider {
 	private configurationAbort?: AbortController = undefined;
@@ -320,11 +320,12 @@ export default class Pl3xmapMapProvider extends MapProvider {
 				fillRule: area.fillRule,
 			},
 			points: [
-				area.points[0],
+				{x: area.points[0].x, y: 0, z: area.points[0].z},
-				{x: area.points[0].x, z: area.points[1].z},
+				{x: area.points[0].x, y: 0, z: area.points[1].z},
-				area.points[1],
+				{x: area.points[1].x, y: 0, z: area.points[1].z},
-				{x: area.points[1].x, z: area.points[0].z},
+				{x: area.points[1].x, y: 0, z: area.points[0].z},
 			],
+			location: getMiddleFromPoints(area.points),
 			outline: false,
 
 			tooltip: stripHTML(area.tooltip),
@@ -335,6 +336,8 @@ export default class Pl3xmapMapProvider extends MapProvider {
 	}
 
 	private static buildArea(area: any): LiveAtlasAreaMarker {
+		const points = this.addY(area.points);
+
 		return {
 			style: {
 				stroke: typeof area.stroke !== 'undefined' ? !!area.stroke : true,
@@ -346,7 +349,8 @@ export default class Pl3xmapMapProvider extends MapProvider {
 				fillOpacity: area.fillOpacity || 0.2,
 				fillRule: area.fillRule,
 			},
-			points: area.points,
+			points,
+			location: getMiddleFromPoints(points),
 			outline: false,
 
 			tooltip: stripHTML(area.tooltip),
@@ -357,6 +361,8 @@ export default class Pl3xmapMapProvider extends MapProvider {
 	}
 
 	private static buildLine(line: any): LiveAtlasLineMarker {
+		const points = this.addY(line.points);
+
 		return {
 			style: {
 				stroke: typeof line.stroke !== 'undefined' ? !!line.stroke : true,
@@ -364,7 +370,8 @@ export default class Pl3xmapMapProvider extends MapProvider {
 				weight: line.weight || 3,
 				opacity: typeof line.opacity !== 'undefined' ? line.opacity : 1,
 			},
-			points: line.points,
+			points,
+			location: getMiddleFromPoints(points),
 
 			tooltip: stripHTML(line.tooltip),
 			tooltipHTML: line.tooltip,
@@ -399,6 +406,14 @@ export default class Pl3xmapMapProvider extends MapProvider {
 		};
 	}
 
+	private static addY(points: any) {
+		for (const point of points) {
+			points.y = 0;
+		}
+
+		return points;
+	}
+
 	async loadServerConfiguration(): Promise<void> {
 		if(this.configurationAbort) {
 			this.configurationAbort.abort();

src/util.ts

@@ -17,6 +17,7 @@
 import {useStore} from "@/store";
 import LiveAtlasMapDefinition from "@/model/LiveAtlasMapDefinition";
 import {
+	Coordinate,
 	HeadQueueEntry,
 	LiveAtlasGlobalMessageConfig,
 	LiveAtlasMessageConfig,
@@ -190,12 +191,9 @@ const validateParsedUrl = (parsed: any) => {
 	return parsed;
 }
 
-export const getUrlForLocation = (map: LiveAtlasMapDefinition, location: {
+export const getUrlForLocation = (map: LiveAtlasMapDefinition, location: Coordinate, zoom: number): string => {
-	x: number,
-	y: number,
-	z: number }, zoom: number): string => {
 	const x = Math.round(location.x),
-			y = Math.round(location.y),
+			y = Math.round(location.y || 0),
 			z = Math.round(location.z),
 			locationString = `${x},${y},${z}`;
 
@@ -250,3 +248,30 @@ const _getMessages = (messageKeys: any, config: any = {}) => {
 
 	return messages as LiveAtlasGlobalMessageConfig;
 }
+
+export const getMiddle = (points: number[]) => {
+	const min = Math.min.apply(this, points),
+		max = Math.max.apply(this, points);
+
+	return min + ((max - min) / 2)
+}
+
+export const getMiddleFromPoints = (points: Coordinate[]): Coordinate => {
+	const min = {x: points[0].x, y: points[0].y, z: points[0].z},
+		max = {...min};
+
+	for (const point of points) {
+		min.x = Math.min(min.x, point.x);
+		max.x = Math.max(min.x, point.x);
+		min.y = Math.min(min.y, point.y);
+		max.y = Math.max(min.y, point.y);
+		min.z = Math.min(min.z, point.z);
+		max.z = Math.max(min.z, point.z);
+	}
+
+	return {
+		x: min.x + ((max.x - min.x) / 2),
+		y: min.y + ((max.y - min.y) / 2),
+		z: min.z + ((max.z - min.z) / 2),
+	}
+}

src/util/dynmap.ts

@@ -28,7 +28,14 @@ import {
 	LiveAtlasWorldDefinition
 } from "@/index";
 import {getPoints} from "@/util/areas";
-import {decodeHTMLEntities, endWorldNameRegex, netherWorldNameRegex, stripHTML, titleColoursRegex} from "@/util";
+import {
+	decodeHTMLEntities,
+	endWorldNameRegex,
+	getMiddle,
+	netherWorldNameRegex,
+	stripHTML,
+	titleColoursRegex
+} from "@/util";
 import {getLinePoints} from "@/util/lines";
 import LiveAtlasMapDefinition from "@/model/LiveAtlasMapDefinition";
 import {
@@ -331,6 +338,10 @@ export function buildAreas(data: any): Map<string, LiveAtlasAreaMarker> {
 }
 
 export function buildArea(area: MarkerArea): LiveAtlasAreaMarker {
+	const x = area.x || [0, 0],
+		y = [area.ybottom || 0, area.ytop || 0] as [number, number],
+		z = area.z || [0, 0];
+
 	return {
 		style: {
 			color: area.color || '#ff0000',
@@ -340,11 +351,8 @@ export function buildArea(area: MarkerArea): LiveAtlasAreaMarker {
 			fillOpacity: area.fillopacity || 0,
 		},
 		outline: !area.fillopacity,
-		points: getPoints(
+		location: {x: getMiddle(x), y: getMiddle(y), z: getMiddle(z)},
-			area.x || [0, 0],
+		points: getPoints(x, y, z, !area.fillopacity),
-			[area.ybottom || 0, area.ytop || 0],
-			area.z || [0, 0],
-			!area.fillopacity),
 		minZoom: typeof area.minzoom !== 'undefined' && area.minzoom > -1 ? area.minzoom : undefined,
 		maxZoom: typeof area.maxzoom !== 'undefined' && area.maxzoom > -1 ? area.maxzoom : undefined,
 
@@ -370,13 +378,18 @@ export function buildLines(data: any): Map<string, LiveAtlasLineMarker> {
 }
 
 export function buildLine(line: MarkerLine): LiveAtlasLineMarker {
+	const x = line.x || [0, 0],
+		y = line.y || [0, 0],
+		z = line.z || [0, 0];
+
 	return {
 		style: {
 			color: line.color || '#ff0000',
 			opacity: line.opacity || 1,
 			weight: line.weight || 1,
 		},
-		points: getLinePoints(line.x || [0, 0], line.y || [0, 0], line.z || [0, 0]),
+		location: {x: getMiddle(x), y: getMiddle(y), z: getMiddle(z)},
+		points: getLinePoints(x, y, z),
 		minZoom: typeof line.minzoom !== 'undefined' && line.minzoom > -1 ? line.minzoom : undefined,
 		maxZoom: typeof line.maxzoom !== 'undefined' && line.maxzoom > -1 ? line.maxzoom : undefined,