@mapcomponents/react-maplibre 1.0.7 → 1.0.9

package/dist/src/components/MlOgcApiFeatures/MlOgcApiFeatures.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { MlGeoJsonLayerProps } from '../MlGeoJsonLayer/MlGeoJsonLayer';
+export type MlOgcApiFeaturesProps = {
+    visible?: boolean;
+    /**
+     * Id of the target MapLibre instance in mapContext
+     */
+    mapId?: string;
+    /**
+     * The url of OGC API
+     */
+    ogcApiUrl: URL;
+    /**
+     * The additional query parameters of OGC API
+     */
+    ogcApiFeatureParams?: OgcApiFeaturesParamsTypes;
+    /**
+     * Fetches the features everytime (based on the current bbox) when the map gets moved
+     */
+    reloadFeaturesOnMapMove?: boolean;
+    /**
+     * Geojson Layer props. But omit 'geojson' because it gets set from the OGC API Feature call
+     */
+    mlGeoJsonLayerProps?: Omit<MlGeoJsonLayerProps, 'geojson'>;
+};
+export type OgcApiFeaturesParamsTypes = {
+    bbox?: string;
+    bbox_crs?: string;
+    limit?: number;
+    offset?: number;
+    crs?: string;
+    datetime?: string;
+    properties?: string;
+    sortby?: string;
+    f?: string;
+    filter?: string;
+    lang?: string;
+    q?: string;
+    properties_crs?: string;
+    id?: string;
+    filter_lang?: string;
+    filter_crs?: string;
+};
+declare const MlOgcApiFeatures: (props: MlOgcApiFeaturesProps) => React.JSX.Element;
+export default MlOgcApiFeatures;

package/dist/{components → src/components}/MlVectorTileLayer/MlVectorTileLayer.d.ts

@@ -1,13 +1,16 @@
 import React from 'react';
 import { LayerSpecification } from 'maplibre-gl';
 import { VectorSourceSpecification } from 'maplibre-gl';
+export type ExtendedLayerSpecification = LayerSpecification & {
+    masterVisible?: boolean;
+};
 export type MlVectorTileLayerProps = {
     mapId?: string;
     insertBeforeLayer?: string;
     layerId?: string;
     sourceOptions?: VectorSourceSpecification;
     url?: string;
-    layers: LayerSpecification[];
+    layers: ExtendedLayerSpecification[];
 };
 /**
  * Adds a vector-tile source and 0...n vector-tile-layers to the MapLibre instance referenced by

package/dist/src/decorators/MapContextReduxStoreDecorator.d.ts

@@ -0,0 +1,7 @@
+import { MapLibreMapProps } from '../components/MapLibreMap/MapLibreMap';
+import './style.css';
+import { Decorator } from '@storybook/react';
+declare const makeMapContextDecorators: (options: MapLibreMapProps['options']) => Decorator[];
+declare const _default: Decorator[];
+export default _default;
+export { makeMapContextDecorators };

package/dist/{index.d.ts → src/index.d.ts}

@@ -28,6 +28,7 @@ export { default as GeoJsonContext } from './components/MlGpxViewer/util/GeoJson
 export { default as MlShareMapState } from './components/MlShareMapState/MlShareMapState';
 export { default as MlSpatialElevationProfile } from './components/MlSpatialElevationProfile/MlSpatialElevationProfile';
 export { default as MlVectorTileLayer } from './components/MlVectorTileLayer/MlVectorTileLayer';
+export { default as MlOgcApiFeatures } from './components/MlOgcApiFeatures/MlOgcApiFeatures';
 export { default as MlWmsFeatureInfoPopup } from './components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup';
 export { default as MlWmsLayer } from './components/MlWmsLayer/MlWmsLayer';
 export { default as MlWmsLoader } from './components/MlWmsLoader/MlWmsLoader';
@@ -81,8 +82,45 @@ export { default as SelectStyleButton } from './ui_components/SelectStyleButton/
 export { default as SelectStylePopup } from './ui_components/SelectStyleButton/SelectStylePopup';
 export { default as ConfirmDialog } from './ui_components/ConfirmDialog';
 export { default as SpeedDial } from './ui_components/SpeedDial/SpeedDial';
+export { default as LayerTree } from './ui_components/LayerTree/LayerTree';
+export { default as LayerOnMap } from './ui_components/LayerTree/LayerOnMap';
+export { default as LayerTreeListItem } from './ui_components/LayerTree/LayerTreeListItem';
 export { default as GruvboxStyle } from './omt_styles/gruvbox';
 export { default as MedievalKingdomStyle } from './omt_styles/medieval_kingdom';
 export { default as MonokaiStyle } from './omt_styles/monokai';
 export { default as OceanicNextStyle } from './omt_styles/oceanic_next';
 export { default as SolarizedStyle } from './omt_styles/solarized';
+declare const MapStore: {
+    store: import("@reduxjs/toolkit").EnhancedStore<{
+        mapConfig: import("./stores/map.store").MapState;
+    }, import("redux").UnknownAction, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
+        dispatch: import("redux-thunk").ThunkDispatch<{
+            mapConfig: import("./stores/map.store").MapState;
+        }, undefined, import("redux").UnknownAction>;
+    }>, import("redux").StoreEnhancer]>>;
+    setMapConfig: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+        key: string;
+        mapConfig: import("./stores/map.store").MapConfig;
+    }, "mapConfig/setMapConfig">;
+    removeMapConfig: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+        key: string;
+    }, "mapConfig/removeMapConfig">;
+    setLayerInMapConfig: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+        mapConfigKey: string;
+        layer: import("./stores/map.store").LayerConfig;
+    }, "mapConfig/setLayerInMapConfig">;
+    removeLayerFromMapConfig: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+        mapConfigKey: string;
+        layerUuid: string;
+    }, "mapConfig/removeLayerFromMapConfig">;
+    updateLayerOrder: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+        mapConfigKey: string;
+        newOrder: import("./stores/map.store").LayerOrderItem[];
+    }, "mapConfig/updateLayerOrder">;
+    setMasterVisible: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+        mapConfigKey: string;
+        layerId: string;
+        masterVisible: boolean;
+    }, "mapConfig/setMasterVisible">;
+};
+export { MapStore };

package/dist/src/stores/map.store.d.ts

@@ -0,0 +1,105 @@
+import { MlGeoJsonLayerProps } from 'src/components/MlGeoJsonLayer/MlGeoJsonLayer';
+import { MlVectorTileLayerProps } from 'src/components/MlVectorTileLayer/MlVectorTileLayer';
+import { Layer } from 'wms-capabilities';
+import { MlWmsLayerProps } from '../components/MlWmsLayer/MlWmsLayer';
+export interface wmsLoaderConfigProps {
+    getFeatureInfoUrl: string;
+    layers: Layer[];
+    name: string;
+    open: boolean;
+    visible: boolean;
+    wmsUrl: string;
+}
+export interface wmsConfig {
+    featureInfoActive?: boolean;
+    config?: wmsLoaderConfigProps;
+    url: string;
+}
+export type WmsLayerConfig = {
+    type: 'wms';
+    uuid: string;
+    name?: string;
+    id?: string;
+    config?: MlWmsLayerProps;
+    masterVisible?: boolean;
+};
+export type GeojsonLayerConfig = {
+    type: 'geojson';
+    uuid: string;
+    name?: string;
+    id?: string;
+    config: MlGeoJsonLayerProps;
+    masterVisible?: boolean;
+    configurable?: boolean;
+};
+export type VtLayerConfig = {
+    type: 'vt';
+    uuid: string;
+    name?: string;
+    id?: string;
+    config: MlVectorTileLayerProps;
+    visible?: boolean;
+    masterVisible?: boolean;
+};
+export type FolderLayerConfig = {
+    type: 'folder';
+    uuid: string;
+    name?: string;
+    visible?: boolean;
+    masterVisible?: boolean;
+    id?: string;
+    config?: undefined;
+};
+export type LayerConfig = WmsLayerConfig | GeojsonLayerConfig | VtLayerConfig | FolderLayerConfig;
+export interface MapProps {
+    center: [number, number];
+    zoom: number;
+}
+export interface LayerOrderItem {
+    uuid: string;
+    layers?: LayerOrderItem[];
+}
+export interface MapConfig {
+    name: string;
+    mapProps: MapProps;
+    layers: LayerConfig[];
+    layerOrder: LayerOrderItem[];
+}
+export type MapState = {
+    mapConfigs: {
+        [key: string]: MapConfig;
+    };
+};
+export type RootState = {
+    mapConfig: MapState;
+};
+export declare const initialState: MapState;
+export declare const getLayerByUuid: (state: MapState, uuid: string) => LayerConfig | null;
+export declare const extractUuidsFromLayerOrder: (state: RootState, mapConfigKey: string) => string[];
+declare const store: import("@reduxjs/toolkit").EnhancedStore<{
+    mapConfig: MapState;
+}, import("redux").UnknownAction, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
+    dispatch: import("redux-thunk").ThunkDispatch<{
+        mapConfig: MapState;
+    }, undefined, import("redux").UnknownAction>;
+}>, import("redux").StoreEnhancer]>>;
+export declare const setMapConfig: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    key: string;
+    mapConfig: MapConfig;
+}, "mapConfig/setMapConfig">, removeMapConfig: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    key: string;
+}, "mapConfig/removeMapConfig">, setLayerInMapConfig: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    mapConfigKey: string;
+    layer: LayerConfig;
+}, "mapConfig/setLayerInMapConfig">, removeLayerFromMapConfig: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    mapConfigKey: string;
+    layerUuid: string;
+}, "mapConfig/removeLayerFromMapConfig">, updateLayerOrder: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    mapConfigKey: string;
+    newOrder: LayerOrderItem[];
+}, "mapConfig/updateLayerOrder">, setMasterVisible: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    mapConfigKey: string;
+    layerId: string;
+    masterVisible: boolean;
+}, "mapConfig/setMasterVisible">;
+export default store;

package/dist/{ui_components → src/ui_components}/ColorPicker/ColorPicker.d.ts

@@ -2,8 +2,6 @@ import React from 'react';
 export interface ColorPickerProps {
     onChange?: (value: string) => void;
     convert: 'rgb' | 'rgba' | 'rgba_hex' | 'hex' | 'rgba_rgb';
-    internalValue?: string;
-    setValue?: (value: string) => void;
     value?: string;
 }
 declare const ColorPicker: {

package/dist/{ui_components → src/ui_components}/LayerList/util/LayerListItemVectorLayer.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
 import { MlVectorTileLayerProps } from '../../../components/MlVectorTileLayer/MlVectorTileLayer';
-export declare const ListItemStyled: import("@emotion/styled").StyledComponent<{
-    button?: false | undefined;
-} & import("@mui/material").ListItemOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+export declare const ListItemStyled: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
-}, "className" | "style" | "classes" | "button" | "children" | "disabled" | "sx" | "autoFocus" | "components" | "componentsProps" | "slotProps" | "slots" | "alignItems" | "ContainerComponent" | "ContainerProps" | "dense" | "disableGutters" | "disablePadding" | "divider" | "secondaryAction" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "children" | "components" | "componentsProps" | "slotProps" | "slots" | "alignItems" | "ContainerComponent" | "ContainerProps" | "dense" | "disableGutters" | "disablePadding" | "divider" | "secondaryAction" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const CheckboxListItemIcon: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemIconProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const CheckboxStyled: import("@emotion/styled").StyledComponent<import("@mui/material").CheckboxProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 interface LayerListItemVectorLayerProps {

package/dist/src/ui_components/LayerTree/LayerOnMap.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LayerOnMapProps {
+    mapConfigKey: string;
+    mapId?: string;
+}
+declare function LayerOnMap(props: LayerOnMapProps): React.JSX.Element;
+export default LayerOnMap;

package/dist/src/ui_components/LayerTree/LayerTree.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface LayerTreeProps {
+    mapConfigKey: string;
+}
+declare function LayerTree(props: LayerTreeProps): React.JSX.Element;
+export default LayerTree;

package/dist/src/ui_components/LayerTree/LayerTreeListItem.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SxProps } from '@mui/material';
+import { LayerOrderItem } from '../../stores/map.store';
+interface LayerTreeListItemProps {
+    visible?: boolean;
+    type?: 'background' | 'background-labels' | 'layer' | 'wms-layer' | 'vector-tile-layer';
+    name?: string;
+    description?: string;
+    setLayerState?: (state: unknown) => void;
+    showDeleteButton?: boolean;
+    listItemSx?: SxProps;
+    buttons?: JSX.Element;
+    sortable?: boolean;
+    mapConfigKey: string;
+    layerOrderConfig: LayerOrderItem;
+}
+declare function LayerTreeListItem(props: LayerTreeListItemProps): React.JSX.Element;
+export default LayerTreeListItem;

package/dist/src/ui_components/LayerTree/util/LayerPropertyForm.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CircleLayerSpecification, FillLayerSpecification, LineLayerSpecification } from 'maplibre-gl';
+export type paintPropsType = CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['paint'];
+interface LayerPropertyFormProps {
+    layerUuid: string;
+    mapConfigKey: string;
+}
+declare function LayerPropertyForm(props: LayerPropertyFormProps): React.JSX.Element;
+export default LayerPropertyForm;

package/dist/src/ui_components/LayerTree/util/input/ColorPicker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface PaintPropsColorPickerProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+declare function PaintPropsColorPicker(props: PaintPropsColorPickerProps): React.JSX.Element;
+export default PaintPropsColorPicker;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mapcomponents/react-maplibre",
-	"version": "1.0.7",
+	"version": "1.0.9",
 	"main": "dist/index.cjs.js",
 	"license": "MIT",
 	"module": "dist/index.esm.js",
@@ -23,13 +23,14 @@
 		"@dnd-kit/core": "^6.1.0",
 		"@dnd-kit/modifiers": "^7.0.0",
 		"@dnd-kit/sortable": "^8.0.0",
-		"@emotion/css": "^11.11.2",
-		"@emotion/react": "^11.11.3",
-		"@emotion/styled": "^11.11.0",
+		"@emotion/css": "^11.13.0",
+		"@emotion/react": "^11.13.3",
+		"@emotion/styled": "^11.13.0",
 		"@mapbox/mapbox-gl-draw": "^1.4.3",
 		"@mapbox/mapbox-gl-sync-move": "^0.3.1",
-		"@mui/icons-material": "^5.15.9",
-		"@mui/material": "^5.15.9",
+		"@mui/icons-material": "^6.1.1",
+		"@mui/material": "^6.1.1",
+		"@reduxjs/toolkit": "^2.0.1",
 		"@tmcw/togeojson": "^5.8.1",
 		"@turf/turf": "^6.5.0",
 		"@types/d3": "^7.4.3",
@@ -44,6 +45,9 @@
 		"pako": "^2.1.0",
 		"react-color": "^2.19.3",
 		"react-moveable": "^0.56.0",
+		"react-redux": "^9.1.2",
+		"redux": "^5.0.1",
+		"redux-thunk": "^3.1.0",
 		"three": "^0.161.0",
 		"topojson-client": "^3.1.0",
 		"uuid": "^9.0.1",