1 | import { createElementObject, createOverlayComponent } from '@react-leaflet/core';
|
2 | import { Tooltip as LeafletTooltip } from 'leaflet';
|
3 | import { useEffect } from 'react';
|
4 | export const Tooltip = createOverlayComponent(function createTooltip(props, context) {
|
5 | const tooltip = new LeafletTooltip(props, context.overlayContainer);
|
6 | return createElementObject(tooltip, context);
|
7 | }, function useTooltipLifecycle(element, context, { position }, setOpen) {
|
8 | useEffect(function addTooltip() {
|
9 | const container = context.overlayContainer;
|
10 | if (container == null) {
|
11 | return;
|
12 | }
|
13 | const { instance } = element;
|
14 | const onTooltipOpen = (event)=>{
|
15 | if (event.tooltip === instance) {
|
16 | if (position != null) {
|
17 | instance.setLatLng(position);
|
18 | }
|
19 | instance.update();
|
20 | setOpen(true);
|
21 | }
|
22 | };
|
23 | const onTooltipClose = (event)=>{
|
24 | if (event.tooltip === instance) {
|
25 | setOpen(false);
|
26 | }
|
27 | };
|
28 | container.on({
|
29 | tooltipopen: onTooltipOpen,
|
30 | tooltipclose: onTooltipClose
|
31 | });
|
32 | container.bindTooltip(instance);
|
33 | return function removeTooltip() {
|
34 | container.off({
|
35 | tooltipopen: onTooltipOpen,
|
36 | tooltipclose: onTooltipClose
|
37 | });
|
38 |
|
39 | if (container._map != null) {
|
40 | container.unbindTooltip();
|
41 | }
|
42 | };
|
43 | }, [
|
44 | element,
|
45 | context,
|
46 | setOpen,
|
47 | position
|
48 | ]);
|
49 | });
|