@mapcomponents/react-maplibre 0.1.70 → 0.1.72

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log
 
 
+## [v0.1.72] - 2023-03-08
+
+### Fixed
+- Fix/maplibremap registration react 18 (#89) …
+- remove mui-color dependency
+### Added
+- add new ColorPicker ui component
+- add MlWmsLayer support to LayerList component
+
+## [v0.1.71] - 2023-03-04
+
+### Fixed
+- e3178b5: fix Topbar sidebar defaults
+
 ## [v0.1.70] - 2023-03-03
 
 ### Fixed

package/dist/components/MapLibreMap/lib/MapLibreGlWrapper.d.ts

@@ -39,6 +39,7 @@ interface MapLibreGlWrapper extends MapType {
     }) | (CustomLayerInterface & {
         source?: string | SourceSpecification | undefined;
     }), beforeId?: string | undefined, componentId?: string | undefined) => this;
+    cancelled: boolean;
 }
 declare class MapLibreGlWrapper {
     registeredElements: {

package/dist/components/MlComponentTemplate/MlComponentTemplate.d.ts

@@ -4,14 +4,9 @@ export interface MlComponentTemplateProps {
      * Id of the target MapLibre instance in mapContext
      */
     mapId?: string;
-    /**
-     * Id of an existing layer in the mapLibre instance to help specify the layer order
-     * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
-     */
-    insertBeforeLayer?: string;
 }
 /**
- * Component template
+ * Component description
  *
  */
 declare const MlComponentTemplate: {

package/dist/components/MlSketchTool/LayerList/ColorPicker.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { paintPropsType } from './LayerPropertyForm';
+import { paintPropsType } from '../../../ui_components/LayerList/util/LayerPropertyForm';
 type Props = {
     key: string;
     value: string;

package/dist/index.esm.js

@@ -41,7 +41,7 @@ var ListItemText = require('@mui/material/ListItemText');
 var IconButton = require('@mui/material/IconButton');
 var d3 = require('d3');
 var TuneIcon = require('@mui/icons-material/Tune');
-var muiColor = require('mui-color');
+var reactColor = require('react-color');
 var iconsMaterial = require('@mui/icons-material');
 var system = require('@mui/system');
 var AppBar = require('@mui/material/AppBar');
@@ -392,6 +392,7 @@ var MapLibreGlWrapper = /** @class */ (function () {
                 self.wrapper.viewportState = self.wrapper.getViewport();
             },
         };
+        this.cancelled = false;
         /**
          * Initializes an empty registered elements object for the given componentId
          *
@@ -868,12 +869,11 @@ var MapComponentsProvider = function (_a) {
                 mapIds_raw.current.splice(mapIdIndex, 1);
             }
             setMapIds(__spreadArray([], mapIds_raw.current, true));
-            if (mapIds.length === 1 && map) {
+            if (mapIds_raw.current.length === 0 && map) {
                 setMap(undefined);
             }
         }
         else {
-            setMap(undefined);
             removeMap('anonymous_map');
         }
     };
@@ -895,7 +895,7 @@ var MapComponentsProvider = function (_a) {
                 maps.current[mapId] = mapInstance;
                 mapIds_raw.current.push(mapId);
                 setMapIds(__spreadArray([], mapIds_raw.current, true));
-                if (!map) {
+                if (!map || (map === null || map === void 0 ? void 0 : map.cancelled) === true) {
                     setMap(mapInstance);
                 }
             }
@@ -962,7 +962,7 @@ var defaultProps$1 = {
  */
 var MapLibreMap = function (props) {
     var _a, _b;
-    var map = React.useRef();
+    var mapRef = React.useRef();
     var mapContainer = React.useRef();
     var mapContext = React.useContext(MapContext);
     var mapIdRef = React.useRef(props.mapId);
@@ -971,11 +971,14 @@ var MapLibreMap = function (props) {
     React.useEffect(function () {
         var mapId = mapIdRef.current;
         return function () {
-            var _a, _b, _c;
+            var _a, _b;
             initializedRef.current = false;
             mapContext.removeMap(mapId);
-            (_c = (_b = (_a = map.current) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.remove) === null || _c === void 0 ? void 0 : _c.call(_b);
-            map.current = undefined;
+            if (mapRef.current) {
+                (_b = (_a = mapRef.current.map) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a);
+                mapRef.current.cancelled = true;
+                mapRef.current = undefined;
+            }
         };
     }, []);
     React.useEffect(function () {
@@ -984,15 +987,20 @@ var MapLibreMap = function (props) {
             return;
         if (mapContainer.current) {
             initializedRef.current = true;
-            map.current = new MapLibreGlWrapper({
+            mapRef.current = new MapLibreGlWrapper({
                 mapOptions: __assign(__assign(__assign({ style: '' }, props.options), (((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.style) ? {} : { style: (_b = defaultProps$1 === null || defaultProps$1 === void 0 ? void 0 : defaultProps$1.options) === null || _b === void 0 ? void 0 : _b.style })), { container: mapContainer.current }),
                 onReady: function (map, wrapper) {
                     map.once('load', function () {
-                        if (props.mapId) {
-                            mapContext.registerMap(props.mapId, wrapper);
+                        if (!(wrapper === null || wrapper === void 0 ? void 0 : wrapper.cancelled)) {
+                            if (props.mapId) {
+                                mapContext.registerMap(props.mapId, wrapper);
+                            }
+                            else {
+                                mapContext.setMap(wrapper);
+                            }
                         }
                         else {
-                            mapContext.setMap(wrapper);
+                            map.remove();
                         }
                     });
                 },
@@ -1001,10 +1009,11 @@ var MapLibreMap = function (props) {
     }, [props.options, props.mapId]);
     React.useEffect(function () {
         var _a, _b;
-        if (((_a = map.current) === null || _a === void 0 ? void 0 : _a.map) && ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.style) && currentStyle.current !== props.options.style) {
-            console.log('set style');
+        if (((_a = mapRef.current) === null || _a === void 0 ? void 0 : _a.map) &&
+            ((_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.style) &&
+            currentStyle.current !== props.options.style) {
             currentStyle.current = props.options.style;
-            map.current.map.setStyle(props.options.style);
+            mapRef.current.map.setStyle(props.options.style);
         }
     }, [(_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.style]);
     return (React__default["default"].createElement("div", { ref: mapContainer, className: "mapContainer", style: props.style }));
@@ -1142,7 +1151,6 @@ useMapState.propTypes = {
 };
 
 function useMap(props) {
-    // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
     var mapContext = React.useContext(MapContext);
     var _a = React.useState(), map = _a[0], setMap = _a[1];
     var mapState = useMapState({
@@ -1156,7 +1164,6 @@ function useMap(props) {
             includeBaseLayers: true,
         },
     });
-    var initializedRef = React.useRef(false);
     var mapRef = React.useRef();
     var componentId = React.useRef(uuid.v4());
     var _b = React.useState(false), mapIsReady = _b[0], setMapIsReady = _b[1];
@@ -1164,7 +1171,6 @@ function useMap(props) {
         if (mapRef.current) {
             mapRef.current.cleanup(componentId.current);
         }
-        initializedRef.current = false;
     };
     React.useEffect(function () {
         return function () {
@@ -1175,7 +1181,12 @@ function useMap(props) {
     }, []);
     React.useEffect(function () {
         var _a;
-        if (!mapContext.mapExists(props === null || props === void 0 ? void 0 : props.mapId) || initializedRef.current)
+        if (mapRef.current && mapRef.current.cancelled === true) {
+            mapRef.current = undefined;
+            setMap(undefined);
+            setMapIsReady(false);
+        }
+        if (mapRef.current || !mapContext.mapExists(props === null || props === void 0 ? void 0 : props.mapId))
             return;
         // check if waitForLayer (string, layer id of the layer this hook is supposed to wait for)
         // exists as layer in the MapLibre instance
@@ -1190,9 +1201,6 @@ function useMap(props) {
                 return;
             }
         }
-        // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
-        // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-        initializedRef.current = true;
         mapRef.current = mapContext.getMap(props === null || props === void 0 ? void 0 : props.mapId);
         setMap(mapRef.current);
         setMapIsReady(true);
@@ -1241,23 +1249,14 @@ MlCenterPosition.defaultProps = {
 };
 
 /**
- * Component template
+ * Component description
  *
  */
 var MlComponentTemplate = function (props) {
     var mapHook = useMap({
         mapId: props.mapId,
-        waitForLayer: props.insertBeforeLayer,
     });
-    var initializedRef = React.useRef(false);
-    React.useEffect(function () {
-        if (!mapHook.map || initializedRef.current)
-            return;
-        // the MapLibre-gl instance (mapHook.map) is accessible here
-        // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-        initializedRef.current = true;
-        mapHook.map.map.setCenter([7.132122000552613, 50.716405378037706]);
-    }, [mapHook.map, props.mapId]);
+    console.log(mapHook.componentId + " remove this log");
     return React__default["default"].createElement(React__default["default"].Fragment, null);
 };
 MlComponentTemplate.defaultProps = {
@@ -3341,7 +3340,7 @@ function useLayer(props) {
     var layerId = React.useRef(props.layerId || (props.idPrefix ? props.idPrefix : 'Layer-') + mapHook.componentId);
     var createLayer = React.useCallback(function () {
         var _a, _b;
-        if (!mapHook.map)
+        if (!mapHook.map || (mapHook === null || mapHook === void 0 ? void 0 : mapHook.map.cancelled))
             return;
         if (mapHook.map.map.getLayer(layerId.current)) {
             mapHook.cleanup();
@@ -3397,9 +3396,12 @@ function useLayer(props) {
         layerTypeRef.current = props.options.type;
     }, [props, mapHook.map]);
     React.useEffect(function () {
+        var _a, _b, _c, _d;
         if (!mapHook.map)
             return;
-        if (initializedRef.current &&
+        if (((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.cancelled) === false &&
+            initializedRef.current &&
+            ((_d = (_c = (_b = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.getLayer) === null || _d === void 0 ? void 0 : _d.call(_c, layerId.current)) &&
             (legalLayerTypes.indexOf(props.options.type) === -1 ||
                 (legalLayerTypes.indexOf(props.options.type) !== -1 &&
                     props.options.type === layerTypeRef.current))) {
@@ -3408,17 +3410,20 @@ function useLayer(props) {
         createLayer();
     }, [mapHook.map, props.options, createLayer]);
     React.useEffect(function () {
-        var _a, _b, _c, _d;
-        if (!initializedRef.current || !((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getSource(layerId.current)))
+        var _a, _b, _c, _d, _e, _f;
+        if (((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.cancelled) === true ||
+            !initializedRef.current ||
+            !((_d = (_c = (_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.getSource) === null || _d === void 0 ? void 0 : _d.call(_c, layerId.current)))
             return;
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore setData only exists on GeoJsonSource
-        (_d = (_c = mapHook.map.map.getSource(layerId.current)) === null || _c === void 0 ? void 0 : _c.setData) === null || _d === void 0 ? void 0 : _d.call(_c, props.geojson);
+        (_f = (_e = mapHook.map.map.getSource(layerId.current)) === null || _e === void 0 ? void 0 : _e.setData) === null || _f === void 0 ? void 0 : _f.call(_e, props.geojson);
     }, [props.geojson, mapHook.map, props.options.type]);
     React.useEffect(function () {
-        var _a, _b, _c, _d, _e;
-        if (!mapHook.map ||
-            !((_c = (_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.getLayer) === null || _c === void 0 ? void 0 : _c.call(_b, layerId.current)) ||
+        var _a, _b, _c, _d, _e, _f;
+        if (((_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.cancelled) === true ||
+            !mapHook.map ||
+            !((_d = (_c = (_b = mapHook.map) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.getLayer) === null || _d === void 0 ? void 0 : _d.call(_c, layerId.current)) ||
             !initializedRef.current ||
             props.options.type !== layerTypeRef.current)
             return;
@@ -3427,7 +3432,7 @@ function useLayer(props) {
         if (props.options.layout && layoutString !== layerLayoutConfRef.current) {
             var oldLayout = JSON.parse(layerLayoutConfRef.current);
             for (key in props.options.layout) {
-                if (((_d = props.options.layout) === null || _d === void 0 ? void 0 : _d[key]) && props.options.layout[key] !== oldLayout[key]) {
+                if (((_e = props.options.layout) === null || _e === void 0 ? void 0 : _e[key]) && props.options.layout[key] !== oldLayout[key]) {
                     mapHook.map.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
                 }
             }
@@ -3437,7 +3442,7 @@ function useLayer(props) {
         if (paintString !== layerPaintConfRef.current) {
             var oldPaint = JSON.parse(layerPaintConfRef.current);
             for (key in props.options.paint) {
-                if (((_e = props.options.paint) === null || _e === void 0 ? void 0 : _e[key]) && props.options.paint[key] !== oldPaint[key]) {
+                if (((_f = props.options.paint) === null || _f === void 0 ? void 0 : _f[key]) && props.options.paint[key] !== oldPaint[key]) {
                     mapHook.map.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
                 }
             }
@@ -3504,6 +3509,7 @@ var getDefaultPaintPropsByType = function (type, defaultPaintOverrides) {
             }
             return {
                 'fill-color': 'rgba(10,240,256,0.6)',
+                'fill-outline-color': 'rgba(20,230,256,0.8)',
             };
         case 'line':
             if (defaultPaintOverrides === null || defaultPaintOverrides === void 0 ? void 0 : defaultPaintOverrides.line) {
@@ -3523,6 +3529,7 @@ var getDefaultPaintPropsByType = function (type, defaultPaintOverrides) {
                 'circle-color': 'rgba(10,240,256,0.8)',
                 'circle-stroke-color': '#fff',
                 'circle-stroke-width': 2,
+                'circle-radius': 4,
             };
     }
 };
@@ -3928,21 +3935,21 @@ var MlNavigationTools = function (props) {
         }, mapHook.componentId);
         setPitch(mapHook.map.map.getPitch());
     }, [mapHook.map, props.mapId]);
-    var zoomIn = function () {
+    var zoomIn = React.useCallback(function () {
         if (!mapHook.map)
             return;
         if (mapHook.map.map.transform._zoom + 0.5 <= mapHook.map.map.transform._maxZoom) {
             mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom + 0.5 });
         }
-    };
-    var zoomOut = function () {
+    }, [mapHook.map]);
+    var zoomOut = React.useCallback(function () {
         if (!mapHook.map)
             return;
         if (mapHook.map.map.transform._zoom - 0.5 >= mapHook.map.map.transform._minZoom) {
             mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom - 0.5 });
         }
-    };
-    var adjustPitch = function () {
+    }, [mapHook.map]);
+    var adjustPitch = React.useCallback(function () {
         if (!mapHook.map)
             return;
         var targetPitch = 60;
@@ -3950,7 +3957,7 @@ var MlNavigationTools = function (props) {
             targetPitch = 0;
         }
         mapHook.map.map.easeTo({ pitch: targetPitch });
-    };
+    }, [mapHook.map]);
     return (React__default["default"].createElement(Box__default["default"], { sx: __assign(__assign({ zIndex: 501, position: 'absolute', display: 'flex', flexDirection: 'column' }, (mediaIsMobile ? { margin: '20px 10px 20px 10px' } : {})), props.sx) },
         React__default["default"].createElement(MlNavigationCompass, { style: {
                 width: '31px',
@@ -6331,17 +6338,17 @@ var MlWmsLoader = function (props) {
         };
     }, [getFeatureInfo]);
     React.useEffect(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         if (!(capabilities === null || capabilities === void 0 ? void 0 : capabilities.Service))
             return;
-        if (((_d = (_c = (_b = (_a = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Capability) === null || _a === void 0 ? void 0 : _a.Layer) === null || _b === void 0 ? void 0 : _b.CRS) === null || _c === void 0 ? void 0 : _c.indexOf) === null || _d === void 0 ? void 0 : _d.call(_c, 'EPSG:3857')) === -1) {
+        if (((_d = (_c = (_b = (_a = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Capability) === null || _a === void 0 ? void 0 : _a.Layer) === null || _b === void 0 ? void 0 : _b.CRS) === null || _c === void 0 ? void 0 : _c.indexOf) === null || _d === void 0 ? void 0 : _d.call(_c, 'EPSG:3857')) === -1 && ((_h = (_g = (_f = (_e = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Capability) === null || _e === void 0 ? void 0 : _e.Layer) === null || _f === void 0 ? void 0 : _f.CRS) === null || _g === void 0 ? void 0 : _g.indexOf) === null || _h === void 0 ? void 0 : _h.call(_g, 'CRS:84')) === -1) {
             console.log('MlWmsLoader (' + capabilities.Service.Title + '): No WGS 84/Pseudo-Mercator support');
         }
         else {
             console.log('MlWmsLoader (' + capabilities.Service.Title + '): WGS 84/Pseudo-Mercator supported');
             var _LatLonBoundingBox_1 = [];
             // collect aueriable Layer2 layers
-            var _layers_1 = (_f = (_e = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Capability) === null || _e === void 0 ? void 0 : _e.Layer) === null || _f === void 0 ? void 0 : _f.Layer.filter(function (el) { var _a; return !((_a = el.Layer) === null || _a === void 0 ? void 0 : _a.length); }).map(function (layer, idx) {
+            var _layers_1 = (_k = (_j = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Capability) === null || _j === void 0 ? void 0 : _j.Layer) === null || _k === void 0 ? void 0 : _k.Layer.filter(function (el) { var _a; return !((_a = el.Layer) === null || _a === void 0 ? void 0 : _a.length); }).map(function (layer, idx) {
                 var _a, _b, _c;
                 if (idx === 0) {
                     _LatLonBoundingBox_1 = layer.EX_GeographicBoundingBox;
@@ -6349,7 +6356,7 @@ var MlWmsLoader = function (props) {
                 return __assign({ visible: ((_c = (_b = (_a = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Capability) === null || _a === void 0 ? void 0 : _a.Layer) === null || _b === void 0 ? void 0 : _b.Layer) === null || _c === void 0 ? void 0 : _c.length) > 2 ? idx > 1 : true, Attribution: { Title: '' } }, layer);
             });
             // collect aueriable Layer3 layers
-            (_h = (_g = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Capability) === null || _g === void 0 ? void 0 : _g.Layer) === null || _h === void 0 ? void 0 : _h.Layer.forEach(function (el) {
+            (_m = (_l = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Capability) === null || _l === void 0 ? void 0 : _l.Layer) === null || _m === void 0 ? void 0 : _m.Layer.forEach(function (el) {
                 var _a;
                 var tmpLayers = (_a = el === null || el === void 0 ? void 0 : el.Layer) === null || _a === void 0 ? void 0 : _a.filter(function (el) { return el.CRS.length; }).map(function (layer, idx) {
                     if (idx === 0) {
@@ -6719,37 +6726,81 @@ function LayerList(_a) {
     return React__default["default"].createElement(material.List, { sx: { marginTop: '15px' } }, children);
 }
 
+var converters = {
+    rgba: function (c) { return "rgba(".concat(c.rgb.r, ", ").concat(c.rgb.g, ", ").concat(c.rgb.b, ", ").concat(c.rgb.a, ")"); },
+    rgb: function (c) { return "rgb(".concat(c.rgb.r, ", ").concat(c.rgb.g, ", ").concat(c.rgb.b, ")"); },
+    hex: function (c) { return c.hex; },
+    rgba_rgb: function (c) { return c.rgb.a === 1 ? converters.rgb(c) : converters.rgba(c); },
+    rgba_hex: function (c) { return c.rgb.a === 1 ? converters.hex(c) : converters.rgba(c); }
+};
+
+var ColorPicker = function (_a) {
+    var convert = _a.convert, props = __rest(_a, ["convert"]);
+    var _b = React.useState(false), showPicker = _b[0], setShowPicker = _b[1];
+    var _c = React.useState((props === null || props === void 0 ? void 0 : props.value) || ''), value = _c[0], setValue = _c[1];
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(material.Grid, { container: true, sx: { flexWrap: 'nowrap' } },
+            React__default["default"].createElement(material.Grid, { xs: 2, item: true },
+                React__default["default"].createElement(material.Button, { variant: "outlined", onClick: function () { return setShowPicker(true); }, sx: {
+                        minWidth: 'initial',
+                        padding: '5px',
+                        borderColor: function (theme) { return theme.palette.text.primary; },
+                    } },
+                    React__default["default"].createElement("div", { style: { width: '25px', height: '25px', backgroundColor: value } }))),
+            React__default["default"].createElement(material.Grid, { xs: 10, item: true },
+                React__default["default"].createElement(material.TextField, { onClick: function () { return setShowPicker(true); }, value: value, variant: "outlined", disabled: true }))),
+        showPicker && (React__default["default"].createElement("div", { style: { position: 'relative', marginTop: 0 } },
+            React__default["default"].createElement("div", { style: { position: 'absolute', zIndex: 1000 } },
+                React__default["default"].createElement("div", { style: { position: 'fixed', top: '0px', right: '0px', bottom: '0px', left: '0px' }, onClick: function () {
+                        setShowPicker(false);
+                    } }),
+                React__default["default"].createElement(reactColor.ChromePicker, { color: value, onChange: function (c) {
+                        var _a;
+                        var newValue = converters[convert](c);
+                        setValue(newValue);
+                        (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
+                    } }))))));
+};
+ColorPicker.defaultProps = {
+    convert: 'rgba_hex',
+    label: 'Color',
+    name: 'color',
+};
+
 function PaintPropsColorPicker(_a) {
     var propKey = _a.propKey, value = _a.value, setPaintProps = _a.setPaintProps;
-    return (React__default["default"].createElement(muiColor.ColorPicker, { value: value, onChange: function (value) {
+    return (React__default["default"].createElement(ColorPicker, { value: value, label: "Color", onChange: function (value) {
             setPaintProps(function (current) {
                 var _a;
-                var _b;
-                if (!((_b = value === null || value === void 0 ? void 0 : value.rgb) === null || _b === void 0 ? void 0 : _b[0])) {
-                    return current;
-                }
-                var newProps = __assign(__assign({}, current), (_a = {}, _a[propKey] = 'rgba(' +
-                    value.rgb[0] +
-                    ',' +
-                    value.rgb[1] +
-                    ',' +
-                    value.rgb[2] +
-                    ',' +
-                    value.alpha +
-                    ')', _a));
+                var newProps = __assign(__assign({}, current), (_a = {}, _a[propKey] = value, _a));
                 return newProps;
             });
         } }));
 }
 
 var mapPropKeyToFormInputType = {
+    'circle-color': 'colorpicker',
+    'circle-radius': 'slider',
+    'circle-stroke-color': 'colorpicker',
+    'circle-stroke-width': 'slider',
     'fill-color': 'colorpicker',
+    'fill-outline-color': 'colorpicker',
     'line-color': 'colorpicker',
     'line-width': 'slider',
     'line-blur': 'slider',
 };
 var mapPropKeyToFormInputTypeKeys = Object.keys(mapPropKeyToFormInputType);
 var inputPropsByPropKey = {
+    'circle-stroke-width': {
+        step: 1,
+        min: 1,
+        max: 20,
+    },
+    'circle-radius': {
+        step: 1,
+        min: 1,
+        max: 100,
+    },
     'line-blur': {
         step: 1,
         min: 1,
@@ -6772,7 +6823,7 @@ function LayerPropertyForm(_a) {
                 case 'slider':
                     return (React__default["default"].createElement(React__default["default"].Fragment, null,
                         label,
-                        React__default["default"].createElement(material.Slider, __assign({}, inputPropsByPropKey[key], { inputProps: { inputMode: 'decimal', pattern: '[0-9]*' }, value: paintProps[key], onChange: function (_ev, value) {
+                        React__default["default"].createElement(material.Slider, __assign({}, inputPropsByPropKey[key], { inputProps: { inputMode: 'decimal', pattern: '[0-9]*' }, value: paintProps[key], valueLabelDisplay: "auto", onChange: function (_ev, value) {
                                 if (value) {
                                     setPaintProps(function (current) {
                                         var _a;
@@ -6807,6 +6858,7 @@ function LayerPropertyForm(_a) {
                     padding: '15px',
                     boxShadow: 'inset 0px 0px 10px rgb(50 50 50 / 10%)',
                     borderRadius: '5px',
+                    width: '100%',
                 } }, Object.keys(paintProps).map(function (el) { return getFormInputByType(el); })))));
 }
 
@@ -6942,15 +6994,18 @@ function LayerListItem(_a) {
         setLayerState(__assign(__assign({}, layerComponent.props), { paint: paintProps }));
     }, [paintProps, setLayerState]);
     var _layerComponent = React.useMemo(function () {
-        var _a, _b;
+        var _a;
         if (layerComponent && type === 'layer') {
-            if ((_a = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _a === void 0 ? void 0 : _a.layers) {
-                return React__default["default"].cloneElement(layerComponent, __assign(__assign({}, layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props), { layers: (_b = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _b === void 0 ? void 0 : _b.layers }));
-            }
-            else {
-                return React__default["default"].cloneElement(layerComponent, __assign({ layout: {
-                        visibility: _visible ? 'visible' : 'none',
-                    } }, (setLayerState ? {} : { paint: paintProps })));
+            switch (layerComponent.type.displayName) {
+                case 'MlWmsLayer':
+                    return React__default["default"].cloneElement(layerComponent, __assign(__assign({}, layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props), { visible: _visible }));
+                case 'MlVectorTileLayer':
+                    return React__default["default"].cloneElement(layerComponent, __assign(__assign({}, layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props), { layers: (_a = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _a === void 0 ? void 0 : _a.layers }));
+                default:
+                case 'MlGeoJsonLayer':
+                    return React__default["default"].cloneElement(layerComponent, __assign({ layout: {
+                            visibility: _visible ? 'visible' : 'none',
+                        } }, (setLayerState ? {} : { paint: paintProps })));
             }
         }
         return React__default["default"].createElement(React__default["default"].Fragment, null);
@@ -6992,9 +7047,10 @@ LayerListItem.defaultProps = {
     visible: true,
 };
 
-var logoUrl = 'assets/WG-MapComponents-Logo_rgb.svg';
-var logoUrl_dark = 'assets/WG-MapComponents-Logo_rgb-weisse-schrift.svg';
-var logoUrl_mobile = 'assets/mapcomponents_logo.png';
+var ghPagesUrl = 'https://mapcomponents.github.io/react-map-components-maplibre/';
+var logoUrl = ghPagesUrl + 'assets/WG-MapComponents-Logo_rgb.svg';
+var logoUrl_dark = ghPagesUrl + 'assets/WG-MapComponents-Logo_rgb-weisse-schrift.svg';
+var logoUrl_mobile = ghPagesUrl + 'assets/mapcomponents_logo.png';
 function TopToolbar(props) {
     var theme = styles.useTheme();
     var _a = React.useState(null), anchorElNav = _a[0], setAnchorElNav = _a[1];
@@ -7070,7 +7126,12 @@ function Sidebar(_a) {
     var _b = React.useState(false), drawerOpen = _b[0], setDrawerOpen = _b[1];
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         !mediaIsMobile ? (React__default["default"].createElement(Box__default["default"], { sx: { display: { xs: 'none', sm: 'flex' }, mr: 1 } },
-            React__default["default"].createElement(material.Drawer, __assign({ transitionDuration: 0, variant: "persistent", anchor: "left", open: typeof props.open === 'undefined' ? drawerOpen : props.open, PaperProps: __assign(__assign({}, drawerPaperProps), { sx: __assign({ maxWidth: { lg: '30%', md: '40%', sm: '50%', xs: '78%' }, padding: { lg: '20px', md: '20px', sm: '20px', xs: '10px' } }, drawerPaperProps === null || drawerPaperProps === void 0 ? void 0 : drawerPaperProps.sx) }), sx: __assign({ flexGrow: 1, zIndex: 105, position: 'absolute', top: 0, bottom: 0, display: 'flex', flexDirection: 'column', maxWidth: { lg: '30%', md: '40%', sm: '50%', xs: '78%' } }, (drawerOpen ? {} : { left: mediaIsMobile ? '-90vw' : '-20vw' })) }, props),
+            React__default["default"].createElement(material.Drawer, __assign({ transitionDuration: 0, variant: "persistent", anchor: "left", open: typeof props.open === 'undefined' ? drawerOpen : props.open, PaperProps: __assign(__assign({}, drawerPaperProps), { sx: __assign({ maxWidth: { lg: '30%', md: '40%', sm: '50%', xs: '78%' }, padding: { sm: '84px 20px 20px 20px', xs: '74px 10px 10px 10px' }, width: {
+                            xs: '80%',
+                            sm: '60%',
+                            md: '350px',
+                            lg: '350px',
+                        }, boxSizing: 'border-box' }, drawerPaperProps === null || drawerPaperProps === void 0 ? void 0 : drawerPaperProps.sx) }), sx: __assign({ flexGrow: 1, zIndex: 105, position: 'absolute', bottom: 0, display: 'flex', flexDirection: 'column', maxWidth: { lg: '30%', md: '40%', sm: '50%', xs: '78%' } }, (drawerOpen ? {} : { left: mediaIsMobile ? '-90vw' : '-20vw' })) }, props),
                 React__default["default"].createElement(DrawerHeader, __assign({}, drawerHeaderProps),
                     React__default["default"].createElement(_.Typography, { variant: "h6" }, props.name),
                     React__default["default"].createElement(material.IconButton, { onClick: props.setOpen