adt-js-components 1.9.2 → 1.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adt-js-components",
-  "version": "1.9.2",
+  "version": "1.9.4",
   "description": "JavaScript components for Nette framework",
   "main": "index.js",
   "scripts": {

package/src/Map/index.js

@@ -17,6 +17,11 @@ const markersDataMap = new WeakMap();
 const markerClusters = new WeakMap();
 const onSelectionChangeMap = new WeakMap();
 
+const DEPOT_TYPE = {
+	START: 'depot-start',
+	END: 'depot-end'
+};
+
 async function run(options) {
 	siteKey = options.siteKey;
 	markerImg = options.markerImg;
@@ -41,6 +46,7 @@ async function run(options) {
 		const routeSettings = {
 			...defaultRouteSettings,
 			...route,
+			customMarkers: customMarkers,
 		};
 
 		if (mapInstances.has(el)) {
@@ -575,6 +581,16 @@ async function calculateRoute(map) {
 		return;
 	}
 
+	const hasCustomStart = routeSettings.startPoint !== null && routeSettings.startPoint !== undefined;
+	const hasCustomEnd = routeSettings.endPoint !== null && routeSettings.endPoint !== undefined;
+
+	if (hasCustomStart) {
+		addDepotMarker(map, routeSettings.startPoint, DEPOT_TYPE.START);
+	}
+	if (hasCustomEnd) {
+		addDepotMarker(map, routeSettings.endPoint, DEPOT_TYPE.END);
+	}
+
 	if (selectedSet && selectedSet.size > 0) {
 		const orderedIds = Array.from(order.entries())
 			.sort((a, b) => a[1] - b[1])
@@ -587,39 +603,131 @@ async function calculateRoute(map) {
 			return;
 		}
 
-		const params = new URLSearchParams({
-			start: `${routeMarkers[0].position.lon},${routeMarkers[0].position.lat}`,
-			end: `${routeMarkers[routeMarkers.length-1].position.lon},${routeMarkers[routeMarkers.length-1].position.lat}`,
-			routeType: routeSettings.routeType,
-			apikey: siteKey
-		});
+		let startPoint = routeMarkers[0].position;
+		if (hasCustomStart) {
+			startPoint = routeSettings.startPoint;
+		}
 
-		routeMarkers.slice(1, -1).forEach(m => {
-			params.append('waypoints', `${m.position.lon},${m.position.lat}`);
-		});
+		let endPoint = routeMarkers[routeMarkers.length - 1].position;
+		if (hasCustomEnd) {
+			endPoint = routeSettings.endPoint;
+		}
+
+		// API mapy.cz povoluje max 15 waypointů, viz https://developer.mapy.com/cs/rest-api/funkce/planovani/
+		const WAYPOINTS_LIMIT = 15;
+		const allCoords = [];
+
+		if (routeMarkers.length <= WAYPOINTS_LIMIT) {
+			// Pokud je markerů méně nebo rovno 15, použijeme původní logiku
+			const params = new URLSearchParams({
+				start: `${startPoint.lon},${startPoint.lat}`,
+				end: `${endPoint.lon},${endPoint.lat}`,
+				routeType: routeSettings.routeType,
+				apikey: siteKey
+			});
+
+			routeMarkers.forEach(m => {
+				params.append('waypoints', `${m.position.lon},${m.position.lat}`);
+			});
+
+			try {
+				const response = await fetch(
+					`https://api.mapy.cz/v1/routing/route?${params.toString()}`
+				);
+				const data = await response.json();
+
+				if (data.geometry?.geometry?.coordinates) {
+					const coords = data.geometry.geometry.coordinates.map(c => [c[1], c[0]]);
+					allCoords.push(...coords);
+				}
+			} catch (error) {
+				console.error('Error calculating route:', error);
+				return;
+			}
+		} else {
+			const chunks = [];
+			for (let i = 0; i < routeMarkers.length; i += WAYPOINTS_LIMIT) {
+				chunks.push(routeMarkers.slice(i, i + WAYPOINTS_LIMIT));
+			}
+
+			for (let i = 0; i < chunks.length; i++) {
+				const chunk = chunks[i];
+				const isFirstChunk = i === 0;
+				const isLastChunk = i === chunks.length - 1;
 
-		try {
-			const response = await fetch(
-				`https://api.mapy.cz/v1/routing/route?${params.toString()}`
-			);
-			const data = await response.json();
-
-			if (data.geometry?.geometry?.coordinates) {
-				const coords = data.geometry.geometry.coordinates.map(c => [c[1], c[0]]);
-				const polyline = L.polyline(coords, {
-					color: routeSettings.color,
-					weight: routeSettings.weight,
-					opacity: routeSettings.opacity
-				}).addTo(map);
-
-				routePolylines.set(map, polyline);
+				let chunkStart, chunkEnd;
+
+				if (isFirstChunk) {
+					chunkStart = startPoint; // Použije custom start nebo první marker
+					chunkEnd = isLastChunk ? endPoint : chunk[chunk.length - 1].position;
+				} else if (isLastChunk) {
+					chunkStart = chunks[i - 1][chunks[i - 1].length - 1].position;
+					chunkEnd = endPoint; // Použije custom end nebo poslední marker
+				} else {
+					chunkStart = chunks[i - 1][chunks[i - 1].length - 1].position;
+					chunkEnd = chunk[chunk.length - 1].position;
+				}
+
+				const params = new URLSearchParams({
+					start: `${chunkStart.lon},${chunkStart.lat}`,
+					end: `${chunkEnd.lon},${chunkEnd.lat}`,
+					routeType: routeSettings.routeType,
+					apikey: siteKey
+				});
+
+				const markersToAdd = isFirstChunk ? chunk : chunk.slice(1);
+
+				markersToAdd.forEach(m => {
+					params.append('waypoints', `${m.position.lon},${m.position.lat}`);
+				});
+
+				try {
+					const response = await fetch(
+						`https://api.mapy.cz/v1/routing/route?${params.toString()}`
+					);
+					const data = await response.json();
+
+					if (data.geometry?.geometry?.coordinates) {
+						const coords = data.geometry.geometry.coordinates.map(c => [c[1], c[0]]);
+						allCoords.push(...coords);
+					}
+				} catch (error) {
+					console.error(`Error calculating route chunk ${i + 1}:`, error);
+					return;
+				}
 			}
-		} catch (error) {
-			console.error('Error calculating route:', error);
+		}
+
+		if (allCoords.length > 0) {
+			const polyline = L.polyline(allCoords, {
+				color: routeSettings.color,
+				weight: routeSettings.weight,
+				opacity: routeSettings.opacity
+			}).addTo(map);
+
+			routePolylines.set(map, polyline);
 		}
 	}
 }
 
+function addDepotMarker(map, position, depotType) {
+	const routeSettings = routeSettingsMap.get(map);
+	const customMarkers = routeSettings.customMarkers || {};
+	const iconUrl = customMarkers.depot || markerImg;
+
+	const img = new Image();
+	img.src = iconUrl;
+	img.onload = function () {
+		const icon = L.icon({
+			iconUrl: iconUrl,
+			iconSize: [img.width, img.height],
+			iconAnchor: [img.width / 2, img.height]
+		});
+
+		L.marker(position, { icon: icon }).addTo(map);
+	};
+}
+
 function getSelectedMarkers(mapElement) {
 	const map = mapInstances.get(mapElement);
 	if (!map) return [];