Feature/demos optimierung

dist/components/MlFeatureEditor/MlFeatureEditor.stories.d.ts

@@ -1,10 +1,10 @@
 export default storyoptions;
 export const EditPolygon: any;
 export const EditPoint: any;
-export const EditLineString: any;
+export const EditLinestring: any;
 export const DrawPolygon: any;
 export const DrawPoint: any;
-export const DrawLineString: any;
+export const DrawLinestring: any;
 declare namespace storyoptions {
  export const title: string;
  export { MlFeatureEditor as component };

dist/components/MlNavigationTools/MlNavigationTools.stories.d.ts

@@ -1,6 +1,6 @@
 export default storyoptions;
 export const DefaultConfig: any;
-export const No3DButton: any;
+export const No3dButton: any;
 export const ShowCenterLocationButton: any;
 export const AlterToolPosition: any;
 export const NoZoomButtons: any;

package.json

@@ -22,7 +22,7 @@
  "@emotion/css": "^11.10.5",
  "@emotion/react": "^11.10.8",
  "@emotion/styled": "^11.10.8",
- "@mapbox/mapbox-gl-draw": "^1.4.0",
+ "@mapbox/mapbox-gl-draw": "^1.4.2",
  "@mapbox/mapbox-gl-sync-move": "^0.3.1",
  "@mui/icons-material": "^5.11.0",
  "@mui/material": "^5.12.3",

src/components/MlCenterPosition/MlCenterPosition.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from "react";
 import useMap from "../../hooks/useMap";
 import { Button, SxProps, Theme } from '@mui/material';
-import GpsFixedIcon from '@mui/icons-material/GpsFixed';
+import FilterCenterFocusIcon from '@mui/icons-material/FilterCenterFocus';
 
 export interface MlCenterPositionProps {
  /**
@@ -65,7 +65,7 @@ const MlCenterPosition = (props: MlCenterPositionProps) => {
  onClick={centerCurrentLocation}
  disabled={locationAccessDenied}
  >
- <GpsFixedIcon sx={{ fontSize: { xs: '1.4em', md: '1em' } }} />
+ <FilterCenterFocusIcon sx={{ fontSize: { xs: '1.4em', md: '1em' } }} />
  </Button>
  </>
  );

src/components/MlCreatePdfForm/MlCreatePdfForm.meta.json

@@ -8,7 +8,7 @@
  "description": "Erzeugt eine PDF Datei aus der aktuellen Vorschau, mit anpassbarem Position, Format, Rotation und Auflösung."
  }
  },
- "tags": [],
- "category": "",
+ "tags": ["Map add-on"],
+ "category": "add-ons",
  "type": "component"
 }

src/components/MlFeatureEditor/MlFeatureEditor.stories.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from 'react';
+import { Button } from '@mui/material';
+import MlFeatureEditor from './MlFeatureEditor';
+import mapContextDecorator from '../../decorators/MapContextDecorator';
+import TopToolbar from '../../ui_components/TopToolbar';
+import { useFeatureEditorProps } from 'src/hooks/useFeatureEditor/useFeatureEditor';
+
+const storyoptions = {
+ title: 'MapComponents/MlFeatureEditor',
+ component: MlFeatureEditor,
+ argTypes: {},
+ decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+
+
+const Template = (args: useFeatureEditorProps) => {
+
+
+ const [visible, setVisible] = useState(true);
+
+ useEffect(() => {
+ if (visible === false) {
+ setTimeout(() => {
+ setVisible(true);
+ }, 750);
+ }
+ }, [visible]);
+
+ return (
+ <>
+ <TopToolbar
+ unmovableButtons={
+ <Button
+ variant={ visible ? 'contained' : 'outlined'}
+ onClick={() => {
+ setVisible(false);
+ }}
+ sx={{ marginRight: { xs: '0px', sm: '10px' } }}
+ >
+ Restart
+ </Button>
+ }
+ />
+ {visible && (
+ <MlFeatureEditor
+ {...args}
+ onChange={(features) => {
+ console.log(features);
+ }}
+ />
+ )}
+ </>
+ );
+};
+
+export const EditPolygon = Template.bind({});
+EditPolygon.args = {
+ mode: 'simple_select',
+ geojson: {
+ type: 'Feature',
+ properties: {},
+ geometry: {
+ coordinates: [
+ [
+ [7.0904979943736635, 50.73948334574527],
+ [7.087554458473562, 50.73827346433987],
+ [7.093562913197076, 50.73723639825727],
+ [7.096294028980594, 50.7387727842636],
+ [7.0904979943736635, 50.73948334574527],
+ ],
+ ],
+ type: 'Polygon',
+ },
+ },
+};
+
+export const EditPoint = Template.bind({});
+EditPoint.args = {
+ mode: 'simple_select',
+ geojson: {
+ type: 'Feature',
+ properties: {},
+ geometry: {
+ type: 'Point',
+ coordinates: [7.0851268, 50.73884],
+ },
+ },
+};
+
+export const EditLinestring = Template.bind({});
+EditLinestring.args = {
+ mode: 'simple_select',
+ geojson: {
+ type: 'Feature',
+ properties: {},
+ geometry: {
+ coordinates: [
+ [7.0904979943736635, 50.73948334574527],
+ [7.087554458473562, 50.73827346433987],
+ [7.093562913197076, 50.73723639825727],
+ [7.096294028980594, 50.7387727842636],
+ ],
+ type: 'LineString',
+ },
+ },
+};
+
+export const DrawPolygon = Template.bind({});
+DrawPolygon.args = {
+ mode: 'draw_polygon',
+};
+
+export const DrawPoint = Template.bind({});
+DrawPoint.args = {
+ mode: 'draw_point',
+};
+
+export const DrawLinestring = Template.bind({});
+DrawLinestring.args = {
+ mode: 'draw_line_string',
+};

src/components/MlFeatureEditor/MlFeatureEditor.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import useFeatureEditor, { useFeatureEditorProps } from '../../hooks/useFeatureEditor';
+import useFeatureEditor, { useFeatureEditorProps } from '../../hooks/useFeatureEditor/useFeatureEditor';
 import './MlFeatureEditor.css';
 
 const MlFeatureEditor: React.FC<useFeatureEditorProps> = (props) => {

src/components/MlFollowGps/MlFollowGps.meta.json

@@ -8,7 +8,7 @@
  "description": "Darstellung der aktuellen Position und Blickrichtung"
  }
  },
- "tags": [],
- "category": "",
+ "tags": ["Map add-on"],
+ "category": "add-ons",
  "type": "component"
 }

src/components/MlFollowGps/MlFollowGps.tsx

@@ -1,12 +1,22 @@
-import React, { useRef, useEffect, useState, useCallback, useMemo } from "react";
-import useMap from "../../hooks/useMap";
-import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
+import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import useMap from '../../hooks/useMap';
+import MlGeoJsonLayer from '../MlGeoJsonLayer/MlGeoJsonLayer';
 
 import { Button } from '@mui/material';
 import GpsFixedIcon from '@mui/icons-material/GpsFixed';
 
-import { point, circle, lineArc, Feature, Point } from '@turf/turf';
-import { CircleLayerSpecification, FillLayerSpecification } from 'maplibre-gl';
+import {
+ point,
+ circle,
+ lineArc,
+ Feature,
+ Point,
+ bbox,
+ booleanContains,
+ bboxPolygon,
+ BBox,
+} from '@turf/turf';
+import { CircleLayerSpecification, FillLayerSpecification, LngLatBoundsLike } from 'maplibre-gl';
 
 interface MlFollowGpsProps {
  /**
@@ -166,6 +176,29 @@ const MlFollowGps = (props: MlFollowGpsProps) => {
  return;
  }, [mapHook.map, isFollowed, getLocationSuccess]);
 
+ useEffect(() => {
+ if (accuracyGeoJson?.type) {
+ const getBounds = mapHook.map?.getBounds();
+ const actualBounds = [
+ getBounds?._ne.lng,
+ getBounds?._ne.lat,
+ getBounds?._sw.lng,
+ getBounds?._sw.lat,
+ ];
+ const accurancyBounds = bbox(accuracyGeoJson) as LngLatBoundsLike;
+ const contained = booleanContains(
+ bboxPolygon(actualBounds as BBox),
+ bboxPolygon(accurancyBounds as BBox) 
+ );
+
+ if (contained === false) {
+ mapHook.map?.fitBounds(accurancyBounds, {
+ padding: { top: 25, bottom: 25 },
+ });
+ }
+ }
+ }, [accuracyGeoJson]);
+
  return (
  <>
  {isFollowed && userLocationGeoJson && (

src/components/MlGeoJsonLayer/MlGeoJsonLayer.meta.json

@@ -8,7 +8,7 @@
  "description": "Stellt GeoJSON Objekte dar"
  }
  },
- "tags": [],
- "category": "",
+ "tags": ["Map layer"],
+ "category": "layer",
  "type": "component"
 }