Merge pull request #18 from OpenWebconcept/feature/frontend-fixes-eyal

Frontend fixes Eyal

Author: markacato

src/blocks/owc-openkaarten/streetmap/assets/scripts/utils/calculate-bounds.js

@@ -7,7 +7,9 @@ export const calculateBounds = (datasets) => {
 	const processCoordinates = (coords) => {
 		// Handle a single coordinate pair
 		if (!Array.isArray(coords[0])) {
-			const [lat, long] = coords.reverse(); // lat-long reversed
+      // Reverse the coordinates, use 0 and 1 as lat and long
+      const lat = coords[1];
+      const long = coords[0];
 			minLat = minLat === null ? lat : Math.min(minLat, lat);
 			maxLat = maxLat === null ? lat : Math.max(maxLat, lat);
 			minLong = minLong === null ? long : Math.min(minLong, long);
@@ -26,6 +28,11 @@ export const calculateBounds = (datasets) => {
 	};
 
 	datasets.forEach(({ features }) => {
+    // Check if features is an array. If not, make it an array.
+    if (!Array.isArray(features)) {
+          features = [features];
+    }
+
 		features.forEach(({ geometry }) => {
 			processCoordinates(geometry.coordinates.slice());
 		});

src/blocks/owc-openkaarten/streetmap/assets/scripts/utils/make-marker-icon.js

@@ -3,7 +3,7 @@ export const makeMarkerIcon = (L, { marker, defaultColor }) => {
 	let iconType;
 	const iconColor = marker?.color || defaultColor;
 
-	if (!marker.icon) {
+	if (!marker || !marker.icon) {
 		icon = `<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><g transform="translate(0 -1028.4)"><path d="m12.031 1030.4c-3.8657 0-6.9998 3.1-6.9998 7 0 1.3 0.4017 2.6 1.0938 3.7 0.0334 0.1 0.059 0.1 0.0938 0.2l4.3432 8c0.204 0.6 0.782 1.1 1.438 1.1s1.202-0.5 1.406-1.1l4.844-8.7c0.499-1 0.781-2.1 0.781-3.2 0-3.9-3.134-7-7-7zm-0.031 3.9c1.933 0 3.5 1.6 3.5 3.5 0 2-1.567 3.5-3.5 3.5s-3.5-1.5-3.5-3.5c0-1.9 1.567-3.5 3.5-3.5z" fill="${iconColor}"/><path d="m12.031 1.0312c-3.8657 0-6.9998 3.134-6.9998 7 0 1.383 0.4017 2.6648 1.0938 3.7498 0.0334 0.053 0.059 0.105 0.0938 0.157l4.3432 8.062c0.204 0.586 0.782 1.031 1.438 1.031s1.202-0.445 1.406-1.031l4.844-8.75c0.499-0.963 0.781-2.06 0.781-3.2188 0-3.866-3.134-7-7-7zm-0.031 3.9688c1.933 0 3.5 1.567 3.5 3.5s-1.567 3.5-3.5 3.5-3.5-1.567-3.5-3.5 1.567-3.5 3.5-3.5z" fill="${iconColor}" transform="translate(0 1028.4)"/></g></svg>`;
 		iconType = 'inline-svg';
 	} else {

src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/TheMap.vue

@@ -109,30 +109,34 @@ const initializeMap = (datasets) => {
 				props.primaryColor,
 		});
 
+    if (!Array.isArray(set.features)) {
+      set.features = [set.features];
+    }
+
 		set.features.forEach((location) => {
       const icon = makeMarkerIcon(L, {
-      	marker: location.properties?.marker,
-      	defaultColor: props.primaryColor,
+        marker: location.properties?.marker,
+        defaultColor: props.primaryColor,
       });
 
-      var geojsonLayer = new L.GeoJSON( location, {
-        pointToLayer: function(feature, latlng) {
-          const marker = new L.Marker(latlng, {
-            icon,
-          });
-          marker.on('click', () => {
-            tooltipCard.value = makeTooltipCard(location, set);
-          });
-          marker.on('keydown', ({ originalEvent }) => {
-            if (originalEvent.keyCode === 13) {
-              tooltipCard.value = makeTooltipCard(location, set);
-            }
-          });
-
-          cluster.addLayer(marker);
-        }
-      }).addTo(map);
-		});
+      // If the location is a MultiPoint, then add the markers directly to the map. If not, add a cluster.
+      if (location.geometry.type === 'MultiPoint') {
+        location.geometry.coordinates.forEach(coord => {
+          const pointLatLng = L.latLng(coord[1], coord[0]);  // Convert coordinates to LatLng.
+          const marker = new L.Marker(pointLatLng, { icon });
+          attachEvents(marker);
+          map.addLayer(marker);
+        });
+      } else {
+        new L.GeoJSON(location, {
+          pointToLayer: function (feature, latlng) {
+            const marker = new L.Marker(latlng, { icon });
+            attachEvents(marker);
+            cluster.addLayer(marker);
+          }
+        }).addTo(map);
+      }
+    });
 
 		return {
 			id: set.id,
@@ -141,6 +145,18 @@ const initializeMap = (datasets) => {
 		};
 	});
 
+  // Function to attach events
+  function attachEvents(marker) {
+    marker.on('click', () => {
+      tooltipCard.value = makeTooltipCard(location, set);
+    });
+    marker.on('keydown', ({ originalEvent }) => {
+      if (originalEvent.keyCode === 13) {
+        tooltipCard.value = makeTooltipCard(location, set);
+      }
+    });
+  }
+
 	L.Control.DataLayerFilters = L.Control.extend({
 		options: {
 			position: 'topleft',
@@ -200,6 +216,7 @@ const initializeMap = (datasets) => {
 	if (groupedMarkerClusters?.length > 1) {
 		map.addControl(datalayerFilters);
 	}
+
 	groupedMarkerClusters.forEach(({ cluster }) => {
 		map.addLayer(cluster);
 	});