1 | import { LeafletProvider, createContainerComponent, createControlHook, createElementHook, createElementObject, extendContext, useLeafletContext } from '@react-leaflet/core';
|
2 | import { Control } from 'leaflet';
|
3 | import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
4 | export const useLayersControlElement = createElementHook(function createLayersControl({ children: _c , ...options }, ctx) {
|
5 | const control = new Control.Layers(undefined, undefined, options);
|
6 | return createElementObject(control, extendContext(ctx, {
|
7 | layersControl: control
|
8 | }));
|
9 | }, function updateLayersControl(control, props, prevProps) {
|
10 | if (props.collapsed !== prevProps.collapsed) {
|
11 | if (props.collapsed === true) {
|
12 | control.collapse();
|
13 | } else {
|
14 | control.expand();
|
15 | }
|
16 | }
|
17 | });
|
18 | export const useLayersControl = createControlHook(useLayersControlElement);
|
19 |
|
20 | export const LayersControl = createContainerComponent(useLayersControl);
|
21 | export function createControlledLayer(addLayerToControl) {
|
22 | return function ControlledLayer(props) {
|
23 | const parentContext = useLeafletContext();
|
24 | const propsRef = useRef(props);
|
25 | const [layer, setLayer] = useState(null);
|
26 | const { layersControl , map } = parentContext;
|
27 | const addLayer = useCallback((layerToAdd)=>{
|
28 | if (layersControl != null) {
|
29 | if (propsRef.current.checked) {
|
30 | map.addLayer(layerToAdd);
|
31 | }
|
32 | addLayerToControl(layersControl, layerToAdd, propsRef.current.name);
|
33 | setLayer(layerToAdd);
|
34 | }
|
35 | }, [
|
36 | layersControl,
|
37 | map
|
38 | ]);
|
39 | const removeLayer = useCallback((layerToRemove)=>{
|
40 | layersControl?.removeLayer(layerToRemove);
|
41 | setLayer(null);
|
42 | }, [
|
43 | layersControl
|
44 | ]);
|
45 | const context = useMemo(()=>{
|
46 | return extendContext(parentContext, {
|
47 | layerContainer: {
|
48 | addLayer,
|
49 | removeLayer
|
50 | }
|
51 | });
|
52 | }, [
|
53 | parentContext,
|
54 | addLayer,
|
55 | removeLayer
|
56 | ]);
|
57 | useEffect(()=>{
|
58 | if (layer !== null && propsRef.current !== props) {
|
59 | if (props.checked === true && (propsRef.current.checked == null || propsRef.current.checked === false)) {
|
60 | map.addLayer(layer);
|
61 | } else if (propsRef.current.checked === true && (props.checked == null || props.checked === false)) {
|
62 | map.removeLayer(layer);
|
63 | }
|
64 | propsRef.current = props;
|
65 | }
|
66 | });
|
67 | return props.children ? React.createElement(LeafletProvider, {
|
68 | value: context
|
69 | }, props.children) : null;
|
70 | };
|
71 | }
|
72 | LayersControl.BaseLayer = createControlledLayer(function addBaseLayer(layersControl, layer, name) {
|
73 | layersControl.addBaseLayer(layer, name);
|
74 | });
|
75 | LayersControl.Overlay = createControlledLayer(function addOverlay(layersControl, layer, name) {
|
76 | layersControl.addOverlay(layer, name);
|
77 | });
|