adt-js-components 2.0.0 → 2.0.3

package/package.json

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

package/src/Map/index.js

@@ -4,7 +4,7 @@ import "leaflet.markercluster";
 import "leaflet.markercluster/dist/MarkerCluster.css";
 import "leaflet.markercluster/dist/MarkerCluster.Default.css";
 import { decode as decodeFlexPolyline } from '@here/flexpolyline';
-import {RouteSetting, defaultRouteSettings} from './route.types.js';
+import {defaultRouteSettings} from './route.types.js';
 
 let siteKey;
 let markerImg;
@@ -23,6 +23,7 @@ const onSelectionChangeMap = new WeakMap();
 const onBeforeRouteCalculationMap = new WeakMap();
 const onAfterRouteCalculationMap = new WeakMap();
 const disableClickZoomMap = new WeakMap();
+const disableClusteringMap = new WeakMap();
 const cachedRouteLoaded = new WeakMap();
 
 const DEPOT_TYPE = {
@@ -56,7 +57,8 @@ async function run(options) {
 			markerInfoCallback = null,
 			onBeforeRouteCalculation = null,
 			onAfterRouteCalculation = null,
-			disableClickZoom = false
+			disableClickZoom = false,
+			disableClustering = false
 		} = JSON.parse(el.dataset.adtMap);
 
 		/** @type {RouteSetting} */
@@ -91,6 +93,7 @@ async function run(options) {
 		onBeforeRouteCalculationMap.set(map, onBeforeRouteCalculation);
 		onAfterRouteCalculationMap.set(map, onAfterRouteCalculation);
 		disableClickZoomMap.set(map, disableClickZoom);
+		disableClusteringMap.set(map, disableClustering);
 
 		if (mapProvider === MAP_PROVIDER.HERE) {
 			L.tileLayer(
@@ -334,21 +337,23 @@ function enableRectangleSelection(map, onSelectionChange, showSelectionOrder) {
 
 function addMarkers(map, markers, options, selectedOptions, position, selectable, onSelectionChange, showSelectionOrder, markerInfoCallback) {
 	const positionsOfMarkers = [];
-	const cluster = L.markerClusterGroup({
-		disableClusteringAtZoom: 18,
-		spiderfyOnMaxZoom: true,
-		showCoverageOnHover: false,
-		zoomToBoundsOnClick: true,
-		iconCreateFunction: function (cluster) {
-			const childCount = cluster.getChildCount();
-			const c = childCount < 10 ? 'small' : childCount < 100 ? 'medium' : 'large';
-			return new L.DivIcon({
-				html: '<div><span>' + childCount + '</span></div>',
-				className: 'marker-cluster marker-cluster-' + c,
-				iconSize: new L.Point(40, 40)
-			});
-		}
-	});
+	const cluster = disableClusteringMap.get(map)
+		? L.layerGroup()
+		: L.markerClusterGroup({
+			disableClusteringAtZoom: 18,
+			spiderfyOnMaxZoom: true,
+			showCoverageOnHover: false,
+			zoomToBoundsOnClick: true,
+			iconCreateFunction: function (cluster) {
+				const childCount = cluster.getChildCount();
+				const c = childCount < 10 ? 'small' : childCount < 100 ? 'medium' : 'large';
+				return new L.DivIcon({
+					html: '<div><span>' + childCount + '</span></div>',
+					className: 'marker-cluster marker-cluster-' + c,
+					iconSize: new L.Point(40, 40)
+				});
+			}
+		});
 
 	markerClusters.set(map, cluster);
 	let loadedCount = 0;
@@ -411,9 +416,9 @@ async function applyPreselectedMarkersVisualOnly(map, markersData) {
 	for (const markerData of preselected) {
 		const markerInstance = markerMap.get(markerData.id);
 		if (markerInstance && markerInstance._selectedIcon) {
-			if (settings && settings.color) {
+			if ((settings && settings.color) || markerData.iconStyle) {
 				const iconUrl = markerInstance._selectedIcon.options.iconUrl;
-				const newIcon = await createMarkerIcon(map, iconUrl, null);
+				const newIcon = await createMarkerIcon(map, iconUrl, null, null, markerData.iconStyle);
 				markerInstance.setIcon(newIcon);
 			} else {
 				markerInstance.setIcon(markerInstance._selectedIcon);
@@ -542,7 +547,7 @@ async function selectMarker(marker, map, showSelectionOrder) {
 	}
 
 	if (showSelectionOrder) {
-		const newIcon = await createMarkerIcon(map, marker.options.icon.options.iconUrl, newOrder);
+		const newIcon = await createMarkerIcon(map, marker.options.icon.options.iconUrl, newOrder, null, marker._markerData?.iconStyle);
 		marker.setIcon(newIcon);
 	}
 }
@@ -581,16 +586,19 @@ function deselectMarker(marker, map, showSelectionOrder) {
 async function updateMarkerOrderDisplay(map, marker, orderNumber, isSelected, color = null) {
 	if (!marker._normalIcon || !marker._normalIcon.options) return;
 	const iconUrl = isSelected && marker._selectedIcon ? marker._selectedIcon.options.iconUrl : marker._normalIcon.options.iconUrl;
-	const newIcon = await createMarkerIcon(map, iconUrl, orderNumber, color);
+	const newIcon = await createMarkerIcon(map, iconUrl, orderNumber, color, marker._markerData?.iconStyle);
 	marker.setIcon(newIcon);
 }
 
-async function createMarkerIcon(map, iconUrl, orderNumber, color = null) {
-	let inlineStyle = null;
+async function createMarkerIcon(map, iconUrl, orderNumber, color = null, iconStyle = null) {
+	let inlineStyle = '';
 	const settings = routeSettingsMap.get(map);
 	if ((settings && settings.color) || color) {
 		inlineStyle = `--marker-fill: ${color ?? settings.color};`;
 	}
+	if (iconStyle) {
+		inlineStyle += iconStyle;
+	}
 
 	let svg;
 	if (svgCache.has(iconUrl)) {
@@ -903,7 +911,7 @@ async function toggleMarker(mapElement, markerId, selected, recalculate = true)
 	}
 
 	const cluster = markerClusters.get(map);
-	if (cluster) {
+	if (cluster && typeof cluster.refreshClusters === 'function') {
 		cluster.refreshClusters(marker);
 	}