@mapcomponents/react-maplibre 0.1.62 → 0.1.64

package/scripts/start.js

@@ -1,166 +0,0 @@
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-
-const fs = require('fs');
-const chalk = require('react-dev-utils/chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('react-dev-utils/clearConsole');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const {
-  choosePort,
-  createCompiler,
-  prepareProxy,
-  prepareUrls,
-} = require('react-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('react-dev-utils/openBrowser');
-const semver = require('semver');
-const paths = require('../config/paths');
-const configFactory = require('../config/webpack.config');
-const createDevServerConfig = require('../config/webpackDevServer.config');
-const getClientEnvironment = require('../config/env');
-const react = require(require.resolve('react', { paths: [paths.appPath] }));
-
-const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
-const useYarn = fs.existsSync(paths.yarnLockFile);
-const isInteractive = process.stdout.isTTY;
-
-// Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
-  process.exit(1);
-}
-
-// Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
-const HOST = process.env.HOST || '0.0.0.0';
-
-if (process.env.HOST) {
-  console.log(
-    chalk.cyan(
-      `Attempting to bind to HOST environment variable: ${chalk.yellow(
-        chalk.bold(process.env.HOST)
-      )}`
-    )
-  );
-  console.log(
-    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
-  );
-  console.log(
-    `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
-  );
-  console.log();
-}
-
-// We require that you explicitly set browsers and do not fall back to
-// browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
-checkBrowsers(paths.appPath, isInteractive)
-  .then(() => {
-    // We attempt to use the default port but if it is busy, we offer the user to
-    // run on a different port. `choosePort()` Promise resolves to the next free port.
-    return choosePort(HOST, DEFAULT_PORT);
-  })
-  .then(port => {
-    if (port == null) {
-      // We have not found a port.
-      return;
-    }
-
-    const config = configFactory('development');
-    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-    const appName = require(paths.appPackageJson).name;
-
-    const useTypeScript = fs.existsSync(paths.appTsConfig);
-    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
-    const urls = prepareUrls(
-      protocol,
-      HOST,
-      port,
-      paths.publicUrlOrPath.slice(0, -1)
-    );
-    const devSocket = {
-      warnings: warnings =>
-        devServer.sockWrite(devServer.sockets, 'warnings', warnings),
-      errors: errors =>
-        devServer.sockWrite(devServer.sockets, 'errors', errors),
-    };
-    // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler({
-      appName,
-      config,
-      devSocket,
-      urls,
-      useYarn,
-      useTypeScript,
-      tscCompileOnError,
-      webpack,
-    });
-    // Load proxy config
-    const proxySetting = require(paths.appPackageJson).proxy;
-    const proxyConfig = prepareProxy(
-      proxySetting,
-      paths.appPublic,
-      paths.publicUrlOrPath
-    );
-    // Serve webpack assets generated by the compiler over a web server.
-    const serverConfig = createDevServerConfig(
-      proxyConfig,
-      urls.lanUrlForConfig
-    );
-    const devServer = new WebpackDevServer(compiler, serverConfig);
-    // Launch WebpackDevServer.
-    devServer.listen(port, HOST, err => {
-      if (err) {
-        return console.log(err);
-      }
-      if (isInteractive) {
-        clearConsole();
-      }
-
-      if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
-        console.log(
-          chalk.yellow(
-            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
-          )
-        );
-      }
-
-      console.log(chalk.cyan('Starting the development server...\n'));
-      openBrowser(urls.localUrlForBrowser);
-    });
-
-    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
-      process.on(sig, function () {
-        devServer.close();
-        process.exit();
-      });
-    });
-
-    if (process.env.CI !== 'true') {
-      // Gracefully exit when stdin ends
-      process.stdin.on('end', function () {
-        devServer.close();
-        process.exit();
-      });
-    }
-  })
-  .catch(err => {
-    if (err && err.message) {
-      console.log(err.message);
-    }
-    process.exit(1);
-  });

package/src/components/MlGPXViewer/MlGPXViewer.stories.js

@@ -1,31 +0,0 @@
-import React from "react";
-
-import MlGPXViewer from "./MlGPXViewer";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-import GeoJsonProvider from "./util/GeoJsonProvider";
-
-const storyoptions = {
-	title: "MapComponents/MlGPXViewer",
-	component: MlGPXViewer,
-	argTypes: {
-		options: {
-			control: {
-				type: "object",
-			},
-		},
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (args) => (
-	<>
-		<GeoJsonProvider>
-			<MlGPXViewer />
-		</GeoJsonProvider>
-	</>
-);
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};

package/src/components/MlGPXViewer/MlGPXViewer.test.js

@@ -1,28 +0,0 @@
-import { layerRemovalTest, sourceRemovalTest } from "../../util";
-
-import MlGPXViewer from "./MlGPXViewer";
-
-const testComponent = <MlGPXViewer />;
-
-let sourceTestParams = [
-	"<MlGPXViewer />",
-	testComponent,
-	/^.*\"import\-source\".*$/,
-	"import-source",
-];
-let layer1TestParams = [
-	"<MlGPXViewer />",
-	testComponent,
-	/^.*\"importer\-layer\-lines\".*$/,
-	"importer-layer-lines",
-];
-let layer2TestParams = [
-	"<MlGPXViewer />",
-	testComponent,
-	/^.*\"importer\-layer\-points\".*$/,
-	"importer-layer-points",
-];
-
-layerRemovalTest(...layer1TestParams);
-layerRemovalTest(...layer2TestParams);
-sourceRemovalTest(...sourceTestParams);

package/src/components/MlGPXViewer/MlGPXViewer.tsx

@@ -1,377 +0,0 @@
-import React, { useContext, useRef, useEffect, useState } from "react";
-import { bbox } from '@turf/turf';
-import Divider from "@mui/material/Divider";
-import Typography from "@mui/material/Typography";
-import Drawer from "@mui/material/Drawer";
-import IconButton from "@mui/material/IconButton";
-import InfoIcon from "@mui/icons-material/Info";
-import FileCopy from "@mui/icons-material/FileCopy";
-import { Popup, LngLatBoundsLike, GeoJSONSource } from "maplibre-gl";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemText from "@mui/material/ListItemText";
-import GeoJsonContext from "./util/GeoJsonContext";
-import toGeoJSON from "./gpxConverter";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import useMap from "../../hooks/useMap";
-
-interface MlGPXViewerProps {
-
-	/**
-	 * Id of the target MapLibre instance in mapHook
-	 */
-	mapId?: string,
-	/**
-	 * The layerId of an existing layer this layer should be rendered visually beneath
-	 * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
-	 */
-	insertBeforeLayer?: string,
-	/**
-	 * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
-	 */
-	idPrefix?: string,
-	/**
-	 * Sets the layers layout-property "visibility" to "none" if false or "visible" if true
-	 */
-	visible?: boolean,
-}
-
-/**
- * MlGPXViewer returns a dropzone and a button to load a GPX Track into the map.
- */
-const MlGPXViewer = (props:MlGPXViewerProps) => {
-	const dataSource = useContext(GeoJsonContext);
-	const initializedRef = useRef(false);
-	const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
-	const sourceName = "import-source";
-	const layerNameLines = "importer-layer-lines";
-	const layerNamePoints = "importer-layer-points";
-
-	const [open, setIsOpen] = useState(false);
-	const dropZone = useRef<HTMLDivElement>(null);
-	const [zIndex, setZIndex] = useState(0);
-	const [metaData, setMetaData] = useState<{ title: string; value: string; id: number; }[]>([]);
-	const fileupload = useRef<HTMLInputElement>(null);
-	const mediaIsMobile = useMediaQuery("(max-width:900px)");
-
-	const popup = useRef(
-		new Popup({
-			closeButton: false,
-			closeOnClick: true,
-		})
-	);
-
-	useEffect(() => {
-		if (!mapHook.map || initializedRef.current) return;
-
-		initializedRef.current = true;
-
-		mapHook.map.addSource(
-			sourceName,
-			{
-				type: "geojson",
-				data: dataSource.data,
-			},
-			mapHook.componentId
-		);
-		mapHook.map.addLayer(
-			{
-				id: layerNameLines,
-				source: sourceName,
-				type: "line",
-				paint: {
-					"line-width": 4,
-					"line-color": "rgba(212, 55, 23,0.5)",
-				},
-			},
-			props.insertBeforeLayer,
-			mapHook.componentId
-		);
-		mapHook.map.addLayer(
-			{
-				id: layerNamePoints,
-				source: sourceName,
-				type: "circle",
-				paint: {
-					"circle-color": "rgba(72, 77, 99,0.5)",
-					"circle-radius": 7,
-				},
-				filter: ["==", "$type", "Point"],
-			},
-			props.insertBeforeLayer,
-			mapHook.componentId
-		);
-
-		[layerNameLines, layerNamePoints].forEach((layerName) => {
-			if(!mapHook.map)return;
-
-			mapHook.map.map.setLayoutProperty(layerName, "visibility", "visible");
-		});
-		mapHook.map.on(
-			"mouseenter",
-			layerNamePoints,
-			(e:any) => {
-				if(!mapHook.map)return;
-				// Change the cursor style as a UI indicator.
-
-				const coordinates = e.features[0].geometry.coordinates.slice();
-				//const description = e.features[0].properties.desc;
-				const name = e.features[0].properties.name;
-
-				// Ensure that if the map is zoomed out such that multiple
-				// copies of the feature are visible, the popup appears
-				// over the copy being pointed to.
-				while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
-					coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
-				}
-
-				// Populate the popup and set its coordinates
-
-				// based on the feature found.
-				popup.current.setLngLat(coordinates).setHTML(name).addTo(mapHook.map.map);
-			},
-			mapHook.componentId
-		);
-
-		mapHook.map.on(
-			"mouseleave",
-			"places",
-			function () {
-				if(!mapHook.map)return;
-
-				mapHook.map.map.getCanvas().style.cursor = "";
-				popup.current.remove();
-			},
-			mapHook.componentId
-		);
-
-		mapHook.map.map.setZoom(10);
-	}, [mapHook.map]);
-
-	useEffect(() => {
-		const _dropZone = dropZone.current;
-		const raiseDropZoneAndStopDefault = (event:any) => {
-			setZIndex(1000);
-			stopDefault(event);
-		};
-		const lowerDropZone = () => {
-			setZIndex(0);
-		};
-		const lowerDropZoneAndStopDefault = (event:any) => {
-			setZIndex(0);
-			stopDefault(event);
-		};
-
-		window.addEventListener("dragenter", raiseDropZoneAndStopDefault);
-		window.addEventListener("dragover", stopDefault);
-
-		_dropZone?.addEventListener("dragleave", lowerDropZone);
-
-		window.addEventListener("drop", lowerDropZoneAndStopDefault);
-
-		return () => {
-			window.removeEventListener("dragenter", raiseDropZoneAndStopDefault);
-			window.removeEventListener("dragover", stopDefault);
-			_dropZone?.removeEventListener("dragleave", lowerDropZone);
-			window.removeEventListener("drop", lowerDropZoneAndStopDefault);
-		};
-	});
-
-	const stopDefault = (event:any) => {
-		event.preventDefault();
-		event.stopPropagation();
-	};
-
-	useEffect(() => {
-		if (!mapHook.map) return;
-
-		const visibility = props.visible ? "visible" : "none";
-
-		[layerNameLines, layerNamePoints].forEach((layerName) => {
-			if(!mapHook.map)return;
-
-			mapHook.map.map.setLayoutProperty(layerName, "visibility", visibility);
-		});
-	}, [props.visible]);
-
-	const dropHandler = (event:any) => {
-		event.preventDefault();
-
-		if (event.dataTransfer.items) {
-			if (event.dataTransfer.items.length > 1) {
-				return false;
-			}
-			// If dropped items aren't files, reject them
-			if (event.dataTransfer.items[0].kind === "file") {
-				const reader = new FileReader();
-				reader.onload = (payload:any) => {
-					if(!payload?.currentTarget?.result)return;
-
-					addGPXToMap(payload.currentTarget.result);
-				};
-				const file = event.dataTransfer.items[0].getAsFile();
-				reader.readAsText(file);
-			}
-		} else {
-			// Use DataTransfer interface to access the file(s)
-		}
-		return;
-	};
-
-	const addGPXToMap = (gpxAsString:string) => {
-		if (!mapHook.map || !dataSource.setData) return;
-
-		try {
-			setMetaData([]);
-			const domParser = new DOMParser();
-			const gpxDoc = domParser.parseFromString(gpxAsString, "application/xml");
-			const metadata = gpxDoc.querySelector("metadata");
-			metadata?.childNodes.forEach((node:Element) => {
-				let value = node.textContent;
-				const title = node.nodeName;
-
-				if (node.nodeName === "link") {
-					value = node.getAttribute("href");
-				}
-				if (!!value?.trim().length) {
-					const metaDatEntry = {
-						title: title,
-						value: value,
-						id: new Date().getTime(),
-					};
-					setMetaData((prevState) => [...prevState, metaDatEntry]);
-				}
-			});
-			const data = toGeoJSON.gpx(gpxDoc);
-			dataSource.setData(data);
-			(mapHook.map.map.getSource(sourceName) as GeoJSONSource).setData(data as GeoJSON);
-			const bounds = bbox(data);
-			mapHook.map.map.fitBounds(bounds as LngLatBoundsLike);
-		} catch (e) {
-			console.log(e);
-		}
-	};
-
-	const toogleDrawer = () => {
-		setIsOpen((prevState) => !prevState);
-	};
-
-	const fileUploadOnChange = () => {
-		if(!fileupload.current)return false;
-
-		const file = fileupload.current?.files?.[0];
-		if (!file) return false;
-		const reader = new FileReader();
-		reader.onload = (payload:any) => {
-			if(!payload)return;
-
-			addGPXToMap(payload.currentTarget.result);
-		};
-
-		reader.readAsText(file);
-
-		return;
-	};
-
-	const manualUpload = () => {
-		if(!fileupload.current)return;
-
-		fileupload.current.click();
-	};
-	return (
-		<>
-			<div
-				style={{
-					position: "fixed",
-					right: "5px",
-					bottom: mediaIsMobile ? "40px" : "25px",
-					display: "flex",
-					flexDirection: "column",
-					gap: "5px",
-					zIndex: 1000,
-				}}
-			>
-				<IconButton
-					onClick={manualUpload}
-					style={{
-						backgroundColor: "rgba(255,255,255,1)",
-					}}
-					size="large"
-				>
-					<input
-						ref={fileupload}
-						onChange={fileUploadOnChange}
-						type="file"
-						id="input"
-						multiple
-						style={{ display: "none" }}
-					></input>
-					<FileCopy />
-				</IconButton>
-				<IconButton
-					onClick={toogleDrawer}
-					style={{
-						backgroundColor: "rgba(255,255,255,1)",
-					}}
-					size="large"
-				>
-					<InfoIcon />
-				</IconButton>
-			</div>
-			<Drawer variant="persistent" anchor="left" open={open}>
-				<Typography
-					variant="h6"
-					style={{
-						textAlign: "center",
-						padding: "1em",
-					}}
-					noWrap
-				>
-					Informationen zur Route
-				</Typography>
-				<Divider />
-				<List>
-					{metaData.map((item) => (
-						<ListItem key={`item--${item.id}`}>
-							<ListItemText primary={item.value} />
-						</ListItem>
-					))}
-				</List>
-			</Drawer>
-			<div
-				onDrop={dropHandler}
-				ref={dropZone}
-				style={{
-					position: "absolute",
-					left: "0",
-					top: "0",
-					backgroundColor: "rgba(255,255,255,0.5)",
-					width: "100%",
-					height: "100%",
-					zIndex: zIndex,
-				}}
-			>
-				<Typography
-					variant="h6"
-					style={{
-						top: "50%",
-						position: "absolute",
-						left: "50%",
-						msTransform: "translate(-50%, -50%)",
-						transform: " translate(-50%, -50%)",
-					}}
-					noWrap
-				>
-					Gpx-Datei ablegen
-				</Typography>
-			</div>
-		</>
-	);
-};
-
-MlGPXViewer.defaultProps = {
-	visible: true,
-};
-
-
-export default MlGPXViewer;

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.stories.js

@@ -1,66 +0,0 @@
-import React from "react";
-
-import MlGeoJsonLayer from "./MlGeoJsonLayer";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-
-import sample_geojson_1 from "./assets/sample_1.json";
-import sample_polygon_geojson_1 from "./assets/sample_polygon_1.json";
-
-console.log(sample_polygon_geojson_1);
-const storyoptions = {
-	title: "MapComponents/MlGeoJsonLayer",
-	component: MlGeoJsonLayer,
-	argTypes: {
-	},
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (props) => {
-	return (
-		<>
-			<MlGeoJsonLayer {...props} />
-		</>
-	);
-};
-const LinestringTemplate = (props) => {
-	return (
-		<>
-			<MlGeoJsonLayer type="line" geojson={sample_geojson_1} />
-		</>
-	);
-};
-
-export const Linestring = LinestringTemplate.bind({});
-Linestring.parameters = {};
-Linestring.args = {
-	type:''
-};
-
-export const Polygon = Template.bind({});
-Polygon.parameters = {};
-Polygon.args = {
-	geojson: sample_polygon_geojson_1,
-	paint:{
-		"fill-color": 'rgba(120,20,80,.5)'
-	},
-	type:''
-};
-export const DefaultPaintOverrides = Template.bind({});
-DefaultPaintOverrides.parameters = {};
-DefaultPaintOverrides.args = {
-	defaultPaintOverrides: {
-		fill: {
-			"fill-color": "blue",
-		},
-		circle: {
-			"circle-color": "red",
-		},
-		line: {
-			"line-color": "black",
-		},
-	},
-	geojson: sample_polygon_geojson_1,
-	type:''
-};

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.stories.js

@@ -1,45 +0,0 @@
-import React from "react";
-
-import MlImageMarkerLayer from "./MlImageMarkerLayer";
-
-import mapContextDecorator from "../../decorators/MapContextDecorator";
-import wgMarker from "./assets/wg-marker.png";
-
-const storyoptions = {
-	title: "MapComponents/MlImageMarkerLayer",
-	component: MlImageMarkerLayer,
-	argTypes: { },
-	decorators: mapContextDecorator,
-};
-export default storyoptions;
-
-const Template = (args) => (
-	<MlImageMarkerLayer
-		options={{
-			type: "symbol",
-			source: {
-				type: "geojson",
-				data: {
-					type: "Feature",
-					properties: {
-						id: "test",
-					},
-					geometry: {
-						type: "Point",
-						coordinates: [7.0847929969609424, 50.73855193187643],
-					},
-				},
-			},
-			layout: {
-				"icon-allow-overlap": true,
-				"icon-size": 0.14,
-				"icon-offset": [0, -180],
-			},
-		}}
-		imgSrc={wgMarker}
-	/>
-);
-
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {};