utopia-ui 3.0.92 → 3.0.93

package/dist/index.d.ts

@@ -40,7 +40,7 @@ export { Popup } from 'leaflet';
  * ```
  * @category Map
  */
-declare function UtopiaMap({ height, width, center, zoom, children, geo, showFilterControl, showGratitudeControl, showLayerControl, showZoomControl, showThemeControl, defaultTheme, donationWidget, }: {
+declare function UtopiaMap({ height, width, center, zoom, children, geo, showFilterControl, showGratitudeControl, showLayerControl, showZoomControl, showThemeControl, defaultTheme, donationWidget, expandLayerControl, }: {
     /** height of the map (default '500px') */
     height?: string;
     /** width of the map (default '100%') */
@@ -67,6 +67,8 @@ declare function UtopiaMap({ height, width, center, zoom, children, geo, showFil
     defaultTheme?: string;
     /** ask to donate to the Utopia Project OpenCollective campaign (default false) */
     donationWidget?: boolean;
+    /** open layer control on map initialisation */
+    expandLayerControl?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 /**

package/dist/index.esm.js

@@ -236,6 +236,23 @@ function useFilterManager(initialTags) {
                 throw new Error();
         }
     }, initialLayers);
+    const allLayers = useLayers();
+    useEffect(() => {
+        if (allLayers.length === 0)
+            return;
+        const visibleNames = visibleLayers.map((l) => l.name);
+        const allNames = allLayers.map((l) => l.name);
+        const params = new URLSearchParams(location.search);
+        const allVisible = visibleNames.length === allNames.length &&
+            visibleNames.every((name) => allNames.includes(name));
+        if (allVisible) {
+            params.delete('layers');
+        }
+        else {
+            params.set('layers', visibleNames.join(','));
+        }
+        navigate(`${location.pathname}?${params.toString()}`, { replace: true });
+    }, [visibleLayers, allLayers, navigate]);
     const [visibleGroupTypes, dispatchGroupTypes] = useReducer((state, action) => {
         switch (action.type) {
             case 'ADD_GROUP_TYPE':
@@ -1276,8 +1293,8 @@ const GratitudeControl = () => {
 
 var LayerSVG = 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHZpZXdCb3g9JzAgMCAyMCAyMCcgc3Ryb2tlLXdpZHRoPSIyIiB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPgogICAgPHBhdGgKICAgICAgICBpZD0nc3ZnXzEnCiAgICAgICAgZmlsbD0nY3VycmVudENvbG9yJwogICAgICAgIGQ9J20yLjc1NTY1LDExLjkwNzI3bC0xLjAzODUyLDAuMjgzNzJjLTAuNzc3MTgsMC4zODg1OSAtMC43NzcxOCwxLjAxMzggMCwxLjQwMjNsNy4wMTU2LDMuNTA3OGMwLjc3NzE4LDAuMzg4NTkgMi4wMjc1LDAuMzg4NTkgMi44MDQ3LDBsNy4wMTU2LC0zLjUwNzhjMC43NzcxOCwtMC4zODg1OSAwLjc3NzE4LC0xLjAxMzggMCwtMS40MDIzbC0wLjYzMzExLC0wLjQ4NjQzbC00LjY3NzE4LDIuMjM2MjRjLTEuNTQ1MiwwLjc3MjYyIC0zLjMxODc3LDEuNTgzNDMgLTQuODY0MDcsMC44MTA4MWwtNS42MjMwMiwtMi44NDQzNHonCiAgICAvPgogICAgPHBhdGgKICAgICAgICBpZD0nc3ZnXzInCiAgICAgICAgc3Ryb2tlPSdjdXJyZW50Q29sb3InCiAgICAgICAgZmlsbD0nbm9uZScKICAgICAgICBkPSdtMTEuMjQ3LDQuMzA4NTFsNi4yMzQ5LDMuMDg3N2MwLjY5MDgzLDAuMzQyMTEgMC42OTA4MywwLjg5Mjk1IDAsMS4yMzUxbC02LjIzNDksMy4wODc3Yy0wLjY5MDgzLDAuMzQyMTEgLTEuODAzMSwwLjM0MjEyIC0yLjQ5NCwwbC02LjIzNDksLTMuMDg3N2MtMC42OTA4MywtMC4zNDIxMSAtMC42OTA4MywtMC44OTI5NSAwLC0xLjIzNTFsNi4yMzQ5LC0zLjA4NzdjMC42OTA4MywtMC4zNDIxMSAxLjgwMzEsLTAuMzQyMTEgMi40OTQsMHonCiAgICAvPgo8L3N2Zz4=';
 
-function LayerControl() {
-    const [open, setOpen] = useState(false);
+function LayerControl({ expandLayerControl = false }) {
+    const [open, setOpen] = useState(expandLayerControl);
     const layers = useLayers();
     const isLayerVisible = useIsLayerVisible();
     const toggleVisibleLayer = useToggleVisibleLayer();
@@ -2740,7 +2757,7 @@ const SelectPosition = ({ setSelectNewItemPosition }) => {
                 }, children: jsx("p", { className: 'tw:text-center ', children: "\u2715" }) }), jsx("div", { className: 'tw:alert tw:bg-base-100 tw:text-base-content', children: jsx("div", { children: jsx("span", { className: 'tw:text-lg', children: "Select position on the map!" }) }) })] }));
 };
 
-function UtopiaMapInner({ children, geo, showFilterControl = false, showGratitudeControl = false, showLayerControl = true, showThemeControl = false, defaultTheme = '', donationWidget, }) {
+function UtopiaMapInner({ children, geo, showFilterControl = false, showGratitudeControl = false, showLayerControl = true, showThemeControl = false, defaultTheme = '', donationWidget, expandLayerControl, }) {
     const selectNewItemPosition = useSelectPosition();
     const setSelectNewItemPosition = useSetSelectPosition();
     const setClusterRef = useSetClusterRef();
@@ -2850,7 +2867,50 @@ function UtopiaMapInner({ children, geo, showFilterControl = false, showGratitud
             layer.bindPopup(feature.properties.name);
         }
     };
-    return (jsxs("div", { className: `tw:h-full ${selectNewItemPosition != null ? 'crosshair-cursor-enabled' : ''}`, children: [jsx(Outlet, {}), jsxs(Control, { position: 'topLeft', zIndex: '1000', absolute: true, children: [jsx(SearchControl, {}), jsx(TagsControl, {})] }), jsxs(Control, { position: 'bottomLeft', zIndex: '999', absolute: true, children: [showFilterControl && jsx(FilterControl, {}), showLayerControl && jsx(LayerControl, {}), showGratitudeControl && jsx(GratitudeControl, {})] }), jsx(TileLayer, { maxZoom: 19, attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', url: 'https://tile.osmand.net/hd/{z}/{x}/{y}.png' }), jsx(MarkerClusterGroup, { ref: (r) => setClusterRef(r), showCoverageOnHover: true, chunkedLoading: true, maxClusterRadius: 50, removeOutsideVisibleBounds: false, children: children }), geo && (jsx(GeoJSON, { data: geo, onEachFeature: onEachFeature, eventHandlers: {
+    const addFilterTag = useAddFilterTag();
+    const resetFilterTags = useResetFilterTags();
+    const tags = useTags();
+    const filterTags = useFilterTags();
+    useEffect(() => {
+        const params = new URLSearchParams(location.search);
+        const urlTags = params.get('tags');
+        const decodedTags = urlTags ? decodeURIComponent(urlTags) : '';
+        const decodedTagsArray = decodedTags.split(';').filter(Boolean);
+        const urlDiffersFromState = decodedTagsArray.some((ut) => !filterTags.find((ft) => ut.toLowerCase() === ft.name.toLowerCase())) ||
+            filterTags.some((ft) => !decodedTagsArray.find((ut) => ut.toLowerCase() === ft.name.toLowerCase()));
+        if (urlDiffersFromState) {
+            resetFilterTags();
+            decodedTagsArray.forEach((urlTag) => {
+                const match = tags.find((t) => t.name.toLowerCase() === urlTag.toLowerCase());
+                if (match)
+                    addFilterTag(match);
+            });
+        }
+    }, [location, tags, filterTags, addFilterTag, resetFilterTags]);
+    const toggleVisibleLayer = useToggleVisibleLayer();
+    const allLayers = useLayers();
+    const initializedRef = useRef(false);
+    useEffect(() => {
+        if (initializedRef.current || allLayers.length === 0)
+            return;
+        const params = new URLSearchParams(location.search);
+        const urlLayersParam = params.get('layers');
+        if (!urlLayersParam) {
+            initializedRef.current = true;
+            return;
+        }
+        const urlLayerNames = urlLayersParam.split(',').filter(Boolean);
+        const layerNamesToHide = allLayers
+            .map((l) => l.name)
+            .filter((name) => !urlLayerNames.includes(name));
+        layerNamesToHide.forEach((name) => {
+            const match = allLayers.find((l) => l.name === name);
+            if (match)
+                toggleVisibleLayer(match);
+        });
+        initializedRef.current = true;
+    }, [location, allLayers, toggleVisibleLayer]);
+    return (jsxs("div", { className: `tw:h-full ${selectNewItemPosition != null ? 'crosshair-cursor-enabled' : ''}`, children: [jsx(Outlet, {}), jsxs(Control, { position: 'topLeft', zIndex: '1000', absolute: true, children: [jsx(SearchControl, {}), jsx(TagsControl, {})] }), jsxs(Control, { position: 'bottomLeft', zIndex: '999', absolute: true, children: [showFilterControl && jsx(FilterControl, {}), showLayerControl && jsx(LayerControl, { expandLayerControl: expandLayerControl ?? false }), showGratitudeControl && jsx(GratitudeControl, {})] }), jsx(TileLayer, { maxZoom: 19, attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', url: 'https://tile.osmand.net/hd/{z}/{x}/{y}.png' }), jsx(MarkerClusterGroup, { ref: (r) => setClusterRef(r), showCoverageOnHover: true, chunkedLoading: true, maxClusterRadius: 50, removeOutsideVisibleBounds: false, children: children }), geo && (jsx(GeoJSON, { data: geo, onEachFeature: onEachFeature, eventHandlers: {
                     click: (e) => {
                         if (selectNewItemPosition) {
                             e.layer.closePopup();
@@ -2894,8 +2954,8 @@ function UtopiaMapInner({ children, geo, showFilterControl = false, showGratitud
  * ```
  * @category Map
  */
-function UtopiaMap({ height = '500px', width = '100%', center = [50.6, 9.5], zoom = 10, children, geo, showFilterControl = false, showGratitudeControl = false, showLayerControl = true, showZoomControl = false, showThemeControl = false, defaultTheme, donationWidget, }) {
-    return (jsx(ContextWrapper, { children: jsx(MapContainer, { style: { height, width }, center: new LatLng(center[0], center[1]), zoom: zoom, zoomControl: showZoomControl, maxZoom: 19, children: jsx(UtopiaMapInner, { geo: geo, showFilterControl: showFilterControl, showGratitudeControl: showGratitudeControl, showLayerControl: showLayerControl, donationWidget: donationWidget, showThemeControl: showThemeControl, defaultTheme: defaultTheme, children: children }) }) }));
+function UtopiaMap({ height = '500px', width = '100%', center = [50.6, 9.5], zoom = 10, children, geo, showFilterControl = false, showGratitudeControl = false, showLayerControl = true, showZoomControl = false, showThemeControl = false, defaultTheme, donationWidget, expandLayerControl, }) {
+    return (jsx(ContextWrapper, { children: jsx(MapContainer, { style: { height, width }, center: new LatLng(center[0], center[1]), zoom: zoom, zoomControl: showZoomControl, maxZoom: 19, children: jsx(UtopiaMapInner, { geo: geo, showFilterControl: showFilterControl, showGratitudeControl: showGratitudeControl, showLayerControl: showLayerControl, donationWidget: donationWidget, showThemeControl: showThemeControl, defaultTheme: defaultTheme, expandLayerControl: expandLayerControl, children: children }) }) }));
 }
 
 const LayerContext = createContext({
@@ -3019,27 +3079,6 @@ function Tags({ data, api }) {
         api && setTagApi(api);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [api, data]);
-    const location = useLocation();
-    const addFilterTag = useAddFilterTag();
-    const resetFilterTags = useResetFilterTags();
-    const tags = useTags();
-    const filterTags = useFilterTags();
-    useEffect(() => {
-        const params = new URLSearchParams(location.search);
-        const urlTags = params.get('tags');
-        const decodedTags = urlTags ? decodeURIComponent(urlTags) : '';
-        const decodedTagsArray = decodedTags.split(';');
-        if (decodedTagsArray.some((ut) => !filterTags.find((ft) => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase())) ||
-            filterTags.some((ft) => !decodedTagsArray.find((ut) => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase()))) {
-            resetFilterTags();
-            decodedTagsArray.map((urlTag) => {
-                const tag = tags.find((t) => t.name.toLocaleLowerCase() === urlTag.toLocaleLowerCase());
-                tag && addFilterTag(tag);
-                return null;
-            });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [location, tags]);
     return jsx(Fragment, {});
 }