diff --git a/src/index.d.ts b/src/index.d.ts index e43b95c..d91686c 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -208,6 +208,7 @@ interface LiveAtlasPath { minZoom?: number; maxZoom?: number; popupContent?: string; + tooltipContent?: string; isPopupHTML: boolean; } diff --git a/src/scss/_leaflet.scss b/src/scss/_leaflet.scss index 97f4bea..1d46c3d 100644 --- a/src/scss/_leaflet.scss +++ b/src/scss/_leaflet.scss @@ -16,6 +16,7 @@ @import "leaflet/controls"; @import "leaflet/popups"; +@import "leaflet/tooltips"; @import "leaflet/markers"; .leaflet-container { diff --git a/src/scss/leaflet/_tooltips.scss b/src/scss/leaflet/_tooltips.scss new file mode 100644 index 0000000..8989597 --- /dev/null +++ b/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; + } +} diff --git a/src/util/areas.ts b/src/util/areas.ts index 991b41c..0c6e15e 100644 --- a/src/util/areas.ts +++ b/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; }; diff --git a/src/util/circles.ts b/src/util/circles.ts index fe16aa1..1b48c80 100644 --- a/src/util/circles.ts +++ b/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; }; diff --git a/src/util/lines.ts b/src/util/lines.ts index aff19ef..01f4dca 100644 --- a/src/util/lines.ts +++ b/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; }; diff --git a/src/util/paths.ts b/src/util/paths.ts index eb63e65..4b20503 100644 --- a/src/util/paths.ts +++ b/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);