@eightshift/frontend-libs-tailwind 1.0.0

package/blocks/init/src/Blocks/custom/map/assets/utils.js

@@ -0,0 +1,161 @@
+import { OSM, Vector as VectorSource, VectorTile as VectorTileSource, XYZ, TileJSON } from 'ol/source';
+import { Tile as TileLayer, Vector as VectorLayer, VectorTile as VectorTileLayer } from 'ol/layer';
+import { MapboxVectorLayer } from 'ol-mapbox-style';
+import OLVectorTileLayer from 'ol/layer/VectorTile';
+import { MVT, GeoJSON } from 'ol/format';
+
+import OLAttribution from 'ol/control/Attribution.js';
+import OLFullScreen from 'ol/control/FullScreen.js';
+import OLMousePosition from 'ol/control/MousePosition.js';
+import OLOverviewMap from 'ol/control/OverviewMap.js';
+import OLRotate from 'ol/control/Rotate.js';
+import OLScaleLine from 'ol/control/ScaleLine.js';
+import OLZoomSlider from 'ol/control/ZoomSlider.js';
+import OLZoomToExtent from 'ol/control/ZoomToExtent.js';
+import OLZoom from 'ol/control/Zoom.js';
+
+import { applyStyle as OLMBStyleApply } from 'ol-mapbox-style';
+
+import { Style, Fill, Stroke, Icon } from 'ol/style';
+
+import manifest from '../manifest.json';
+
+export const processMapInteraction = (type, options = {}) => {
+	switch (type) {
+		case 'attribution':
+			return new OLAttribution(options);
+		case 'fullScreen':
+			return new OLFullScreen(options);
+		case 'mousePosition':
+			return new OLMousePosition(options);
+		case 'overviewMap':
+			return new OLOverviewMap(
+				Object.keys(options).length > 0
+					? options
+					: {
+							layers: [new TileLayer({ source: new OSM() })],
+							mapOptions: {
+								maxResolution: 0.0015,
+								numZoomLevels: 2,
+							},
+						},
+			);
+		case 'rotate':
+			return new OLRotate(options);
+		case 'scaleLine':
+			return new OLScaleLine(options);
+		case 'zoomSlider':
+			return new OLZoomSlider(options);
+		case 'zoomToExtent':
+			return new OLZoomToExtent(options);
+		case 'zoom':
+			return new OLZoom(options);
+		default:
+			return null;
+	}
+};
+
+export const processMapLayer = (layer) => {
+	if (layer?.type === 'vectorJson') {
+		const mapLayer = new OLVectorTileLayer({ declutter: true });
+		OLMBStyleApply(mapLayer, layer?.styleUrl, { accessToken: layer?.apiKey });
+
+		return mapLayer;
+	}
+
+	switch (layer?.type) {
+		case 'openStreetMap':
+			return new TileLayer({
+				source: new OSM(),
+			});
+		case 'mapBoxVector':
+			if (!layer?.apiKey) {
+				return null;
+			}
+
+			return new MapboxVectorLayer({
+				styleUrl: layer?.styleUrl,
+				accessToken: layer?.apiKey,
+			});
+		case 'mapBoxRaster':
+			if (!layer?.apiKey) {
+				return null;
+			}
+
+			return new TileLayer({
+				source: new XYZ({
+					url: layer?.styleUrl,
+				}),
+			});
+		case 'mapTilerVector':
+			if (!layer?.apiKey) {
+				return null;
+			}
+
+			return new VectorTileLayer({
+				source: new VectorTileSource({
+					format: new MVT(),
+					url: layer?.styleUrl,
+				}),
+			});
+		case 'mapTilerRasterXyz':
+			if (!layer?.apiKey) {
+				return null;
+			}
+
+			return new TileLayer({
+				source: new XYZ({
+					url: layer?.styleUrl,
+				}),
+			});
+		case 'mapTilerRasterJson':
+			if (!layer?.apiKey) {
+				return null;
+			}
+
+			return new TileLayer({
+				source: new TileJSON({
+					url: layer?.styleUrl,
+				}),
+			});
+		case 'geoJson':
+			if (!layer?.geoJsonUrl) {
+				return null;
+			}
+
+			return new VectorLayer({
+				source: new VectorSource({
+					format: new GeoJSON(),
+					url: layer?.geoJsonUrl,
+				}),
+				// Stylize GeoJSON features based on type.
+				style: (feature, resolution) => {
+					const name = feature.getGeometry().getType();
+
+					if (name === 'Point') {
+						return new Style({
+							image: new Icon({
+								src: manifest.resources.markerIcon,
+								scale: 2 / Math.pow(resolution, 1 / 4),
+								displacement: [0, 15 / Math.pow(resolution, 1 / 4)],
+							}),
+						});
+					}
+
+					return new Style({
+						fill: new Fill({
+							color: 'rgb(58 102 168 / 0.25)',
+						}),
+						stroke: new Stroke({
+							color: '#3A66A8',
+							lineJoin: 'round',
+							lineCap: 'round',
+							width: 2.5,
+						}),
+					});
+				},
+			});
+	}
+
+	return null;
+};

package/blocks/init/src/Blocks/custom/map/components/map-components.js

@@ -0,0 +1,403 @@
+/* eslint-disable consistent-return */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import React, { createContext, useRef, useState, useEffect, useContext } from 'react';
+import { Map as OLMap, View } from 'ol';
+import { OSM, Vector as VectorSource, VectorTile as VectorTileSource, XYZ, TileJSON } from 'ol/source';
+import { Tile as OLTileLayer, Vector as OLVectorLayer, VectorTile as OLVectorTile } from 'ol/layer';
+import { MapboxVectorLayer } from 'ol-mapbox-style';
+import OLVectorTileLayer from 'ol/layer/VectorTile';
+import { useGeographic } from 'ol/proj';
+import { MVT, GeoJSON } from 'ol/format';
+import { defaults as OLDefaultInteractions } from 'ol/interaction/defaults';
+import { defaults as OLDefaultControls } from 'ol/control/defaults';
+
+import OLAttribution from 'ol/control/Attribution.js';
+import OLFullScreen from 'ol/control/FullScreen.js';
+import OLMousePosition from 'ol/control/MousePosition.js';
+import OLOverviewMap from 'ol/control/OverviewMap.js';
+import OLRotate from 'ol/control/Rotate.js';
+import OLScaleLine from 'ol/control/ScaleLine.js';
+import OLZoomSlider from 'ol/control/ZoomSlider.js';
+import OLZoomToExtent from 'ol/control/ZoomToExtent.js';
+import OLZoom from 'ol/control/Zoom.js';
+
+import { applyStyle as OLMBStyleApply } from 'ol-mapbox-style';
+
+import { Style, Fill, Stroke, Icon } from 'ol/style';
+
+import manifest from '../manifest.json';
+import { getTwClasses } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const MapContext = new createContext();
+
+export const OpenLayersMap = ({ children, zoom, center, attributes, manifest }) => {
+	const mapRef = useRef();
+	const [map, setMap] = useState(null);
+
+	// Map init.
+	useEffect(() => {
+		useGeographic();
+
+		let options = {
+			view: new View({ zoom, center }),
+			layers: [],
+			interactions: [],
+			controls: [],
+		};
+
+		const mapObject = new OLMap(options);
+		mapObject.setTarget(mapRef.current);
+		setMap(mapObject);
+
+		return () => mapObject.setTarget(undefined);
+	}, []);
+
+	// Default zoom level change.
+	useEffect(() => {
+		if (!map) {
+			return;
+		}
+
+		map.getView().setZoom(zoom);
+	}, [zoom]);
+
+	// Default center point change.
+	useEffect(() => {
+		if (!map) {
+			return;
+		}
+
+		map.getView().setCenter(center);
+	}, [center]);
+
+	return (
+		<MapContext.Provider value={{ map }}>
+			<div
+				ref={mapRef}
+				className={getTwClasses(attributes, manifest)}
+			>
+				{children}
+			</div>
+		</MapContext.Provider>
+	);
+};
+
+export const Layers = ({ children }) => children;
+export const Interactions = ({ children }) => children;
+export const Overlays = ({ children }) => children;
+export const Controls = ({ children }) => children;
+
+export const MapLayer = (props) => {
+	const { type = 'tile', source, accessToken, styleUrl, style } = props;
+
+	const { map } = useContext(MapContext);
+
+	useEffect(() => {
+		if (!map) {
+			return;
+		}
+
+		let tileLayer;
+
+		switch (type) {
+			case 'mapboxVector':
+				tileLayer = new MapboxVectorLayer({
+					styleUrl,
+					accessToken,
+				});
+				break;
+			case 'vectorJson':
+				tileLayer = new OLVectorTileLayer({ declutter: true });
+				break;
+			case 'vectorTile':
+				tileLayer = new OLVectorTile({
+					source,
+				});
+				break;
+			case 'vector':
+				tileLayer = new OLVectorLayer({
+					source,
+					style,
+				});
+				break;
+			default:
+				tileLayer = new OLTileLayer({
+					source,
+				});
+				break;
+		}
+
+		if (type === 'vectorJson') {
+			OLMBStyleApply(tileLayer, styleUrl, { accessToken: accessToken });
+		}
+
+		map.addLayer(tileLayer);
+
+		return () => {
+			if (map) {
+				map.removeLayer(tileLayer);
+			}
+		};
+	}, [map]);
+	return null;
+};
+
+export const MapInteraction = (props) => {
+	const { type = 'defaults', options = {} } = props;
+
+	const { map } = useContext(MapContext);
+
+	useEffect(() => {
+		if (!map) {
+			return;
+		}
+
+		let interaction;
+
+		switch (type) {
+			default:
+				interaction = OLDefaultInteractions(options).getArray();
+				break;
+		}
+
+		if (Array.isArray(interaction)) {
+			interaction.forEach((i) => map.addInteraction(i));
+		} else {
+			map.addInteraction(interaction);
+		}
+
+		return () => {
+			if (map) {
+				if (Array.isArray(interaction)) {
+					interaction.forEach((i) => map.removeInteraction(i));
+				} else {
+					map.removeInteraction(interaction);
+				}
+			}
+		};
+	}, [map]);
+	return null;
+};
+
+export const MapControl = (props) => {
+	const { type = 'defaults', options = {} } = props;
+
+	const { map } = useContext(MapContext);
+
+	useEffect(() => {
+		if (!map) {
+			return;
+		}
+
+		let control;
+
+		switch (type) {
+			case 'attribution':
+				control = new OLAttribution(options);
+				break;
+			case 'fullScreen':
+				control = new OLFullScreen(options);
+				break;
+			case 'mousePosition':
+				control = new OLMousePosition(options);
+				break;
+			case 'overviewMap':
+				control = new OLOverviewMap(
+					Object.keys(options).length > 0
+						? options
+						: {
+								layers: [new OLTileLayer({ source: new OSM() })],
+								mapOptions: {
+									maxResolution: 0.0015,
+									numZoomLevels: 2,
+								},
+							},
+				);
+				break;
+			case 'rotate':
+				control = new OLRotate(options);
+				break;
+			case 'scaleLine':
+				control = new OLScaleLine(options);
+				break;
+			case 'zoomSlider':
+				control = new OLZoomSlider(options);
+				break;
+			case 'zoomToExtent':
+				control = new OLZoomToExtent(options);
+				break;
+			case 'zoom':
+				control = new OLZoom(options);
+				break;
+			default:
+				control = OLDefaultControls(options).getArray();
+				break;
+		}
+
+		if (Array.isArray(control)) {
+			control.forEach((i) => map.addControl(i));
+		} else {
+			map.addControl(control);
+		}
+
+		return () => {
+			if (map) {
+				if (Array.isArray(control)) {
+					control.forEach((i) => map.removeControl(i));
+				} else {
+					map.removeControl(control);
+				}
+			}
+		};
+	}, [map]);
+	return null;
+};
+
+export const processMapLayer = (layer) => {
+	if (layer?.hidden) {
+		return null;
+	}
+
+	switch (layer?.type) {
+		case 'openStreetMap':
+			return <MapLayer source={new OSM()} />;
+		case 'mapBoxVector':
+			if (!layer?.apiKey || layer?.styleUrl?.length < 1) {
+				return null;
+			}
+
+			return (
+				<MapLayer
+					key={layer?.id ?? Math.random()}
+					type='mapboxVector'
+					styleUrl={layer?.styleUrl}
+					accessToken={layer?.apiKey}
+				/>
+			);
+		case 'mapBoxRaster':
+			if (!layer?.apiKey || layer?.styleUrl?.length < 1) {
+				return null;
+			}
+
+			return (
+				<MapLayer
+					key={layer?.id ?? Math.random()}
+					source={
+						new XYZ({
+							url: layer?.styleUrl,
+						})
+					}
+				/>
+			);
+		case 'mapTilerVector':
+			if (!layer?.apiKey || layer?.styleUrl?.length < 1) {
+				return null;
+			}
+
+			return (
+				<MapLayer
+					key={layer?.id ?? Math.random()}
+					type='vectorTile'
+					source={
+						new VectorTileSource({
+							format: new MVT(),
+							url: layer?.styleUrl,
+						})
+					}
+				/>
+			);
+
+		case 'vectorJson':
+			if (!layer?.apiKey || layer?.styleUrl?.length < 1) {
+				return null;
+			}
+
+			return (
+				<MapLayer
+					key={layer?.id ?? Math.random()}
+					type='vectorJson'
+					styleUrl={layer?.styleUrl}
+					accessToken={layer?.apiKey}
+				/>
+			);
+
+		case 'mapTilerRasterXyz':
+			if (!layer?.apiKey || layer?.styleUrl?.length < 1) {
+				return null;
+			}
+
+			return (
+				<MapLayer
+					key={layer?.id ?? Math.random()}
+					source={
+						new XYZ({
+							url: layer?.styleUrl,
+						})
+					}
+				/>
+			);
+
+		case 'mapTilerRasterJson':
+			if (!layer?.apiKey) {
+				return null;
+			}
+
+			return (
+				<MapLayer
+					key={layer?.id ?? Math.random()}
+					source={
+						new TileJSON({
+							url: layer?.styleUrl,
+						})
+					}
+				/>
+			);
+
+		case 'geoJson':
+			if (!layer?.geoJsonUrl) {
+				return null;
+			}
+
+			return (
+				<MapLayer
+					key={layer?.id ?? Math.random()}
+					type='vector'
+					source={
+						new VectorSource({
+							format: new GeoJSON(),
+							url: layer?.geoJsonUrl,
+						})
+					}
+					// Stylize GeoJSON features based on type.
+					style={(feature, resolution) => {
+						const name = feature.getGeometry().getType();
+
+						if (name === 'Point') {
+							return new Style({
+								image: new Icon({
+									src: manifest.resources.markerIcon,
+									scale: 2 / Math.pow(resolution, 1 / 4),
+									displacement: [0, 15 / Math.pow(resolution, 1 / 4)],
+								}),
+							});
+						}
+
+						return new Style({
+							fill: new Fill({
+								color: 'rgb(58 102 168 / 0.25)',
+							}),
+							stroke: new Stroke({
+								color: '#3A66A8',
+								lineJoin: 'round',
+								lineCap: 'round',
+								width: 2.5,
+							}),
+						});
+					}}
+				/>
+			);
+	}
+
+	return null;
+};

package/blocks/init/src/Blocks/custom/map/components/map-editor.js

@@ -0,0 +1,56 @@
+import { checkAttr } from '@eightshift/frontend-libs-tailwind/scripts';
+import {
+	Interactions,
+	Layers,
+	MapInteraction,
+	OpenLayersMap,
+	Controls,
+	MapControl,
+	processMapLayer,
+} from './map-components';
+import manifest from '../manifest.json';
+
+export const MapEditor = ({ attributes }) => {
+	const mapLayers = checkAttr('mapLayers', attributes, manifest);
+	const mapCenterLat = checkAttr('mapCenterLat', attributes, manifest, true);
+	const mapCenterLon = checkAttr('mapCenterLon', attributes, manifest, true);
+	const mapZoom = checkAttr('mapZoom', attributes, manifest);
+	const mapInteractions = checkAttr('mapInteractions', attributes, manifest);
+	const mapControls = checkAttr('mapControls', attributes, manifest);
+
+	return (
+		<OpenLayersMap
+			attributes={attributes}
+			manifest={manifest}
+			center={[mapCenterLon ?? 16.352532, mapCenterLat ?? 46.314045]}
+			zoom={mapZoom}
+		>
+			<Layers key={mapLayers.map(({ id, type }) => `${id}-${type}`).join(',')}>
+				{[...mapLayers].reverse().map((layer) => processMapLayer(layer))}
+			</Layers>
+
+			<Interactions>
+				<MapInteraction
+					key={Math.random()}
+					type='defaults'
+					options={mapInteractions}
+				/>
+			</Interactions>
+
+			<Controls>
+				{Object.entries(mapControls).map(([type, use]) => {
+					if (!use) {
+						return null;
+					}
+
+					return (
+						<MapControl
+							key={Math.random()}
+							type={type}
+						/>
+					);
+				})}
+			</Controls>
+		</OpenLayersMap>
+	);
+};