raintee-maputils 1.0.19 → 1.0.21

package/css/ruler/index.css

@@ -0,0 +1,10 @@
+.mapbox-ctrl-ruler button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #333;
+}
+
+.mapbox-ctrl-ruler button.-active {
+	color: #4264fb;
+}

package/dist/index.js

@@ -826,6 +826,24 @@ var RainteeConstants = /*#__PURE__*/Object.freeze({
 });
 
 // index.ts
+var earthRadius = 63710088e-1;
+var factors = {
+  centimeters: earthRadius * 100,
+  centimetres: earthRadius * 100,
+  degrees: 360 / (2 * Math.PI),
+  feet: earthRadius * 3.28084,
+  inches: earthRadius * 39.37,
+  kilometers: earthRadius / 1e3,
+  kilometres: earthRadius / 1e3,
+  meters: earthRadius,
+  metres: earthRadius,
+  miles: earthRadius / 1609.344,
+  millimeters: earthRadius * 1e3,
+  millimetres: earthRadius * 1e3,
+  nauticalmiles: earthRadius / 1852,
+  radians: 1,
+  yards: earthRadius * 1.0936
+};
 function feature(geom, properties, options = {}) {
   const feat = { type: "Feature" };
   if (options.id === 0 || options.id) {
@@ -878,6 +896,36 @@ function multiPolygon(coordinates, properties, options = {}) {
   };
   return feature(geom, properties, options);
 }
+function radiansToLength(radians, units = "kilometers") {
+  const factor = factors[units];
+  if (!factor) {
+    throw new Error(units + " units is invalid");
+  }
+  return radians * factor;
+}
+function degreesToRadians(degrees) {
+  const normalisedDegrees = degrees % 360;
+  return normalisedDegrees * Math.PI / 180;
+}
+
+// index.ts
+function getCoord(coord) {
+  if (!coord) {
+    throw new Error("coord is required");
+  }
+  if (!Array.isArray(coord)) {
+    if (coord.type === "Feature" && coord.geometry !== null && coord.geometry.type === "Point") {
+      return [...coord.geometry.coordinates];
+    }
+    if (coord.type === "Point") {
+      return [...coord.coordinates];
+    }
+  }
+  if (Array.isArray(coord) && coord.length >= 2 && !Array.isArray(coord[0]) && !Array.isArray(coord[1])) {
+    return [...coord];
+  }
+  throw new Error("coord must be GeoJSON Point or an Array of numbers");
+}
 
 // index.js
 function coordEach(geojson, callback, excludeWrapCoord) {
@@ -5818,6 +5866,457 @@ var RainteeSourceMapTool = /*#__PURE__*/Object.freeze({
     treeDataAdapterNext: treeDataAdapterNext
 });
 
+/**
+ * Create mapbox control container
+ * @param {string} className
+ */
+function controlContainer(className) {
+	const container = document.createElement('div');
+	container.classList.add('mapboxgl-ctrl', 'mapboxgl-ctrl-group', className);
+	return container;
+}
+
+/**
+ * Create mapbox control button
+ * @param {Object} options
+ * @param {string=} options.title
+ * @param {Node=} options.icon
+ * @param {string=} options.textContent
+ * @param {boolean=} options.disabled
+ * @param {boolean=} options.hidden
+ * @param {string=} options.className
+ * @param {() => void=} options.onClick
+ */
+function controlButton(options = {}) {
+	const button = document.createElement('button');
+	button.type = 'button';
+	if (options.title) {
+		button.title = options.title;
+	}
+	if (options.icon) {
+		button.appendChild(options.icon);
+	}
+	if (options.textContent) {
+		button.textContent = options.textContent;
+	}
+	if (options.disabled) {
+		button.disabled = true;
+	}
+	if (options.hidden) {
+		button.hidden = true;
+	}
+	if (options.className) {
+		button.classList.add(options.className);
+	}
+	if (options.onClick) {
+		button.addEventListener('click', () => {
+			if (!options.onClick) return;
+			options.onClick();
+		});
+	}
+	return button;
+}
+
+/**
+ * Create SVG element from string code
+ * @param {string} string
+ */
+function parseSVG(string) {
+	return /** @type SVGElement */ ((new DOMParser().parseFromString(string, 'image/svg+xml')).firstChild);
+}
+
+function ruler() {
+	return parseSVG(`
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="23" height="23" fill="currentColor">
+				<rect fill="none" height="24" width="24"/>
+				<path d="M20,6H4C2.9,6,2,6.9,2,8v8c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M20,16H4V8h3v3c0,0.55,0.45,1,1,1h0 c0.55,0,1-0.45,1-1V8h2v3c0,0.55,0.45,1,1,1h0c0.55,0,1-0.45,1-1V8h2v3c0,0.55,0.45,1,1,1h0c0.55,0,1-0.45,1-1V8h3V16z"/>
+		</svg>
+	`);
+}
+
+const icons = {
+	ruler,
+};
+
+// index.ts
+function distance(from, to, options = {}) {
+  var coordinates1 = getCoord(from);
+  var coordinates2 = getCoord(to);
+  var dLat = degreesToRadians(coordinates2[1] - coordinates1[1]);
+  var dLon = degreesToRadians(coordinates2[0] - coordinates1[0]);
+  var lat1 = degreesToRadians(coordinates1[1]);
+  var lat2 = degreesToRadians(coordinates2[1]);
+  var a = Math.pow(Math.sin(dLat / 2), 2) + Math.pow(Math.sin(dLon / 2), 2) * Math.cos(lat1) * Math.cos(lat2);
+  return radiansToLength(
+    2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)),
+    options.units
+  );
+}
+var turf_distance_default = distance;
+
+/** @param {number} value */
+function defaultLabelFormat(value) {
+	return value < 1
+		? `${(value * 1000).toFixed()} m`
+		: `${value.toFixed(2)} km`;
+}
+
+const sources = {
+	line: 'mapbox-control-ruler-lines',
+	points: 'mapbox-control-ruler-points',
+};
+
+/**
+ * @param {[number, number][]} coordinates
+ * @returns {import('geojson').Feature<import('geojson').LineString>}
+ */
+function toGeoJSONLine(coordinates) {
+	return {
+		type: 'Feature',
+		properties: {},
+		geometry: {
+			type: 'LineString',
+			coordinates,
+		},
+	};
+}
+
+/**
+ * @param {[number, number][]} coordinates
+ * @param {{
+ *  units?: import('@turf/helpers').Units,
+ *  labelFormat?: (v: number) => string
+ * }} options
+ * @returns {import('geojson').FeatureCollection<import('geojson').Point>}
+ */
+function toGeoJSONPoints(coordinates, options = {}) {
+	const labelFormat = options.labelFormat ?? defaultLabelFormat;
+	const units = options.units ?? 'kilometers';
+	let sum = 0;
+	return {
+		type: 'FeatureCollection',
+		features: coordinates.map((coordinate, index) => {
+			if (index > 0) {
+				sum += turf_distance_default(coordinates[index - 1], coordinate, { units });
+			}
+			return {
+				type: 'Feature',
+				id: String(index),
+				properties: {
+					distance: labelFormat(sum),
+				},
+				geometry: {
+					type: 'Point',
+					coordinates: coordinate,
+				},
+			};
+		}),
+	};
+}
+
+/**
+ * @typedef {{
+ *  line: import('mapbox-gl').LineLayerSpecification
+ *  markers: import('mapbox-gl').CircleLayerSpecification
+ *  labels: import('mapbox-gl').SymbolLayerSpecification
+ * }} Layers
+ */
+
+/** @type {Layers} */
+const layers = {
+	line: {
+		id: 'mapbox-control-ruler-line',
+		type: 'line',
+		source: sources.line,
+		layout: {},
+		paint: {
+			'line-color': '#263238',
+			'line-width': 2,
+		},
+	},
+	markers: {
+		id: 'mapbox-control-ruler-markers',
+		type: 'circle',
+		source: sources.points,
+		paint: {
+			'circle-radius': 5,
+			'circle-color': '#fff',
+			'circle-stroke-width': 2,
+			'circle-stroke-color': '#000',
+		},
+	},
+	labels: {
+		id: 'mapbox-control-ruler-labels',
+		type: 'symbol',
+		source: sources.points,
+		layout: {
+			'text-field': '{distance}',
+			'text-font': ['Roboto Medium'],
+			'text-anchor': 'top',
+			'text-size': 12,
+			'text-offset': [0, 0.8],
+		},
+		paint: {
+			'text-color': '#263238',
+			'text-halo-color': '#fff',
+			'text-halo-width': 1,
+		},
+	},
+};
+
+class RulerControl {
+	/**
+   * @param {import('./types').ControlOptions} options
+   */
+	constructor(options = {}) {
+		this.options = options;
+		this.container = controlContainer('mapbox-ctrl-ruler');
+		this.isActive = false;
+		/** @type {[number, number][]} */
+		this.coordinates = [];
+		/** @type {HTMLButtonElement | null} */
+		this.button = null;
+		/** @type {(() => void) | null} */
+		this.removeDragEvents = null;
+		if (!this.options.invisible) {
+			this.button = controlButton({
+				title: 'Ruler',
+				icon: icons.ruler(),
+				onClick: () => this.onControlButtonClick(),
+			});
+		}
+	}
+
+	onControlButtonClick() {
+		if (this.isActive) {
+			this.deactivate();
+		} else {
+			this.activate();
+		}
+	}
+
+	draw = () => {
+		if (!this.map) throw Error('map is undefined');
+
+		this.map.addSource(sources.line, {
+			type: 'geojson',
+			data: toGeoJSONLine(this.coordinates),
+		});
+
+		this.map.addSource(sources.points, {
+			type: 'geojson',
+			data: toGeoJSONPoints(this.coordinates, {
+				units: this.options.units,
+				labelFormat: this.options.labelFormat,
+			}),
+		});
+
+		this.map.addLayer({
+			...layers.line,
+			layout: {
+				...layers.line.layout,
+				...this.options.lineLayout,
+			},
+			paint: {
+				...layers.line.paint,
+				...this.options.linePaint,
+			},
+		});
+
+		this.map.addLayer({
+			...layers.markers,
+			layout: {
+				...layers.markers.layout,
+				...this.options.markerLayout,
+			},
+			paint: {
+				...layers.markers.paint,
+				...this.options.markerPaint,
+			},
+		});
+
+		this.map.addLayer({
+			...layers.labels,
+			layout: {
+				...layers.labels.layout,
+				...this.options.labelLayout,
+			},
+			paint: {
+				...layers.labels.paint,
+				...this.options.labelPaint,
+			},
+		});
+	};
+
+	activate() {
+		if (!this.map) throw Error('map is undefined');
+		const map = this.map;
+		this.isActive = true;
+		this.coordinates = [];
+		map.getCanvas().style.cursor = 'crosshair';
+		this.draw();
+		map.on('click', this.mapClickListener);
+		map.on('style.load', this.draw);
+		// @ts-ignore
+		map.fire('ruler.on');
+		if (this.button) {
+			this.button.classList.add('-active');
+		}
+	}
+
+	deactivate() {
+		if (!this.map) throw Error('map is undefined');
+		this.isActive = false;
+		this.map.getCanvas().style.cursor = '';
+		// remove layers, sources and event listeners
+		this.map.removeLayer(layers.line.id);
+		this.map.removeLayer(layers.markers.id);
+		this.map.removeLayer(layers.labels.id);
+		this.map.removeSource(sources.line);
+		this.map.removeSource(sources.points);
+		this.map.off('click', this.mapClickListener);
+		this.map.off('style.load', this.draw);
+		// @ts-ignore
+		this.map.fire('ruler.off');
+		if (this.button) {
+			this.button.classList.remove('-active');
+		}
+	}
+
+	/**
+   * @param {import('mapbox-gl').MapMouseEvent} event
+   */
+	mapClickListener = (event) => {
+		if (!this.map) throw Error('map is undefined');
+		this.addCoordinate([event.lngLat.lng, event.lngLat.lat]);
+	};
+
+	/**
+	 * @param {[number, number]} coordinate - [lng, lat] of new point
+	 */
+	addCoordinate(coordinate) {
+		if (!this.map) throw Error('map is undefined');
+		if (!this.isActive) throw Error('ruler is not active');
+		this.coordinates.push(coordinate);
+		this.updateSource();
+	}
+
+	updateSource() {
+		if (!this.map) throw Error('map is undefined');
+		// @ts-ignore
+		this.map.fire('ruler.change', { coordinates: this.coordinates });
+		const lineSource = /** @type {import('mapbox-gl').GeoJSONSource} */(this.map.getSource(sources.line));
+		const pointsSource = /** @type {import('mapbox-gl').GeoJSONSource} */(this.map.getSource(sources.points));
+		const geoJSONLine = toGeoJSONLine(this.coordinates);
+		const geoJSONPoints = toGeoJSONPoints(this.coordinates, {
+			units: this.options.units,
+			labelFormat: this.options.labelFormat,
+		});
+		lineSource.setData(geoJSONLine);
+		pointsSource.setData(geoJSONPoints);
+	}
+
+	addDragEvents() {
+		/** @typedef {import('mapbox-gl').MapMouseEvent} MapMouseEvent */
+		/** @typedef {import('mapbox-gl').MapTouchEvent} MapTouchEvent */
+		/** @typedef {import('mapbox-gl').MapMouseEvent} MapLayerMouseEvent */
+		/** @typedef {import('mapbox-gl').MapTouchEvent} MapLayerTouchEvent */
+		if (!this.map) throw Error('map is undefined');
+		const self = this;
+		const map = this.map;
+		const canvas = map.getCanvas();
+		/** @type {number} */
+		let markerIndex;
+
+		function onMouseEnter() {
+			canvas.style.cursor = 'move';
+		}
+
+		function onMouseLeave() {
+			canvas.style.cursor = '';
+		}
+
+		/** @param {MapLayerMouseEvent | MapLayerTouchEvent} event */
+		function onStart(event) {
+			// do not block multi-touch actions
+			if (event.type === 'touchstart' && event.points.length !== 1) {
+				return;
+			}
+			event.preventDefault();
+			const features = event.features;
+			if (!features) return;
+			markerIndex = Number(features[0].id);
+			canvas.style.cursor = 'grabbing';
+			// mouse events
+			map.on('mousemove', onMove);
+			map.on('mouseup', onEnd);
+			// touch events
+			map.on('touchmove', onMove);
+			map.on('touchend', onEnd);
+		}
+
+		/** @param {MapMouseEvent | MapTouchEvent} event */
+		function onMove(event) {
+			const coords = event.lngLat;
+			canvas.style.cursor = 'grabbing';
+			self.coordinates[markerIndex] = [coords.lng, coords.lat];
+			self.updateSource();
+		}
+
+		function onEnd() {
+			// mouse events
+			map.off('mousemove', onMove);
+			map.off('mouseup', onEnd);
+			// touch events
+			map.off('touchmove', onMove);
+			map.off('touchend', onEnd);
+		}
+
+		// mouse events
+		map.on('mouseenter', layers.markers.id, onMouseEnter);
+		map.on('mouseleave', layers.markers.id, onMouseLeave);
+		map.on('mousedown', layers.markers.id, onStart);
+		// touch events
+		map.on('touchstart', layers.markers.id, onStart);
+
+		this.removeDragEvents = () => {
+			// mouse events
+			map.off('mousedown', layers.markers.id, onStart);
+			map.off('mousemove', onMove);
+			map.off('mouseup', onEnd);
+			map.off('mouseenter', layers.markers.id, onMouseEnter);
+			map.off('mouseleave', layers.markers.id, onMouseLeave);
+			// touch events
+			map.off('touchstart', layers.markers.id, onStart);
+			map.off('touchmove', onMove);
+			map.off('touchend', onEnd);
+		};
+	}
+
+	/**
+	 * @param {import('mapbox-gl').Map} map
+	 * @returns {HTMLElement}
+	 */
+	onAdd(map) {
+		this.map = map;
+		if (this.button) {
+			this.container.appendChild(this.button);
+		}
+		this.addDragEvents();
+		return this.container;
+	}
+
+	onRemove() {
+		if (this.isActive) {
+			this.deactivate();
+		}
+		if (this.removeDragEvents) {
+			this.removeDragEvents();
+		}
+		this.container.parentNode?.removeChild(this.container);
+	}
+}
+
 class CustomOptionsControl {
     constructor(args) {
         const { options, onConfirm } = args;
@@ -6504,9 +7003,6 @@ class TerrainToggleControl {
 const DrawCacheFeatureManager = {
     _SourceId: 'drawCache',
     _id: '',
-    constructor: (options) => {
-        if (options.SourceId) DrawCacheFeatureManager._SourceId = options.SourceId;
-    },
     on: (map, id) => {
         if (!map.getSource(DrawCacheFeatureManager._SourceId)) return
         console.log(`output->map.loaded()`, map.loaded());
@@ -6586,5 +7082,5 @@ const useDrawCache = () => {
     }
 };
 
-export { CustomOptionsControl, CustomToggleControl, DrawCacheFeatureManager, RainteeConstants, RainteeGISUtil, RainteeSourceMapTool, RasterLayerControl, TerrainToggleControl, useDrawCache };
+export { CustomOptionsControl, CustomToggleControl, DrawCacheFeatureManager, RainteeConstants, RainteeGISUtil, RainteeSourceMapTool, RasterLayerControl, RulerControl, TerrainToggleControl, useDrawCache };
 //# sourceMappingURL=index.js.map