Tighten map marker styling

static/js/map.js

@@ -1,30 +1,60 @@
 if (![].at) {
-  Array.prototype.at = function(pos) { return this.slice(pos, pos + 1)[0] }
+  Array.prototype.at = function(pos) { return this.slice(pos, pos + 1)[0]; };
 }
 
-function emoji_icon(emoji) {
+var emojiByType = {
-  var iconStyle = "<div style='background-color: white; border-radius: 50%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border: 1px solid black;'> <div style='font-size: 18px;'>" + emoji + "</div></div>";
+  "station": "🚉",
+  "airport": "✈️",
+  "ferry_terminal": "🚢",
+  "accommodation": "🏨",
+  "conference": "🖥️",
+  "event": "🍷"
+};
+
+function getIconMetrics(zoom) {
+  var outerSize;
+  if (zoom <= 3) {
+    outerSize = 20;
+  } else if (zoom <= 5) {
+    outerSize = 26;
+  } else if (zoom <= 8) {
+    outerSize = 32;
+  } else {
+    outerSize = 38;
+  }
+  var innerSize = outerSize - 6;
+  var fontSize = Math.max(12, Math.round(innerSize * 0.65));
+
+  return {
+    outerSize: outerSize,
+    fontSize: fontSize,
+    anchor: [outerSize / 2, outerSize / 2]
+  };
+}
+
+function emojiIcon(emoji, zoom) {
+  var symbol = emoji || "📍";
+  var metrics = getIconMetrics(zoom);
+  var iconStyle = [
+    "<div style=\"width:", metrics.outerSize, "px;height:", metrics.outerSize, "px;",
+    "border-radius:50%;border:1px solid rgba(0,0,0,0.2);background-color:rgba(255,255,255,0.9);",
+    "box-shadow:0 1px 3px rgba(0,0,0,0.2);display:flex;justify-content:center;align-items:center;\">",
+    "<div style=\"font-size:", metrics.fontSize, "px;line-height:1;\">",
+    symbol,
+    "</div></div>"
+  ].join("");
 
   return L.divIcon({
-    className: 'custom-div-icon',
+    className: "custom-div-icon",
     html: iconStyle,
-    iconSize: [60, 60],
+    iconSize: [metrics.outerSize, metrics.outerSize],
-    iconAnchor: [15, 15],
+    iconAnchor: metrics.anchor
   });
 }
 
-var icons = {
-  "station": emoji_icon("🚉"),
-  "airport": emoji_icon("✈️"),
-  "ferry_terminal": emoji_icon("🚢"),
-  "accommodation": emoji_icon("🏨"),
-  "conference": emoji_icon("🖥️"),
-  "event": emoji_icon("🍷"),
-}
-
 
 function build_map(map_id, coordinates, routes) {
-    var map = L.map(map_id).fitBounds(coordinates.map(station => [station.latitude, station.longitude]));
+    var map = L.map(map_id).fitBounds(coordinates.map(function(station) { return [station.latitude, station.longitude]; }));
 
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -33,39 +63,40 @@ function build_map(map_id, coordinates, routes) {
     var markers = [];
     var offset_lines = [];
 
-    function getIconBounds(latlng) {
+    function getIconBounds(latlng, zoom) {
-        let iconSize = 20; // Assuming the icon size as a square
+        var iconSize = getIconMetrics(zoom).outerSize;
         if (!latlng) return null;
-        let pixel = map.project(latlng, map.getZoom());
+        var pixel = map.project(latlng, zoom);
-        let sw = map.unproject([pixel.x - iconSize / 2, pixel.y + iconSize / 2], map.getZoom());
+        var sw = map.unproject([pixel.x - iconSize / 2, pixel.y + iconSize / 2], zoom);
-        let ne = map.unproject([pixel.x + iconSize / 2, pixel.y - iconSize / 2], map.getZoom());
+        var ne = map.unproject([pixel.x + iconSize / 2, pixel.y - iconSize / 2], zoom);
         return L.latLngBounds(sw, ne);
     }
 
     function calculateCentroid(markers) {
-        let latSum = 0, lngSum = 0, count = 0;
+        var latSum = 0, lngSum = 0, count = 0;
-        markers.forEach(marker => {
+        markers.forEach(function(marker) {
             latSum += marker.getLatLng().lat;
             lngSum += marker.getLatLng().lng;
-            count++;
+            count += 1;
         });
         return count > 0 ? L.latLng(latSum / count, lngSum / count) : null;
     }
 
     // Function to detect and group overlapping markers
-    function getOverlappingGroups() {
+    function getOverlappingGroups(zoom) {
-        let groups = [];
+        var groups = [];
-        let visited = new Set();
+        var visited = new Set();
 
-        markers.forEach((marker, index) => {
+        markers.forEach(function(marker) {
             if (visited.has(marker)) {
                 return;
             }
-            let group = [];
+            var group = [];
-            let markerBounds = getIconBounds(marker.getLatLng());
+            var markerBounds = getIconBounds(marker.getLatLng(), zoom);
 
-            markers.forEach((otherMarker) => {
+            markers.forEach(function(otherMarker) {
-                if (marker !== otherMarker && markerBounds.intersects(getIconBounds(otherMarker.getLatLng()))) {
+                var otherBounds = getIconBounds(otherMarker.getLatLng(), zoom);
+                if (marker !== otherMarker && markerBounds && otherBounds && markerBounds.intersects(otherBounds)) {
                     group.push(otherMarker);
                     visited.add(otherMarker);
                 }
@@ -82,60 +113,75 @@ function build_map(map_id, coordinates, routes) {
     }
 
     function displaceMarkers(group, zoom) {
-        const markerPixelSize = 30; // Width/height of the marker in pixels
+        var markerPixelSize = Math.max(18, getIconMetrics(zoom).outerSize);
-        let map = group[0]._map; // Assuming all markers are on the same map
+        var mapRef = group[0]._map; // Assuming all markers are on the same map
 
-        let centroid = calculateCentroid(group);
+        var centroid = calculateCentroid(group);
-        let centroidPoint = map.project(centroid, zoom);
+        if (!centroid) {
+            return;
+        }
+        var centroidPoint = mapRef.project(centroid, zoom);
 
-        const radius = markerPixelSize; // Set radius for even distribution
+        var radius = markerPixelSize * 1.1;
-        const angleIncrement = (2 * Math.PI) / group.length; // Evenly space markers
+        var angleIncrement = (2 * Math.PI) / group.length;
 
-        group.forEach((marker, index) => {
+        group.forEach(function(marker, index) {
-            let angle = index * angleIncrement;
+            var angle = index * angleIncrement;
-            let newX = centroidPoint.x + radius * Math.cos(angle);
+            var newX = centroidPoint.x + radius * Math.cos(angle);
-            let newY = centroidPoint.y + radius * Math.sin(angle);
+            var newY = centroidPoint.y + radius * Math.sin(angle);
-            let newPoint = L.point(newX, newY);
+            var newPoint = L.point(newX, newY);
-            let newLatLng = map.unproject(newPoint, zoom);
+            var newLatLng = mapRef.unproject(newPoint, zoom);
 
-            // Store original position for polyline
+            var originalPos = marker.originalLatLng;
-            let originalPos = marker.getLatLng();
             marker.setLatLng(newLatLng);
 
-            marker.polyline = L.polyline([originalPos, newLatLng], {color: "gray", weight: 2}).addTo(map);
+            marker.polyline = L.polyline([originalPos, newLatLng], {color: "#909090", weight: 1, dashArray: "2,4"}).addTo(mapRef);
             offset_lines.push(marker.polyline);
         });
     }
 
-    coordinates.forEach(function(item, index) {
+    function updateMarkerIcons(zoom) {
-        let latlng = L.latLng(item.latitude, item.longitude);
+        markers.forEach(function(marker) {
-        let marker = L.marker(latlng, { icon: icons[item.type] }).addTo(map);
+            marker.setIcon(emojiIcon(marker.emoji, zoom));
+        });
+    }
+
+    coordinates.forEach(function(item) {
+        var latlng = L.latLng(item.latitude, item.longitude);
+        var marker = L.marker(latlng, { icon: emojiIcon(emojiByType[item.type], map.getZoom()) }).addTo(map);
         marker.bindPopup(item.name);
+        marker.originalLatLng = latlng;
+        marker.emoji = emojiByType[item.type];
         markers.push(marker);
     });
 
-    map.on('zoomend', function() {
+    function resetMarkerPositions() {
-        markers.forEach((marker, index) => {
+        markers.forEach(function(marker) {
-            marker.setLatLng([coordinates[index].latitude, coordinates[index].longitude]); // Reset position on zoom
+            marker.setLatLng(marker.originalLatLng);
             if (marker.polyline) {
                 map.removeLayer(marker.polyline);
+                marker.polyline = null;
             }
         });
-
+        offset_lines.forEach(function(polyline) {
-        offset_lines.forEach(polyline => {
             map.removeLayer(polyline);
         });
+        offset_lines = [];
+    }
 
-        let overlappingGroups = getOverlappingGroups();
+    map.on('zoomend', function() {
-        // console.log(overlappingGroups); // Process or display groups as needed
+        resetMarkerPositions();
+        updateMarkerIcons(map.getZoom());
 
-        overlappingGroups.forEach(group => displaceMarkers(group, map.getZoom()));
+        var overlappingGroups = getOverlappingGroups(map.getZoom());
+
+        overlappingGroups.forEach(function(group) { return displaceMarkers(group, map.getZoom()); });
     });
 
-    let overlappingGroups = getOverlappingGroups();
+    updateMarkerIcons(map.getZoom());
-    // console.log(overlappingGroups); // Process or display groups as needed
 
-    overlappingGroups.forEach(group => displaceMarkers(group, map.getZoom()));
+    var initialGroups = getOverlappingGroups(map.getZoom());
+    initialGroups.forEach(function(group) { return displaceMarkers(group, map.getZoom()); });
 
 
     // Draw routes