@dartcom/ui-kit 10.2.28 → 10.2.32

package/dist/index.cjs

@@ -41,6 +41,21 @@ function _interopNamespaceDefault(e) {
     return Object.freeze(n);
 }
 
+function _mergeNamespaces(n, m) {
+    m.forEach(function (e) {
+        e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
+            if (k !== 'default' && !(k in n)) {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    });
+    return Object.freeze(n);
+}
+
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 exports.Operations = void 0;
@@ -14633,10 +14648,11 @@ function requireLeafletSrc () {
 }
 
 var leafletSrcExports = requireLeafletSrc();
+var s$3 = /*@__PURE__*/getDefaultExportFromCjs(leafletSrcExports);
 
-function r$1(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$1(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx$1(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$1(e))&&(n&&(n+=" "),n+=t);return n}
+function r$2(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$2(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx$1(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$2(e))&&(n&&(n+=" "),n+=t);return n}
 
-let e$1={data:""},t=t=>{if("object"==typeof window){let e=(t?t.querySelector("#_goober"):window._goober)||Object.assign(document.createElement("style"),{innerHTML:" ",id:"_goober"});return e.nonce=window.__nonce__,e.parentNode||(t||document.head).appendChild(e),e.firstChild}return t||e$1},l=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,a=/\/\*[^]*?\*\/|  +/g,n$1=/\n+/g,o$2=(e,t)=>{let r="",l="",a="";for(let n in e){let c=e[n];"@"==n[0]?"i"==n[1]?r=n+" "+c+";":l+="f"==n[1]?o$2(c,n):n+"{"+o$2(c,"k"==n[1]?"":t)+"}":"object"==typeof c?l+=o$2(c,t?t.replace(/([^,])+/g,e=>n.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+" "+t:t)):n):null!=c&&(n=/^--/.test(n)?n:n.replace(/[A-Z]/g,"-$&").toLowerCase(),a+=o$2.p?o$2.p(n,c):n+":"+c+";");}return r+(t&&a?t+"{"+a+"}":a)+l},c$1={},s$2=e=>{if("object"==typeof e){let t="";for(let r in e)t+=r+s$2(e[r]);return t}return e},i$2=(e,t,r,i,p)=>{let u=s$2(e),d=c$1[u]||(c$1[u]=(e=>{let t=0,r=11;for(;t<e.length;)r=101*r+e.charCodeAt(t++)>>>0;return "go"+r})(u));if(!c$1[d]){let t=u!==e?e:(e=>{let t,r,o=[{}];for(;t=l.exec(e.replace(a,""));)t[4]?o.shift():t[3]?(r=t[3].replace(n$1," ").trim(),o.unshift(o[0][r]=o[0][r]||{})):o[0][t[1]]=t[2].replace(n$1," ").trim();return o[0]})(e);c$1[d]=o$2(p?{["@keyframes "+d]:t}:t,r?"":"."+d);}let f=r&&c$1.g?c$1.g:null;return r&&(c$1.g=c$1[d]),((e,t,r,l)=>{l?t.data=t.data.replace(l,e):-1===t.data.indexOf(e)&&(t.data=r?e+t.data:t.data+e);})(c$1[d],t,i,f),d},p=(e,t,r)=>e.reduce((e,l,a)=>{let n=t[a];if(n&&n.call){let e=n(r),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;n=t?"."+t:e&&"object"==typeof e?e.props?"":o$2(e,""):false===e?"":e;}return e+l+(null==n?"":n)},"");function u(e){let r=this||{},l=e.call?e(r.p):e;return i$2(l.unshift?l.raw?p(l,[].slice.call(arguments,1),r.p):l.reduce((e,t)=>Object.assign(e,t&&t.call?t(r.p):t),{}):l,t(r.target),r.g,r.o,r.k)}u.bind({g:1});u.bind({k:1});
+let e$1={data:""},t=t=>{if("object"==typeof window){let e=(t?t.querySelector("#_goober"):window._goober)||Object.assign(document.createElement("style"),{innerHTML:" ",id:"_goober"});return e.nonce=window.__nonce__,e.parentNode||(t||document.head).appendChild(e),e.firstChild}return t||e$1},l$1=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,a=/\/\*[^]*?\*\/|  +/g,n$1=/\n+/g,o$2=(e,t)=>{let r="",l="",a="";for(let n in e){let c=e[n];"@"==n[0]?"i"==n[1]?r=n+" "+c+";":l+="f"==n[1]?o$2(c,n):n+"{"+o$2(c,"k"==n[1]?"":t)+"}":"object"==typeof c?l+=o$2(c,t?t.replace(/([^,])+/g,e=>n.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+" "+t:t)):n):null!=c&&(n=/^--/.test(n)?n:n.replace(/[A-Z]/g,"-$&").toLowerCase(),a+=o$2.p?o$2.p(n,c):n+":"+c+";");}return r+(t&&a?t+"{"+a+"}":a)+l},c$1={},s$2=e=>{if("object"==typeof e){let t="";for(let r in e)t+=r+s$2(e[r]);return t}return e},i$2=(e,t,r,i,p)=>{let u=s$2(e),d=c$1[u]||(c$1[u]=(e=>{let t=0,r=11;for(;t<e.length;)r=101*r+e.charCodeAt(t++)>>>0;return "go"+r})(u));if(!c$1[d]){let t=u!==e?e:(e=>{let t,r,o=[{}];for(;t=l$1.exec(e.replace(a,""));)t[4]?o.shift():t[3]?(r=t[3].replace(n$1," ").trim(),o.unshift(o[0][r]=o[0][r]||{})):o[0][t[1]]=t[2].replace(n$1," ").trim();return o[0]})(e);c$1[d]=o$2(p?{["@keyframes "+d]:t}:t,r?"":"."+d);}let f=r&&c$1.g?c$1.g:null;return r&&(c$1.g=c$1[d]),((e,t,r,l)=>{l?t.data=t.data.replace(l,e):-1===t.data.indexOf(e)&&(t.data=r?e+t.data:t.data+e);})(c$1[d],t,i,f),d},p=(e,t,r)=>e.reduce((e,l,a)=>{let n=t[a];if(n&&n.call){let e=n(r),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;n=t?"."+t:e&&"object"==typeof e?e.props?"":o$2(e,""):false===e?"":e;}return e+l+(null==n?"":n)},"");function u(e){let r=this||{},l=e.call?e(r.p):e;return i$2(l.unshift?l.raw?p(l,[].slice.call(arguments,1),r.p):l.reduce((e,t)=>Object.assign(e,t&&t.call?t(r.p):t),{}):l,t(r.target),r.g,r.o,r.k)}u.bind({g:1});u.bind({k:1});
 
 function _defineProperties$1(target, props) {
   for (var i = 0; i < props.length; i++) {
@@ -26618,6 +26634,30 @@ const DartcomInitializeProvider = ({ children, configOptions }) => {
     return jsxRuntime.jsx(React__namespace.Fragment, { children: children });
 };
 
+const MapProvider = ({ children }) => {
+    const [isReady, setIsReady] = React__namespace.useState(false);
+    const init = async () => {
+        try {
+            await Promise.resolve().then(function () { return tangram_min; });
+            await Promise.resolve().then(function () { return leaflet_rotatedMarker; });
+            await Promise.resolve().then(function () { return leaflet_polylineoffset$1; });
+            await Promise.resolve().then(function () { return index$1; });
+            await Promise.resolve().then(function () { return index; });
+            await Promise.resolve().then(function () { return leafletArrows$1; });
+            setIsReady(true);
+        }
+        catch {
+            setIsReady(false);
+        }
+    };
+    React__namespace.useEffect(() => {
+        init();
+    }, []);
+    if (!isReady)
+        return null;
+    return jsxRuntime.jsx(React__namespace.Fragment, { children: children });
+};
+
 const queryClient = new QueryClient();
 const QueryProvider = (props) => (jsxRuntime.jsx(QueryClientProvider, { ...props, client: queryClient }));
 
@@ -26627,7 +26667,7 @@ const DartcomThemeProvider = ({ children, themeOptions }) => {
 };
 
 const DartcomProviders = ({ children, configOptions, themeOptions }) => {
-    return (jsxRuntime.jsx(SnackbarProvider, { children: jsxRuntime.jsx(QueryProvider, { children: jsxRuntime.jsx(DartcomMobxProvider, { children: jsxRuntime.jsx(DartcomThemeProvider, { themeOptions: themeOptions, children: jsxRuntime.jsx(Provider, { children: jsxRuntime.jsx(DartcomInitializeProvider, { configOptions: configOptions, children: children }) }) }) }) }) }));
+    return (jsxRuntime.jsx(SnackbarProvider, { children: jsxRuntime.jsx(QueryProvider, { children: jsxRuntime.jsx(DartcomMobxProvider, { children: jsxRuntime.jsx(DartcomThemeProvider, { themeOptions: themeOptions, children: jsxRuntime.jsx(Provider, { children: jsxRuntime.jsx(MapProvider, { children: jsxRuntime.jsx(DartcomInitializeProvider, { configOptions: configOptions, children: children }) }) }) }) }) }) }));
 };
 
 const useShowSnackbar = () => {
@@ -39279,7 +39319,7 @@ const tile_size = 256;
 const sourceUrl = {
     [exports.TangramSourceNames.TILE]: `${"https://dalganmap.ru/api"}/tiles/get_tile/{z}/{x}/{y}.mvt`,
     [exports.TangramSourceNames.NATURE_TILE]: `${"https://dalganmap.ru/api"}/tiles/get_nature_tile/{z}/{x}/{y}.mvt`,
-    [exports.TangramSourceNames.MSK]: `${"http://89.108.118.23:3070"}/tiles/get_tile/{z}/{x}/{y}.mvt`,
+    [exports.TangramSourceNames.MSK]: `${"$VITE_API_HOST:$VITE_API_PORT"}/tiles/get_tile/{z}/{x}/{y}.mvt`,
 };
 
 var data = { global:{ links:{ getIsConstruction:"function (feature) {\n  const { construction } = feature;\n\n  return construction;\n}\n",
@@ -43500,13 +43540,6 @@ const useGetLeafletLayer = ({ eventHandlers, defaultLayers, }) => {
                 });
                 leafletLayer.on('load', ({ sourceTarget }) => {
                     const mapInstance = sourceTarget._map;
-                    loggerService.log({
-                        message: 'leafletLayer onLoad',
-                        context: 'useGetLeafletLayer',
-                        meta: {
-                            sourceTarget,
-                        },
-                    });
                     leafletLayer.setSelectionEvents({
                         click: ({ feature, leaflet_event }) => {
                             if (feature) {
@@ -43746,6 +43779,12 @@ const useGetLeafletLayer = ({ eventHandlers, defaultLayers, }) => {
     };
 };
 
+function extendContext(source, extra) {
+    return Object.freeze({
+        ...source,
+        ...extra
+    });
+}
 const LeafletContext = React.createContext(null);
 function useLeafletContext() {
     const context = React.use(LeafletContext);
@@ -43755,21 +43794,452 @@ function useLeafletContext() {
     return context;
 }
 
+function createContainerComponent(useElement) {
+    function ContainerComponent(props, forwardedRef) {
+        const { instance, context } = useElement(props).current;
+        React.useImperativeHandle(forwardedRef, ()=>instance);
+        const { children } = props;
+        return children == null ? null : /*#__PURE__*/ React.createElement(LeafletContext, {
+            value: context
+        }, children);
+    }
+    return /*#__PURE__*/ React.forwardRef(ContainerComponent);
+}
+
+function createControlHook(useElement) {
+    return function useLeafletControl(props) {
+        const context = useLeafletContext();
+        const elementRef = useElement(props, context);
+        const { instance } = elementRef.current;
+        const positionRef = React.useRef(props.position);
+        const { position } = props;
+        React.useEffect(function addControl() {
+            instance.addTo(context.map);
+            return function removeControl() {
+                instance.remove();
+            };
+        }, [
+            context.map,
+            instance
+        ]);
+        React.useEffect(function updateControl() {
+            if (position != null && position !== positionRef.current) {
+                instance.setPosition(position);
+                positionRef.current = position;
+            }
+        }, [
+            instance,
+            position
+        ]);
+        return elementRef;
+    };
+}
+
+function createElementObject(instance, context, container) {
+    return Object.freeze({
+        instance,
+        context,
+        container
+    });
+}
+function createElementHook(createElement, updateElement) {
+    if (updateElement == null) {
+        return function useImmutableLeafletElement(props, context) {
+            const elementRef = React.useRef(undefined);
+            if (!elementRef.current) elementRef.current = createElement(props, context);
+            return elementRef;
+        };
+    }
+    return function useMutableLeafletElement(props, context) {
+        const elementRef = React.useRef(undefined);
+        if (!elementRef.current) elementRef.current = createElement(props, context);
+        const propsRef = React.useRef(props);
+        const { instance } = elementRef.current;
+        React.useEffect(function updateElementProps() {
+            if (propsRef.current !== props) {
+                updateElement(instance, props, propsRef.current);
+                propsRef.current = props;
+            }
+        }, [
+            instance,
+            props,
+            updateElement
+        ]);
+        return elementRef;
+    };
+}
+
 function useMap() {
     return useLeafletContext().map;
 }
 
+const useLayersControlElement = createElementHook(function createLayersControl({ children: _c, ...options }, ctx) {
+    const control = new leafletSrcExports.Control.Layers(undefined, undefined, options);
+    return createElementObject(control, extendContext(ctx, {
+        layersControl: control
+    }));
+}, function updateLayersControl(control, props, prevProps) {
+    if (props.collapsed !== prevProps.collapsed) {
+        if (props.collapsed === true) {
+            control.collapse();
+        } else {
+            control.expand();
+        }
+    }
+});
+const useLayersControl = createControlHook(useLayersControlElement);
+// @ts-ignore
+const LayersControl = createContainerComponent(useLayersControl);
+function createControlledLayer(addLayerToControl) {
+    return function ControlledLayer(props) {
+        const parentContext = useLeafletContext();
+        const propsRef = React.useRef(props);
+        const [layer, setLayer] = React.useState(null);
+        const { layersControl, map } = parentContext;
+        const addLayer = React.useCallback((layerToAdd)=>{
+            if (layersControl != null) {
+                if (propsRef.current.checked) {
+                    map.addLayer(layerToAdd);
+                }
+                addLayerToControl(layersControl, layerToAdd, propsRef.current.name);
+                setLayer(layerToAdd);
+            }
+        }, [
+            addLayerToControl,
+            layersControl,
+            map
+        ]);
+        const removeLayer = React.useCallback((layerToRemove)=>{
+            layersControl?.removeLayer(layerToRemove);
+            setLayer(null);
+        }, [
+            layersControl
+        ]);
+        const context = React.useMemo(()=>{
+            return extendContext(parentContext, {
+                layerContainer: {
+                    addLayer,
+                    removeLayer
+                }
+            });
+        }, [
+            parentContext,
+            addLayer,
+            removeLayer
+        ]);
+        React.useEffect(()=>{
+            if (layer !== null && propsRef.current !== props) {
+                if (props.checked === true && (propsRef.current.checked == null || propsRef.current.checked === false)) {
+                    map.addLayer(layer);
+                } else if (propsRef.current.checked === true && (props.checked == null || props.checked === false)) {
+                    map.removeLayer(layer);
+                }
+                propsRef.current = props;
+            }
+        });
+        return props.children ? /*#__PURE__*/ React.createElement(LeafletContext, {
+            value: context
+        }, props.children) : null;
+    };
+}
+LayersControl.BaseLayer = createControlledLayer(function addBaseLayer(layersControl, layer, name) {
+    layersControl.addBaseLayer(layer, name);
+});
+LayersControl.Overlay = createControlledLayer(function addOverlay(layersControl, layer, name) {
+    layersControl.addOverlay(layer, name);
+});
+
+class TangramLayer {
+    props;
+    constructor(props) {
+        this.props = props;
+        this._initLayer();
+    }
+    _initLayer() {
+        if (GlobalConfig.instance.isValidApiKey) {
+            const layer = this._createLayer();
+            if (layer) {
+                const { scene } = layer;
+                scene.subscribe({
+                    load: ({ config }) => {
+                        this.config = config;
+                        this.isReady = true;
+                        this._init();
+                    },
+                });
+                this.layer = layer;
+                this.props.onCreate?.({ layer });
+                this._addHandlers(layer);
+            }
+        }
+    }
+    _createLayer() {
+        if (window.Tangram) {
+            const leafletLayer = window.Tangram.leafletLayer({
+                scene: data,
+            });
+            return leafletLayer;
+        }
+    }
+    _addHandlers(layer) {
+        layer.addEventListener('load', ({ sourceTarget }) => {
+            this.props.onLoad?.({ layer });
+            const mapInstance = sourceTarget._map;
+            layer.setSelectionEvents({
+                click: ({ feature, leaflet_event }) => {
+                    if (feature) {
+                        const { source_layer, properties } = feature;
+                        this.props.eventHandlers?.[source_layer]?.click?.({
+                            leaflet_event,
+                            properties,
+                        });
+                    }
+                },
+                hover: ({ feature, leaflet_event }) => {
+                    const mapContainer = mapInstance.getContainer();
+                    if (feature) {
+                        const { source_layer, properties } = feature;
+                        mapContainer.style.cursor = 'pointer';
+                        this.props.eventHandlers?.[source_layer]?.hover?.({
+                            leaflet_event,
+                            properties,
+                        });
+                    }
+                    else {
+                        mapContainer.style.cursor = 'default';
+                    }
+                },
+            });
+        }, this);
+        layer.addEventListener('add', () => {
+            this.props.onAdd?.({ layer });
+        }, this);
+        layer.addEventListener('remove', () => {
+            this.props.onRemove?.({ layer });
+        }, this);
+    }
+    destroy() {
+        if (this.layer) {
+            this.props.onDestroy?.({
+                layer: this.layer,
+            });
+            this.layer.clearAllEventListeners();
+            this.layer.remove();
+        }
+        this.layer = null;
+    }
+    _init() {
+        this.addStyle({
+            name: 'zebra_crossing',
+            style: {
+                base: 'polygons',
+                lighting: false,
+                shaders: {
+                    attributes: {
+                        a_angle: {
+                            type: 'float',
+                            default: 0.0,
+                        },
+                    },
+                    uniforms: {
+                        u_stripe_width: 1,
+                    },
+                    blocks: {
+                        filter: `
+              vec3 pos = worldPosition().xyz;
+
+              float ang = radians(a_angle);
+
+              vec2 dir = vec2(sin(ang), cos(ang));
+
+              float positionAlongLine = dot(pos.xy, dir);
+
+              float stripe = step(1.0, mod(positionAlongLine / u_stripe_width, 2.0));
+
+              color.rgb = mix(vec3(1.0, 1.0, 1.0), vec3(1.0, 0.8, 0.0), stripe);
+              
+              color.a = 1.0;
+            `,
+                    },
+                },
+            },
+        });
+        const layers = this.props.defaultLayers ?? [];
+        layers.forEach((layer) => {
+            this.addLayer(layer);
+        });
+        Object.values(exports.TangramSourceNames).forEach((source) => {
+            this.addSource(source);
+        });
+    }
+    _layer = null;
+    get layer() {
+        return this._layer;
+    }
+    set layer(value) {
+        this._layer = value;
+    }
+    _config = null;
+    get config() {
+        return this._config;
+    }
+    set config(value) {
+        this._config = value;
+    }
+    _isReady = false;
+    get isReady() {
+        return this._isReady;
+    }
+    set isReady(value) {
+        this._isReady = value;
+    }
+    get scene() {
+        if (this.layer === null)
+            return null;
+        const { scene } = this.layer;
+        return scene;
+    }
+    addStyle({ name, style }) {
+        if (this.config && this.scene) {
+            this.config.styles[name] = structuredClone(style);
+            this.scene.updateConfig({ rebuild: true });
+        }
+    }
+    addSource(sourceName) {
+        if (this.config && this.scene) {
+            const url = sourceUrl[sourceName];
+            this.config.sources[sourceName] = {
+                tile_size,
+                url,
+                type: 'MVT',
+            };
+            this.scene.updateConfig({ rebuild: true });
+        }
+    }
+    deleteSource(sourceName) {
+        if (this.config && this.scene) {
+            delete this.config.sources[sourceName];
+            this.scene.updateConfig({ rebuild: true });
+        }
+    }
+    getSource(sourceName) {
+        let source = null;
+        if (this.config) {
+            source = structuredClone(this.config.sources[sourceName]);
+        }
+        return source;
+    }
+    updateSource(sourceName, newUrl) {
+        if (this.config && this.scene) {
+            this.config.sources[sourceName].url = newUrl;
+            this.scene.updateConfig({ rebuild: true });
+        }
+    }
+    reloadSource(sourceName) {
+        this.deleteSource(sourceName);
+        this.addSource(sourceName);
+    }
+    addLayer(layer) {
+        if (this.config && this.scene) {
+            const order = this.getLayers().length + 1;
+            const validLayer = getValidLayer({
+                layer,
+                order,
+                eventHandlers: this.props.eventHandlers,
+            });
+            const layerName = getLayerName(validLayer);
+            const { sublayers, draw, textures } = validLayer;
+            if (draw) {
+                const { styles = {} } = draw;
+                if (styles) {
+                    validLayer.draw = {
+                        ...structuredClone(validLayer.draw),
+                        ...structuredClone(styles),
+                    };
+                }
+            }
+            this.config.layers[layerName] = {
+                ...structuredClone(validLayer),
+                ...structuredClone(sublayers),
+            };
+            this.config.textures = {
+                ...structuredClone(this.config.textures),
+                ...structuredClone(textures),
+            };
+            this.scene.updateConfig({ rebuild: true });
+        }
+    }
+    deleteLayers() {
+        if (this.config) {
+            const { layers } = this.config;
+            Object.values(layers).forEach((layer) => {
+                this.deleteLayer(layer);
+            });
+        }
+    }
+    deleteLayer(layer) {
+        const layerName = getLayerName(layer);
+        if (this.config && this.scene) {
+            delete this.config.layers[layerName];
+            this.scene.updateConfig({ rebuild: true });
+        }
+    }
+    getLayers() {
+        const layers = [];
+        if (this.config) {
+            layers.push(...Object.keys(this.config.layers));
+        }
+        return layers;
+    }
+    getLayerVisibility(layer) {
+        let layerVisibility = true;
+        const layerName = getLayerName(layer);
+        if (this.config) {
+            const { visible = true } = this.config.layers[layerName];
+            layerVisibility = visible;
+        }
+        return layerVisibility;
+    }
+    toggleLayerVisibility({ layer, visible, }) {
+        const layerName = getLayerName(layer);
+        if (this.config && this.scene) {
+            this.config.layers[layerName].visible = visible;
+            this.scene.updateConfig({ rebuild: true });
+        }
+    }
+}
+
 const LeafletLayer = ({ layers }) => {
+    const controlRef = React__namespace.useRef(null);
     const map = useMap();
-    const { layer } = useGetLeafletLayer({
-        defaultLayers: layers,
-    });
     React__namespace.useEffect(() => {
-        if (layer) {
-            map.addLayer(layer);
+        const { current: layersControl } = controlRef;
+        const googleSatelliteLayer = leafletSrcExports.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
+            minZoom: 2,
+            maxZoom: 25,
+            maxNativeZoom: 19,
+            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
+        });
+        if (layersControl) {
+            layersControl.addBaseLayer(googleSatelliteLayer, 'Google Satellite');
         }
-    }, [layer]);
-    return null;
+        new TangramLayer({
+            defaultLayers: layers,
+            onCreate: ({ layer }) => {
+                if (layersControl) {
+                    layersControl.addBaseLayer(layer, 'Dartcom');
+                    layer.addTo(map);
+                }
+            },
+            onDestroy: ({ layer }) => {
+                if (layersControl) {
+                    layersControl.removeLayer(layer);
+                    map.removeLayer(layer);
+                }
+            },
+        });
+    }, []);
+    return jsxRuntime.jsx(LayersControl, { ref: controlRef, position: "bottomleft" });
 };
 
 const modalStyle = {
@@ -43874,10 +44344,10 @@ function requirePapaparse_min () {
 var papaparse_minExports = requirePapaparse_min();
 var e = /*@__PURE__*/getDefaultExportFromCjs(papaparse_minExports);
 
-"function"==typeof SuppressedError&&SuppressedError;function P(n,t){return e.parse(n,t)}function x$1(n,t){e.parse(n,Object.assign({},{download:true},t));}function O(n,t){return void 0===t&&(t={}),e.unparse(n,t)}function S(){return {readString:P,readRemoteFile:x$1,jsonToCSV:O}}e.BAD_DELIMITERS;e.RECORD_SEP;e.UNIT_SEP;e.WORKERS_SUPPORTED;e.LocalChunkSize;e.DefaultDelimiter;
+"function"==typeof SuppressedError&&SuppressedError;function P(n,t){return e.parse(n,t)}function x$1(n,t){e.parse(n,Object.assign({},{download:true},t));}function O(n,t){return void 0===t&&(t={}),e.unparse(n,t)}function S$1(){return {readString:P,readRemoteFile:x$1,jsonToCSV:O}}e.BAD_DELIMITERS;e.RECORD_SEP;e.UNIT_SEP;e.WORKERS_SUPPORTED;e.LocalChunkSize;e.DefaultDelimiter;
 
 const CSVUploader = ({ onDataParsed, onError, delimiter = ',', header = true, dynamicTyping = true, skipEmptyLines = true, worker = false, }) => {
-    const { readString } = S();
+    const { readString } = S$1();
     const [loading, setLoading] = React__namespace.useState(false);
     const [error, setError] = React__namespace.useState(null);
     return (jsxRuntime.jsx(UploadButton, { accept: ".csv", loading: loading, error: error, onFilesLoad: ({ files }) => {
@@ -46329,7 +46799,7 @@ const schema = create$3().shape({
     password: create$6().required(),
 });
 
-const r=(t,r,o)=>{if(t&&"reportValidity"in t){const s=get(o,r);t.setCustomValidity(s&&s.message||""),t.reportValidity();}},o$1=(e,t)=>{for(const o in t.fields){const s=t.fields[o];s&&s.ref&&"reportValidity"in s.ref?r(s.ref,o,e):s&&s.refs&&s.refs.forEach(t=>r(t,o,e));}},s=(r,s)=>{s.shouldUseNativeValidation&&o$1(r,s);const n={};for(const o in r){const f=get(s.fields,o),c=Object.assign(r[o]||{},{ref:f&&f.ref});if(i(s.names||Object.keys(r),o)){const r=Object.assign({},get(n,o));set(r,"root",c),set(n,o,r);}else set(n,o,c);}return n},i=(e,t)=>{const r=n(t);return e.some(e=>n(e).match(`^${r}\\.\\d+`))};function n(e){return e.replace(/\]|\[/g,"")}
+const r$1=(t,r,o)=>{if(t&&"reportValidity"in t){const s=get(o,r);t.setCustomValidity(s&&s.message||""),t.reportValidity();}},o$1=(e,t)=>{for(const o in t.fields){const s=t.fields[o];s&&s.ref&&"reportValidity"in s.ref?r$1(s.ref,o,e):s&&s.refs&&s.refs.forEach(t=>r$1(t,o,e));}},s=(r,s)=>{s.shouldUseNativeValidation&&o$1(r,s);const n={};for(const o in r){const f=get(s.fields,o),c=Object.assign(r[o]||{},{ref:f&&f.ref});if(i(s.names||Object.keys(r),o)){const r=Object.assign({},get(n,o));set(r,"root",c),set(n,o,r);}else set(n,o,c);}return n},i=(e,t)=>{const r=n(t);return e.some(e=>n(e).match(`^${r}\\.\\d+`))};function n(e){return e.replace(/\]|\[/g,"")}
 
 function o(o,n,s$1){return void 0===s$1&&(s$1={}),function(a,i,c){try{return Promise.resolve(function(t,r){try{var u=(null!=n&&n.context&&"development"===process.env.NODE_ENV&&console.warn("You should not used the yup options context. Please, use the 'useForm' context object instead"),Promise.resolve(o["sync"===s$1.mode?"validateSync":"validate"](a,Object.assign({abortEarly:!1},n,{context:i}))).then(function(t){return c.shouldUseNativeValidation&&o$1({},c),{values:s$1.raw?Object.assign({},a):t,errors:{}}}));}catch(e){return r(e)}return u&&u.then?u.then(void 0,r):u}(0,function(e){if(!e.inner)throw e;return {values:{},errors:s((o=e,n=!c.shouldUseNativeValidation&&"all"===c.criteriaMode,(o.inner||[]).reduce(function(e,t){if(e[t.path]||(e[t.path]={message:t.message,type:t.type}),n){var o=e[t.path].types,s=o&&o[t.type];e[t.path]=appendErrors(t.path,n,e,t.type,s?[].concat(s,t.message):t.message);}return e},{})),c)};var o,n;}))}catch(e){return Promise.reject(e)}}}
 
@@ -46428,10 +46898,1036 @@ try {
 	}
 } catch(e) {}
 
+var Tangram$1 = Tangram;
+
 var tangram_min = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: Tangram$1
+});
+
+(function() {
+    // save these original methods before they are overwritten
+    var proto_initIcon = L.Marker.prototype._initIcon;
+    var proto_setPos = L.Marker.prototype._setPos;
+
+    var oldIE = (L.DomUtil.TRANSFORM === 'msTransform');
+
+    L.Marker.addInitHook(function () {
+        var iconOptions = this.options.icon && this.options.icon.options;
+        var iconAnchor = iconOptions && this.options.icon.options.iconAnchor;
+        if (iconAnchor) {
+            iconAnchor = (iconAnchor[0] + 'px ' + iconAnchor[1] + 'px');
+        }
+        this.options.rotationOrigin = this.options.rotationOrigin || iconAnchor || 'center bottom' ;
+        this.options.rotationAngle = this.options.rotationAngle || 0;
+
+        // Ensure marker keeps rotated during dragging
+        this.on('drag', function(e) { e.target._applyRotation(); });
+    });
+
+    L.Marker.include({
+        _initIcon: function() {
+            proto_initIcon.call(this);
+        },
+
+        _setPos: function (pos) {
+            proto_setPos.call(this, pos);
+            this._applyRotation();
+        },
+
+        _applyRotation: function () {
+            if(this.options.rotationAngle) {
+                this._icon.style[L.DomUtil.TRANSFORM+'Origin'] = this.options.rotationOrigin;
+
+                if(oldIE) {
+                    // for IE 9, use the 2D rotation
+                    this._icon.style[L.DomUtil.TRANSFORM] = 'rotate(' + this.options.rotationAngle + 'deg)';
+                } else {
+                    // for modern browsers, prefer the 3D accelerated version
+                    this._icon.style[L.DomUtil.TRANSFORM] += ' rotateZ(' + this.options.rotationAngle + 'deg)';
+                }
+            }
+        },
+
+        setRotationAngle: function(angle) {
+            this.options.rotationAngle = angle;
+            this.update();
+            return this;
+        },
+
+        setRotationOrigin: function(origin) {
+            this.options.rotationOrigin = origin;
+            this.update();
+            return this;
+        }
+    });
+})();
+
+var leaflet_rotatedMarker = /*#__PURE__*/Object.freeze({
     __proto__: null
 });
 
+var leaflet_polylineoffset$2 = {exports: {}};
+
+var hasRequiredLeaflet_polylineoffset;
+
+function requireLeaflet_polylineoffset () {
+	if (hasRequiredLeaflet_polylineoffset) return leaflet_polylineoffset$2.exports;
+	hasRequiredLeaflet_polylineoffset = 1;
+	(function (module, exports$1) {
+		(function (factory, window) {
+		    {
+		        module.exports = factory(requireLeafletSrc());
+		    }
+		    if (typeof window !== 'undefined' && window.L) {
+		        window.L.PolylineOffset = factory(L);
+		    }
+		}(function (L) {
+
+		function forEachPair(list, callback) {
+		    if (!list || list.length < 1) { return; }
+		    for (var i = 1, l = list.length; i < l; i++) {
+		        callback(list[i-1], list[i]);
+		    }
+		}
+
+		/**
+		Find the coefficients (a,b) of a line of equation y = a.x + b,
+		or the constant x for vertical lines
+		Return null if there's no equation possible
+		*/
+		function lineEquation(pt1, pt2) {
+		    if (pt1.x === pt2.x) {
+		        return pt1.y === pt2.y ? null : { x: pt1.x };
+		    }
+
+		    var a = (pt2.y - pt1.y) / (pt2.x - pt1.x);
+		    return {
+		        a: a,
+		        b: pt1.y - a * pt1.x,
+		    };
+		}
+
+		/**
+		Return the intersection point of two lines defined by two points each
+		Return null when there's no unique intersection
+		*/
+		function intersection(l1a, l1b, l2a, l2b) {
+		    var line1 = lineEquation(l1a, l1b);
+		    var line2 = lineEquation(l2a, l2b);
+
+		    if (line1 === null || line2 === null) {
+		        return null;
+		    }
+
+		    if (line1.hasOwnProperty('x')) {
+		        return line2.hasOwnProperty('x')
+		            ? null
+		            : {
+		                x: line1.x,
+		                y: line2.a * line1.x + line2.b,
+		            };
+		    }
+		    if (line2.hasOwnProperty('x')) {
+		        return {
+		            x: line2.x,
+		            y: line1.a * line2.x + line1.b,
+		        };
+		    }
+
+		    if (line1.a === line2.a) {
+		        return null;
+		    }
+
+		    var x = (line2.b - line1.b) / (line1.a - line2.a);
+		    return {
+		        x: x,
+		        y: line1.a * x + line1.b,
+		    };
+		}
+
+		function translatePoint(pt, dist, heading) {
+		    return {
+		        x: pt.x + dist * Math.cos(heading),
+		        y: pt.y + dist * Math.sin(heading),
+		    };
+		}
+
+		var PolylineOffset = {
+		    offsetPointLine: function(points, distance) {
+		        var offsetSegments = [];
+
+		        forEachPair(points, L.bind(function(a, b) {
+		            if (a.x === b.x && a.y === b.y) { return; }
+
+		            // angles in (-PI, PI]
+		            var segmentAngle = Math.atan2(a.y - b.y, a.x - b.x);
+		            var offsetAngle = segmentAngle - Math.PI/2;
+
+		            offsetSegments.push({
+		                offsetAngle: offsetAngle,
+		                original: [a, b],
+		                offset: [
+		                    translatePoint(a, distance, offsetAngle),
+		                    translatePoint(b, distance, offsetAngle)
+		                ]
+		            });
+		        }, this));
+
+		        return offsetSegments;
+		    },
+
+		    offsetPoints: function(pts, offset) {
+		        var offsetSegments = this.offsetPointLine(pts, offset);
+		        return this.joinLineSegments(offsetSegments, offset);
+		    },
+
+		    /**
+		    Join 2 line segments defined by 2 points each with a circular arc
+		    */
+		    joinSegments: function(s1, s2, offset) {
+		        // TODO: different join styles
+		        return this.circularArc(s1, s2, offset)
+		            .filter(function(x) { return x; })
+		    },
+
+		    joinLineSegments: function(segments, offset) {
+		        var joinedPoints = [];
+		        var first = segments[0];
+		        var last = segments[segments.length - 1];
+
+		        if (first && last) {
+		            joinedPoints.push(first.offset[0]);
+		            forEachPair(segments, L.bind(function(s1, s2) {
+		                joinedPoints = joinedPoints.concat(this.joinSegments(s1, s2, offset));
+		            }, this));
+		            joinedPoints.push(last.offset[1]);
+		        }
+
+		        return joinedPoints;
+		    },
+
+		    segmentAsVector: function(s) {
+		        return {
+		            x: s[1].x - s[0].x,
+		            y: s[1].y - s[0].y,
+		        };
+		    },
+
+		    getSignedAngle: function(s1, s2) {
+		        const a = this.segmentAsVector(s1);
+		        const b = this.segmentAsVector(s2);
+		        return Math.atan2(a.x * b.y - a.y * b.x, a.x * b.x + a.y * b.y);
+		    },
+
+		    /**
+		    Interpolates points between two offset segments in a circular form
+		    */
+		    circularArc: function(s1, s2, distance) {
+		        // if the segments are the same angle,
+		        // there should be a single join point
+		        if (s1.offsetAngle === s2.offsetAngle) {
+		            return [s1.offset[1]];
+		        }
+
+		        const signedAngle = this.getSignedAngle(s1.offset, s2.offset);
+		        // for inner angles, just find the offset segments intersection
+		        if ((signedAngle * distance > 0) &&
+		            (signedAngle * this.getSignedAngle(s1.offset, [s1.offset[0], s2.offset[1]]) > 0)) {
+		            return [intersection(s1.offset[0], s1.offset[1], s2.offset[0], s2.offset[1])];
+		        }
+
+		        // draws a circular arc with R = offset distance, C = original meeting point
+		        var points = [];
+		        var center = s1.original[1];
+		        // ensure angles go in the anti-clockwise direction
+		        var rightOffset = distance > 0;
+		        var startAngle = rightOffset ? s2.offsetAngle : s1.offsetAngle;
+		        var endAngle = rightOffset ? s1.offsetAngle : s2.offsetAngle;
+		        // and that the end angle is bigger than the start angle
+		        if (endAngle < startAngle) {
+		            endAngle += Math.PI * 2;
+		        }
+		        var step = Math.PI / 8;
+		        for (var alpha = startAngle; alpha < endAngle; alpha += step) {
+		            points.push(translatePoint(center, distance, alpha));
+		        }
+		        points.push(translatePoint(center, distance, endAngle));
+
+		        return rightOffset ? points.reverse() : points;
+		    }
+		};
+
+		// Modify the L.Polyline class by overwriting the projection function
+		L.Polyline.include({
+		    _projectLatlngs: function (latlngs, result, projectedBounds) {
+		        var isFlat = latlngs.length > 0 && latlngs[0] instanceof L.LatLng;
+
+		        if (isFlat) {
+		            var ring = latlngs.map(L.bind(function(ll) {
+		                var point = this._map.latLngToLayerPoint(ll);
+		                if (projectedBounds) {
+		                    projectedBounds.extend(point);
+		                }
+		                return point;
+		            }, this));
+
+		            // Offset management hack ---
+		            if (this.options.offset) {
+		                ring = L.PolylineOffset.offsetPoints(ring, this.options.offset);
+		            }
+		            // Offset management hack END ---
+
+		            result.push(ring.map(function (xy) {
+		                    return L.point(xy.x, xy.y);
+		                }));
+		        } else {
+		            latlngs.forEach(L.bind(function(ll) {
+		                this._projectLatlngs(ll, result, projectedBounds);
+		            }, this));
+		        }
+		    }
+		});
+
+		L.Polyline.include({
+		    setOffset: function(offset) {
+		        this.options.offset = offset;
+		        this.redraw();
+		        return this;
+		    }
+		});
+
+		return PolylineOffset;
+
+		}, window)); 
+	} (leaflet_polylineoffset$2));
+	return leaflet_polylineoffset$2.exports;
+}
+
+var leaflet_polylineoffsetExports = requireLeaflet_polylineoffset();
+var leaflet_polylineoffset = /*@__PURE__*/getDefaultExportFromCjs(leaflet_polylineoffsetExports);
+
+var leaflet_polylineoffset$1 = /*#__PURE__*/_mergeNamespaces({
+    __proto__: null,
+    default: leaflet_polylineoffset
+}, [leaflet_polylineoffsetExports]);
+
+/**
+ * L.Map.SelectArea - Area selection tool for leaflet
+ *
+ * @author Alexander Milevski <info@w8r.name>
+ * @see https://github.com/w8r/leaflet-area-select
+ * @license MIT
+ * @preserve
+ */
+var r = function() {
+  return true;
+};
+s$3.Map.SelectArea = s$3.Map.BoxZoom.extend({
+  statics: {
+    /**
+     * @static
+     * @type {String}
+     */
+    SELECT_AREA_SELECTED: "selectarea:selected",
+    /**
+     * @static
+     * @type {String}
+     */
+    SELECT_AREA_START: "selectarea:start",
+    /**
+     * @static
+     * @type {String}
+     */
+    SELECT_AREA_TOGGLED: "selectarea:toggled"
+  },
+  options: {
+    shiftKey: false,
+    ctrlKey: true,
+    validate: r,
+    autoDisable: false,
+    cursor: "crosshair"
+  },
+  /**
+   * @param  {L.Map} map
+   * @constructor
+   */
+  initialize: function(t, e) {
+    s$3.Util.setOptions(this, e || {}), s$3.Map.BoxZoom.prototype.initialize.call(this, t), this._validate = null, this._moved = false, this._autoDisable = !this.options.ctrlKey && this.options.autoDisable, this._lastLayerPoint = null, this._beforeCursor = null, this.setValidate(this.options.validate), this.setAutoDisable(this.options.autoDisable);
+  },
+  /**
+   * @param  {Function=} validate
+   * @return {SelectArea}
+   */
+  setValidate: function(t) {
+    var e = this;
+    return typeof t != "function" && (t = r), this._validate = function(i) {
+      return t.call(e, i);
+    }, this;
+  },
+  /**
+   * @param {Boolean} autoDisable
+   */
+  setAutoDisable: function(t) {
+    this._autoDisable = !!t;
+  },
+  /**
+   * @param {Boolean} on
+   */
+  setControlKey: function(t) {
+    var e = this._enabled;
+    e && this.disable(), this.options.ctrlKey = !!t, t && (this.options.shiftKey = false), e && this.enable();
+  },
+  /**
+   * @param {Boolean} on
+   */
+  setShiftKey: function(t) {
+    var e = this._enabled;
+    e && this.disable(), this.options.shiftKey = !!t, t && (this.options.ctrlKey = false), e && this.enable();
+  },
+  /**
+   * Disable dragging or zoombox
+   * @param {Function=} validate
+   * @param {Boolean=}  autoDisable
+   */
+  enable: function(t, e) {
+    this.options.shiftKey ? this._map.boxZoom && this._map.boxZoom.disable() : this.options.ctrlKey || this._map.dragging.disable(), s$3.Map.BoxZoom.prototype.enable.call(this), this.options.ctrlKey || this._setCursor(), t && this.setValidate(t), this.setAutoDisable(e), this._map.fire(s$3.Map.SelectArea.SELECT_AREA_TOGGLED);
+  },
+  /**
+   * Re-enable box zoom or dragging
+   */
+  disable: function() {
+    s$3.Map.BoxZoom.prototype.disable.call(this), this.options.ctrlKey || this._restoreCursor(), this.options.shiftKey ? this._map.boxZoom && this._map.boxZoom.enable() : this._map.dragging.enable(), this._map.fire(s$3.Map.SelectArea.SELECT_AREA_TOGGLED);
+  },
+  /**
+   * Also listen to ESC to cancel interaction
+   * @override
+   */
+  addHooks: function() {
+    s$3.Map.BoxZoom.prototype.addHooks.call(this), s$3.DomEvent.on(document, "keyup", this._onKeyUp, this).on(document, "keydown", this._onKeyPress, this).on(document, "contextmenu", this._onMouseDown, this).on(window, "blur", this._onBlur, this), this._map.on("dragstart", this._onMouseDown, this);
+  },
+  /**
+   * @override
+   */
+  removeHooks: function() {
+    s$3.Map.BoxZoom.prototype.removeHooks.call(this), s$3.DomEvent.off(document, "keyup", this._onKeyUp, this).off(document, "keydown", this._onKeyPress, this).off(document, "contextmenu", this._onMouseDown, this).off(window, "blur", this._onBlur, this), this._map.off("dragstart", this._onMouseDown, this);
+  },
+  /**
+   * @override
+   */
+  _onMouseDown: function(t) {
+    if (this._moved = false, this._lastLayerPoint = null, this.options.shiftKey && !t.shiftKey || this.options.ctrlKey && !t.ctrlKey || t.which !== 1 && t.button !== 1)
+      return false;
+    s$3.DomEvent.stop(t);
+    var e = this._map.mouseEventToLayerPoint(t);
+    if (!this._validate(e)) return false;
+    s$3.DomUtil.disableTextSelection(), s$3.DomUtil.disableImageDrag(), this._startLayerPoint = e, s$3.DomEvent.on(document, "mousemove", this._onMouseMove, this).on(document, "mouseup", this._onMouseUp, this).on(document, "keydown", this._onKeyDown, this);
+  },
+  /**
+   * @override
+   */
+  _onMouseMove: function(t) {
+    this._moved || (this._box = s$3.DomUtil.create("div", "leaflet-zoom-box", this._pane), s$3.DomUtil.setPosition(this._box, this._startLayerPoint), this._map.fire(s$3.Map.SelectArea.SELECT_AREA_START));
+    var e = this._startLayerPoint, i = this._box, o = this._map.mouseEventToLayerPoint(t), a = o.subtract(e);
+    if (this._validate(o)) {
+      this._lastLayerPoint = o;
+      var n = new s$3.Point(
+        Math.min(o.x, e.x),
+        Math.min(o.y, e.y)
+      );
+      s$3.DomUtil.setPosition(i, n), this._moved = true, i.style.width = Math.max(0, Math.abs(a.x) - 4) + "px", i.style.height = Math.max(0, Math.abs(a.y) - 4) + "px";
+    }
+  },
+  /**
+   * General on/off toggle
+   * @param  {KeyboardEvent} e
+   */
+  _onKeyUp: function(t) {
+    t.keyCode === 27 ? this._moved && this._box && this._finish() : this.options.ctrlKey && (this._restoreCursor(), this._map.dragging.enable());
+  },
+  /**
+   * Key down listener to enable on ctrl-press
+   * @param  {KeyboardEvent} e
+   */
+  _onKeyPress: function(t) {
+    this.options.ctrlKey && (t.ctrlKey || t.type === "dragstart") && this._beforeCursor === null && (this._setCursor(), this._map.dragging._draggable._onUp(t), this._map.dragging.disable());
+  },
+  /**
+   * Window blur listener to restore state
+   * @param  {Event} e
+   */
+  _onBlur: function(t) {
+    this._restoreCursor(), this._map.dragging.enable();
+  },
+  /**
+   * Set crosshair cursor
+   */
+  _setCursor: function() {
+    this._beforeCursor = this._container.style.cursor, this._container.style.cursor = this.options.cursor;
+  },
+  /**
+   * Restore status quo cursor
+   */
+  _restoreCursor: function() {
+    this._container.style.cursor = this._beforeCursor, this._beforeCursor = null;
+  },
+  /**
+   * @override
+   */
+  _onMouseUp: function(t) {
+    this._finish();
+    var e = this._map, i = this._lastLayerPoint;
+    if (!(!i || this._startLayerPoint.equals(i))) {
+      s$3.DomEvent.stop(t);
+      var o = e.layerPointToLatLng(this._startLayerPoint), a = e.layerPointToLatLng(i), n = new s$3.LatLngBounds(o, a);
+      this._autoDisable ? this.disable() : this._restoreCursor(), this._moved = false, s$3.Util.requestAnimFrame(function() {
+        e.fire(s$3.Map.SelectArea.SELECT_AREA_SELECTED, {
+          bounds: n,
+          start: o,
+          end: a
+        });
+      });
+    }
+  }
+});
+s$3.Map.mergeOptions({
+  selectArea: false
+});
+s$3.Map.addInitHook("addHandler", "selectArea", s$3.Map.SelectArea);
+const l = s$3.Map.SelectArea;
+
+var index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: l
+});
+
+leafletSrcExports.SVG.include({
+  /**
+   * Reset transform matrix
+   */
+  _resetTransformPath: function(t) {
+    t._path.setAttributeNS(null, "transform", "");
+  },
+  /**
+   * Applies matrix transformation to SVG
+   * @param {L.Path}         layer
+   * @param {Array.<Number>} matrix
+   */
+  transformPath: function(t, i) {
+    t._path.setAttributeNS(
+      null,
+      "transform",
+      "matrix(" + i.join(" ") + ")"
+    );
+  }
+});
+leafletSrcExports.SVG.include(
+  leafletSrcExports.Browser.vml ? {
+    /**
+     * Reset transform matrix
+     */
+    _resetTransformPath: function(t) {
+      t._skew && (t._skew.on = false, t._path.removeChild(t._skew), t._skew = null);
+    },
+    /**
+     * Applies matrix transformation to VML
+     * @param {L.Path}         layer
+     * @param {Array.<Number>} matrix
+     */
+    transformPath: function(t, i) {
+      let n = t._skew;
+      n || (n = leafletSrcExports.SVG.create("skew"), t._path.appendChild(n), n.style.behavior = "url(#default#VML)", t._skew = n);
+      const a = i[0].toFixed(8) + " " + i[1].toFixed(8) + " " + i[2].toFixed(8) + " " + i[3].toFixed(8) + " 0 0", r = Math.floor(i[4]).toFixed() + ", " + Math.floor(i[5]).toFixed(), s = this._path.style;
+      let e = parseFloat(s.left), o = parseFloat(s.top), _ = parseFloat(s.width), p = parseFloat(s.height);
+      isNaN(e) && (e = 0), isNaN(o) && (o = 0), (isNaN(_) || !_) && (_ = 1), (isNaN(p) || !p) && (p = 1);
+      const u = (-e / _ - 0.5).toFixed(8) + " " + (-o / p - 0.5).toFixed(8);
+      n.on = "f", n.matrix = a, n.origin = u, n.offset = r, n.on = true;
+    }
+  } : {}
+);
+function E() {
+  return true;
+}
+leafletSrcExports.Canvas.include({
+  /**
+   * Do nothing
+   * @param  {L.Path} layer
+   */
+  _resetTransformPath: function(t) {
+    this._containerCopy && (delete this._containerCopy, t._containsPoint_ && (t._containsPoint = t._containsPoint_, delete t._containsPoint_, this._requestRedraw(t)));
+  },
+  /**
+   * Algorithm outline:
+   *
+   * 1. pre-transform - clear the path out of the canvas, copy canvas state
+   * 2. at every frame:
+   *    2.1. save
+   *    2.2. redraw the canvas from saved one
+   *    2.3. transform
+   *    2.4. draw path
+   *    2.5. restore
+   * 3. Repeat
+   *
+   * @param  {L.Path}         layer
+   * @param  {Array.<Number>} matrix
+   */
+  transformPath: function(t, i) {
+    let n = this._containerCopy;
+    const a = this._ctx;
+    let r;
+    const s = leafletSrcExports.Browser.retina ? 2 : 1, e = this._bounds, o = e.getSize(), _ = e.min;
+    n || (n = this._containerCopy = document.createElement("canvas"), r = n.getContext("2d"), n.width = s * o.x, n.height = s * o.y, this._removePath(t), this._redraw(), r.translate(s * e.min.x, s * e.min.y), r.drawImage(this._container, 0, 0), this._initPath(t), t._containsPoint_ = t._containsPoint, t._containsPoint = E), a.save(), a.clearRect(_.x, _.y, o.x * s, o.y * s), a.setTransform(1, 0, 0, 1, 0, 0), a.restore(), a.save(), a.drawImage(this._containerCopy, 0, 0, o.x, o.y), a.transform.apply(a, i), this._drawing = true, t._updatePath(), this._drawing = false, a.restore();
+  }
+});
+/**
+ * Leaflet vector features drag functionality
+ * @author Alexander Milevski <info@w8r.name>
+ * @preserve
+ */
+leafletSrcExports.Path.include({
+  /**
+   * Applies matrix transformation to SVG
+   * @param {Array.<Number>?} matrix
+   */
+  _transform: function(t) {
+    return this._renderer && (t ? this._renderer.transformPath(this, t) : (this._renderer._resetTransformPath(this), this._update())), this;
+  },
+  /**
+   * Check if the feature was dragged, that'll supress the click event
+   * on mouseup. That fixes popups for example
+   *
+   * @param  {MouseEvent} e
+   */
+  _onMouseClick: function(t) {
+    this.dragging && this.dragging.moved() || this._map.dragging && this._map.dragging.moved() || this._fireMouseEvent(t);
+  }
+});
+const S = {
+  mousedown: "mouseup",
+  touchstart: "touchend",
+  pointerdown: "touchend",
+  MSPointerDown: "touchend"
+}, M = {
+  mousedown: "mousemove",
+  touchstart: "touchmove",
+  pointerdown: "touchmove",
+  MSPointerDown: "touchmove"
+};
+function k(t, i) {
+  const n = t.x - i.x, a = t.y - i.y;
+  return Math.sqrt(n * n + a * a);
+}
+leafletSrcExports.Handler.PathDrag = leafletSrcExports.Handler.extend(
+  /** @lends  L.Path.Drag.prototype */
+  {
+    statics: {
+      DRAGGING_CLS: "leaflet-path-draggable"
+    },
+    /**
+     * @param  {L.Path} path
+     * @constructor
+     */
+    initialize: function(t) {
+      this._path = t, this._matrix = null, this._startPoint = null, this._dragStartPoint = null, this._mapDraggingWasEnabled = false, this._path._dragMoved = false;
+    },
+    /**
+     * Enable dragging
+     */
+    addHooks: function() {
+      this._path.on("mousedown", this._onDragStart, this), this._path.options.className = this._path.options.className ? this._path.options.className + " " + leafletSrcExports.Handler.PathDrag.DRAGGING_CLS : leafletSrcExports.Handler.PathDrag.DRAGGING_CLS, this._path._path && leafletSrcExports.DomUtil.addClass(this._path._path, leafletSrcExports.Handler.PathDrag.DRAGGING_CLS);
+    },
+    /**
+     * Disable dragging
+     */
+    removeHooks: function() {
+      this._path.off("mousedown", this._onDragStart, this), this._path.options.className = this._path.options.className.replace(
+        new RegExp("\\s+" + leafletSrcExports.Handler.PathDrag.DRAGGING_CLS),
+        ""
+      ), this._path._path && leafletSrcExports.DomUtil.removeClass(this._path._path, leafletSrcExports.Handler.PathDrag.DRAGGING_CLS);
+    },
+    /**
+     * @return {Boolean}
+     */
+    moved: function() {
+      return this._path._dragMoved;
+    },
+    /**
+     * Start drag
+     * @param  {L.MouseEvent} evt
+     */
+    _onDragStart: function(t) {
+      const i = t.originalEvent._simulated ? "touchstart" : t.originalEvent.type;
+      this._mapDraggingWasEnabled = false, this._startPoint = t.containerPoint.clone(), this._dragStartPoint = t.containerPoint.clone(), this._matrix = [1, 0, 0, 1, 0, 0], leafletSrcExports.DomEvent.stop(t.originalEvent), leafletSrcExports.DomUtil.addClass(this._path._renderer._container, "leaflet-interactive"), leafletSrcExports.DomEvent.on(document, M[i], this._onDrag, this).on(
+        document,
+        S[i],
+        this._onDragEnd,
+        this
+      ), this._path._map.dragging.enabled() && (this._path._map.dragging.disable(), this._mapDraggingWasEnabled = true), this._path._dragMoved = false, this._path._popup && this._path._popup.close(), this._replaceCoordGetters(t);
+    },
+    /**
+     * Dragging
+     * @param  {L.MouseEvent} evt
+     */
+    _onDrag: function(t) {
+      leafletSrcExports.DomEvent.stop(t);
+      const i = t.touches && t.touches.length >= 1 ? t.touches[0] : t, n = this._path._map.mouseEventToContainerPoint(i);
+      if (t.type === "touchmove" && !this._path._dragMoved && this._dragStartPoint.distanceTo(n) <= this._path._map.options.tapTolerance)
+        return;
+      const a = n.x, r = n.y, s = a - this._startPoint.x, e = r - this._startPoint.y;
+      (s || e) && (this._path._dragMoved || (this._path._dragMoved = true, this._path.options.interactive = false, this._path._map.dragging._draggable._moved = true, this._path.fire("dragstart", t), this._path.bringToFront()), this._matrix[4] += s, this._matrix[5] += e, this._startPoint.x = a, this._startPoint.y = r, this._path.fire("predrag", t), this._path._transform(this._matrix), this._path.fire("drag", t));
+    },
+    /**
+     * Dragging stopped, apply
+     * @param  {L.MouseEvent} evt
+     */
+    _onDragEnd: function(t) {
+      const i = this._path._map.mouseEventToContainerPoint(t), n = this.moved();
+      if (n && (this._transformPoints(this._matrix), this._path._updatePath(), this._path._project(), this._path._transform(null), leafletSrcExports.DomEvent.stop(t)), leafletSrcExports.DomEvent.off(document, "mousemove touchmove", this._onDrag, this), leafletSrcExports.DomEvent.off(document, "mouseup touchend", this._onDragEnd, this), this._restoreCoordGetters(), n) {
+        this._path.fire("dragend", {
+          distance: k(this._dragStartPoint, i)
+        });
+        const a = this._path._containsPoint;
+        this._path._containsPoint = leafletSrcExports.Util.falseFn, leafletSrcExports.Util.requestAnimFrame(function() {
+          this._path._dragMoved = false, this._path.options.interactive = true, this._path._containsPoint = a;
+        }, this);
+      }
+      this._mapDraggingWasEnabled && this._path._map.dragging.enable();
+    },
+    /**
+     * Applies transformation, does it in one sweep for performance,
+     * so don't be surprised about the code repetition.
+     *
+     * [ x ]   [ a  b  tx ] [ x ]   [ a * x + b * y + tx ]
+     * [ y ] = [ c  d  ty ] [ y ] = [ c * x + d * y + ty ]
+     *
+     * @param {Array.<Number>} matrix
+     */
+    _transformPoints: function(t, i) {
+      const n = this._path, a = L.point(t[4], t[5]), r = n._map.options.crs, s = r.transformation, e = r.scale(n._map.getZoom()), o = r.projection, _ = s.untransform(a, e).subtract(s.untransform(leafletSrcExports.point(0, 0), e)), p = !i;
+      if (n._bounds = new leafletSrcExports.LatLngBounds(), n._point)
+        i = o.unproject(
+          o.project(n._latlng)._add(_)
+        ), p && (n._latlng = i, n._point._add(a));
+      else if (n._rings || n._parts) {
+        const u = n._rings || n._parts;
+        let c = n._latlngs;
+        i = i || c, leafletSrcExports.Util.isArray(c[0]) || (c = [c], i = [i]);
+        for (let g = 0, w = u.length; g < w; g++) {
+          i[g] = i[g] || [];
+          for (let d = 0, v = u[g].length; d < v; d++) {
+            const b = c[g][d];
+            i[g][d] = o.unproject(
+              o.project(b)._add(_)
+            ), p && (n._bounds.extend(c[g][d]), u[g][d]._add(a));
+          }
+        }
+      }
+      return i;
+    },
+    /**
+     * If you want to read the latlngs during the drag - your right,
+     * but they have to be transformed
+     */
+    _replaceCoordGetters: function() {
+      this._path.getLatLng ? (this._path.getLatLng_ = this._path.getLatLng, this._path.getLatLng = leafletSrcExports.Util.bind(function() {
+        return this.dragging._transformPoints(this.dragging._matrix, {});
+      }, this._path)) : this._path.getLatLngs && (this._path.getLatLngs_ = this._path.getLatLngs, this._path.getLatLngs = leafletSrcExports.Util.bind(function() {
+        return this.dragging._transformPoints(this.dragging._matrix, []);
+      }, this._path));
+    },
+    /**
+     * Put back the getters
+     */
+    _restoreCoordGetters: function() {
+      this._path.getLatLng_ ? (this._path.getLatLng = this._path.getLatLng_, delete this._path.getLatLng_) : this._path.getLatLngs_ && (this._path.getLatLngs = this._path.getLatLngs_, delete this._path.getLatLngs_);
+    }
+  }
+);
+leafletSrcExports.Handler.PathDrag.makeDraggable = function(t) {
+  return t.dragging = new leafletSrcExports.Handler.PathDrag(t), t;
+};
+leafletSrcExports.Path.prototype.makeDraggable = function() {
+  return leafletSrcExports.Handler.PathDrag.makeDraggable(this);
+};
+leafletSrcExports.Path.addInitHook(function() {
+  this.options.draggable ? (this.options.interactive = true, this.dragging ? this.dragging.enable() : (leafletSrcExports.Handler.PathDrag.makeDraggable(this), this.dragging.enable())) : this.dragging && this.dragging.disable();
+});
+const T = leafletSrcExports.Handler.PathDrag;
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: T
+});
+
+var leafletArrows$2 = {exports: {}};
+
+var hasRequiredLeafletArrows;
+
+function requireLeafletArrows () {
+	if (hasRequiredLeafletArrows) return leafletArrows$2.exports;
+	hasRequiredLeafletArrows = 1;
+	(function (module, exports$1) {
+		// Leaflet Arrows by Meteotest
+		// https://github.com/meteotest/leaflet-arrows
+		// Module Loader Boilerplate
+		(function (factory, window) {
+		    // define an AMD module that relies on 'leaflet'
+		    {
+		        module.exports = factory(requireLeafletSrc());
+		    }
+		    // attach your plugin to the global 'L' variable
+		    if (typeof window !== 'undefined' && window.L) {
+		        window.L.Arrow = factory(L);
+		    }
+		})(function (L) {
+		    // beware! the arrow factory
+		    const Arrow = L.FeatureGroup.extend({
+		        options: {
+		            distanceUnit: 'km', // can be [px,km]
+		            stretchFactor: 1, // should the distance be stretched?
+		            arrowheadLength: 4, // in distance unit
+		            arrowheadClosingLine: false, // should a closing third line be drawn?
+		            arrowheadDegree: 155, // degree of arrowhead
+		            clickableWidth: 10, // defines the width in pixels of the "phantom" path to capture click events on a line
+		            //optional: popupContent: function(data) {},
+		            // add your own custom validator, probably not needed...
+		            // the validator gets the bound data object as argument
+		            validator: function (data) {
+		                return (typeof data.latlng !== 'undefined' &&
+		                    typeof data.distance !== 'undefined' &&
+		                    !isNaN(data.distance));
+		            }, // validator is a callback function that takes the data object of the current point and returns whether it is 'valid'. Invalid arrows will be drawn gray
+		            colorScheme: function () {
+		                return this.color;
+		            }, // add own colorscheme callback
+		            circleRadiusInvalidPoint: 1000, // Radius of the circle to display missing or '0'-value
+		            // path options
+		            color: '#333',
+		            opacity: 0.9, // stroke opacity
+		            fillOpacity: 0.9,
+		            weight: 4, // the width of the arrow
+		            smoothFactor: 0,
+		            radius: 5, // default radius, when distance is 0
+		            defaultPointOptions: {
+		                stroke: false,
+		                fillOpacity: 0.8,
+		                fillColor: '#111',
+		                radius: 7,
+		            },
+		            invalidPointOptions: {
+		                stroke: false,
+		                fillOpacity: 0.8,
+		                fillColor: 'red',
+		                radius: 7,
+		            },
+		            drawSourceMarker: false,
+		            sourceMarkerOptions: {
+		                stroke: false,
+		                fillOpacity: 1,
+		                fillColor: '#333',
+		                radius: 5,
+		            },
+		        },
+		        /**
+		         * The data opject needs at least following properties:
+		         *   - latlng : L.LatLng
+		         *   - degree : float
+		         *   - distance: float
+		         */
+		        initialize: function (data, options) {
+		            L.Util.setOptions(this, options);
+		            this.setData(data);
+		        },
+		        onAdd: function (map) {
+		            this._map = map;
+		            this.redraw();
+		            // add a viewreset event listener for updating layer's position
+		            map.on('viewreset', this._reset, this);
+		        },
+		        onRemove: function () {
+		            // remove layer's DOM elements and listeners
+		            for (const i in this._layers) {
+		                if (this._layers.hasOwnProperty(i)) {
+		                    this._map.removeLayer(this._layers[i]);
+		                }
+		            }
+		            if (typeof this._sourceMarker !== 'undefined') {
+		                this._map.removeLayer(this._sourceMarker);
+		            }
+		            this._map.off('viewreset', this._reset, this);
+		        },
+		        // draw
+		        redraw: function () {
+		            // only draw when on map
+		            if (!this._map) {
+		                return;
+		            }
+		            this._layers = {};
+		            // bind popup to the whole feature group
+		            if (typeof this.options.popupContent === 'function') {
+		                this.bindPopup(this.options.popupContent(this._data));
+		            }
+		            if (this._data.valid && typeof this.options.colorScheme === 'function') {
+		                this.options.color = this.options.colorScheme(this._data);
+		            }
+		            this._data.distance = parseFloat(this._data.distance);
+		            // if distance or degree is falsy/Zero then draw a point instead of an arrow
+		            if (!this._data.valid || !this._data.distance || !this._data.angle) {
+		                let circle;
+		                const pathOptions = this._data.valid
+		                    ? this.options.defaultPointOptions
+		                    : this.options.invalidPointOptions;
+		                if (this.options.distanceUnit.toLowerCase() === 'km') {
+		                    // use a tenth of the supplied radius (usally used in the circlemarker)
+		                    circle = L.circle(this._data.latlng, this.options.radius / 10, pathOptions);
+		                }
+		                else {
+		                    circle = L.circleMarker(this._data.latlng, pathOptions);
+		                }
+		                this.addLayer(circle);
+		            }
+		            else {
+		                const theLine = [
+		                    this._data.latlng,
+		                    this._calculateEndPoint(this._data.latlng, this._data.distance, this._data.angle),
+		                ];
+		                const theArrow = this._calculateArrowArray(theLine[1]);
+		                const backgroundPathOption = L.Util.setOptions({}, this.pathOptions);
+		                backgroundPathOption.opacity = 0;
+		                backgroundPathOption.weight = this.options.clickableWidth;
+		                const invisibleBackgroundPolyline = new L.Polyline([theLine, theArrow], backgroundPathOption);
+		                const polyline = new L.Polyline([theLine, theArrow], this.options);
+		                this.addLayer(invisibleBackgroundPolyline);
+		                this.addLayer(polyline);
+		                // that special case, where a circle has to be drawn on the source of the arrow
+		                if (this.options.drawSourceMarker) {
+		                    if (typeof this._sourceMarker === 'undefined') {
+		                        // use the same coloar as the arrow does
+		                        this.options.sourceMarkerOptions.fillColor = this.color;
+		                        this._sourceMarker = L.circleMarker(this._data.latlng, this.options.sourceMarkerOptions);
+		                    }
+		                    else {
+		                        // there is a chance, that the latlng values have been changed by the setData-function
+		                        this._sourceMarker.setLatLng(this._data.latlng);
+		                    }
+		                }
+		            }
+		        },
+		        // custom methods
+		        // just change the angle of the arrow
+		        setAngle: function (angle) {
+		            if (isNaN(angle)) {
+		                this._data.angle = 0; // undefined direction.
+		            }
+		            else {
+		                if (this.options.isWindDegree) {
+		                    this._data.angle = angle - 180;
+		                    if (this.options.distanceUnit.toLowerCase() === 'px') {
+		                        this._data.angle -= 90;
+		                    }
+		                }
+		                else {
+		                    this._data.angle = angle;
+		                }
+		            }
+		            this.redraw();
+		        },
+		        // just change the length of the arrow
+		        setDistance: function (distance) {
+		            if (isNaN(distance)) {
+		                this._data.distance = 0;
+		            }
+		            else {
+		                this._data.distance = parseFloat(distance);
+		            }
+		            this.redraw();
+		        },
+		        // use this method to update the whole dataset that corresponds to the arrow
+		        setData: function (data) {
+		            this._data = data;
+		            if (this.options.validator(this._data)) {
+		                this._data.valid = true;
+		                this.setAngle(data.degree);
+		            }
+		            else {
+		                this._data.valid = false;
+		                this._data.distance = NaN;
+		                this._data.degree = NaN;
+		            }
+		        },
+		        // private methods
+		        // When using Screen Pixels as unit, the arrows have to be
+		        // recalculated after the zoom level has changed
+		        _reset: function () {
+		            if (this.options.distanceUnit.toLowerCase() === 'px') {
+		                this.redraw();
+		            }
+		        },
+		        _calculateEndPoint: function (latlng, dist, degree) {
+		            /*
+		             * http://www.codeguru.com/cpp/cpp/algorithms/article.php/c5115/Geographic-Distance-and-Azimuth-Calculations.htm
+		             */
+		            // don't use this._data here.
+		            // this function is also used to find the points of the arrow
+		            let distance = dist * this.options.stretchFactor, d2r = Math.PI / 180, // degree 2 radius
+		            r2d = 180 / Math.PI;
+		            if (this.options.distanceUnit.toLowerCase() === 'km') {
+		                const R = 6378.137, // earth radius in kmeters
+		                bearing = degree * d2r;
+		                distance = distance / R;
+		                const a = Math.acos(Math.cos(distance) * Math.cos((90 - latlng.lat) * d2r) +
+		                    Math.sin((90 - latlng.lat) * d2r) *
+		                        Math.sin(distance) *
+		                        Math.cos(bearing));
+		                const B = Math.asin((Math.sin(distance) * Math.sin(bearing)) / Math.sin(a));
+		                return new L.LatLng(90 - a * r2d, B * r2d + latlng.lng);
+		            }
+		            else if (this.options.distanceUnit.toLowerCase() === 'px') {
+		                const sourcePoint = this._map.latLngToLayerPoint(latlng);
+		                const rad = degree * d2r;
+		                const vector = L.point(Math.cos(rad) * distance, Math.sin(rad) * distance);
+		                const targetPoint = sourcePoint.add(vector);
+		                return this._map.layerPointToLatLng(targetPoint);
+		            }
+		            else {
+		                throw Error('calculate end point undefined for distanceUnit: ' +
+		                    this.options.distanceUnit);
+		            }
+		        },
+		        _calculateArrowArray: function (latlng) {
+		            // calculates the Array for the arrow
+		            // latlng is the position, where the arrow is added
+		            const degree = this._data.angle;
+		            if (latlng.length !== undefined) {
+		                latlng = new L.LatLng(latlng);
+		            }
+		            const firstEdge = this._calculateEndPoint(latlng, this.options.arrowheadLength, degree - this.options.arrowheadDegree);
+		            const arr = [
+		                firstEdge,
+		                latlng,
+		                this._calculateEndPoint(latlng, this.options.arrowheadLength, degree + this.options.arrowheadDegree),
+		            ];
+		            if (this.options.arrowheadClosingLine) {
+		                arr.push(firstEdge);
+		            }
+		            return arr;
+		        },
+		    });
+		    return Arrow;
+		}, window);
+		
+	} (leafletArrows$2));
+	return leafletArrows$2.exports;
+}
+
+var leafletArrowsExports = requireLeafletArrows();
+var leafletArrows = /*@__PURE__*/getDefaultExportFromCjs(leafletArrowsExports);
+
+var leafletArrows$1 = /*#__PURE__*/_mergeNamespaces({
+    __proto__: null,
+    default: leafletArrows
+}, [leafletArrowsExports]);
+
 exports.Accordion = Accordion;
 exports.AlertDialog = alertDialog;
 exports.AlertStore = AlertStore;
@@ -46469,6 +47965,7 @@ exports.RootStore = RootStore;
 exports.Select = FormSelect;
 exports.StoreContext = StoreContext;
 exports.Tabs = Tabs;
+exports.TangramLayer = TangramLayer;
 exports.TextField = TextField;
 exports.UploadButton = UploadButton;
 exports._testApiKeys = _testApiKeys;