Add tooltip support

src/index.d.ts

@@ -208,6 +208,7 @@ interface LiveAtlasPath {
 	minZoom?: number;
 	maxZoom?: number;
 	popupContent?: string;
+	tooltipContent?: string;
 	isPopupHTML: boolean;
 }
 

src/scss/_leaflet.scss

@@ -16,6 +16,7 @@
 
 @import "leaflet/controls";
 @import "leaflet/popups";
+@import "leaflet/tooltips";
 @import "leaflet/markers";
 
 .leaflet-container {

src/scss/leaflet/_tooltips.scss

@@ -0,0 +1,28 @@
+/*!
+ * Copyright 2021 James Lyne
+ *
+ * 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.
+ */
+
+.leaflet-tooltip {
+	background-color: var(--background-base);
+	color: var(--text-base);
+	box-shadow: var(--box-shadow);
+	border-radius: var(--border-radius);
+	border: none;
+	will-change: transform;
+
+	&:before {
+		content: none;
+	}
+}

src/util/areas.ts

@@ -21,7 +21,7 @@ import {LatLngExpression} from "leaflet";
 import LiveAtlasPolyline from "@/leaflet/vector/LiveAtlasPolyline";
 import LiveAtlasPolygon from "@/leaflet/vector/LiveAtlasPolygon";
 import {Coordinate, LiveAtlasArea} from "@/index";
-import {arePointsEqual, createPopup, isStyleEqual} from "@/util/paths";
+import {arePointsEqual, createPopup, isStyleEqual, tooltipOptions} from "@/util/paths";
 
 export const createArea = (options: LiveAtlasArea, converter: Function): LiveAtlasPolyline | LiveAtlasPolygon => {
 	const outline = !options.style.fillOpacity || (options.style.fillOpacity <= 0),
@@ -32,6 +32,10 @@ export const createArea = (options: LiveAtlasArea, converter: Function): LiveAtl
 		area.bindPopup(() => createPopup(options, 'AreaPopup'));
 	}
 
+	if (options.tooltipContent) {
+		area.bindTooltip(() => options.tooltipContent, tooltipOptions);
+	}
+
 	return area;
 };
 

src/util/circles.ts

@@ -21,7 +21,7 @@ import {LatLngExpression} from "leaflet";
 import LiveAtlasPolyline from "@/leaflet/vector/LiveAtlasPolyline";
 import LiveAtlasPolygon from "@/leaflet/vector/LiveAtlasPolygon";
 import {LiveAtlasCircle} from "@/index";
-import {createPopup} from "@/util/paths";
+import {createPopup, tooltipOptions} from "@/util/paths";
 
 export const createCircle = (options: LiveAtlasCircle, converter: Function): LiveAtlasPolyline | LiveAtlasPolygon => {
 	const outline = !options.style.fillOpacity || (options.style.fillOpacity <= 0),
@@ -32,6 +32,10 @@ export const createCircle = (options: LiveAtlasCircle, converter: Function): Liv
 		circle.bindPopup(() => createPopup(options, 'CirclePopup'));
 	}
 
+	if (options.tooltipContent) {
+		circle.bindTooltip(() => options.tooltipContent, tooltipOptions);
+	}
+
 	return circle;
 };
 

src/util/lines.ts

@@ -20,7 +20,7 @@
 import LiveAtlasPolyline from "@/leaflet/vector/LiveAtlasPolyline";
 import {Coordinate, LiveAtlasLine} from "@/index";
 import {LatLngExpression} from "leaflet";
-import {createPopup} from "@/util/paths";
+import {createPopup, tooltipOptions} from "@/util/paths";
 
 export const createLine = (options: LiveAtlasLine, converter: Function): LiveAtlasPolyline => {
 	const points = options.points.map(projectPointsMapCallback, converter),
@@ -30,6 +30,10 @@ export const createLine = (options: LiveAtlasLine, converter: Function): LiveAtl
 		line.bindPopup(() => createPopup(options, 'LinePopup'));
 	}
 
+	if (options.tooltipContent) {
+		line.bindTooltip(() => options.tooltipContent, tooltipOptions);
+	}
+
 	return line;
 };
 

src/util/paths.ts

@@ -17,6 +17,13 @@
 import {LatLngExpression, PathOptions} from "leaflet";
 import {LiveAtlasPath} from "@/index";
 
+export const tooltipOptions = {
+	direction: 'top',
+	sticky: true,
+	opacity: 1.0,
+	interactive: false,
+};
+
 export const arePointsEqual = (oldPoints: LatLngExpression | LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][],
 						newPoints: LatLngExpression | LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][]) => {
 	return JSON.stringify(oldPoints) === JSON.stringify(newPoints);