quest icon clustering

src/c3nav/site/static/site/css/c3nav.scss

@@ -1945,4 +1945,56 @@ blink {
             background: var(--location-load-color);
         }
     }
-}
+}
+
+.quest-icon {
+    > span {
+        display: inline-block;
+        width: 30px;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        font-size: 22px;
+        font-family: 'Material Symbols Outlined';
+        background-color: white;
+        color: var(--color-primary);
+        border-radius: 100%;
+        box-shadow: 0 0 0 5px color-mix(in srgb, transparent, var(--color-primary) 60%);
+
+        transition: color, background-color 150ms ease-in-out;
+
+        &:hover {
+            background-color: var(--color-primary);
+            color: white;
+        }
+    }
+}
+
+.marker-cluster {
+	background-color: color-mix(in srgb, transparent, var(--color-primary) 60%);
+    background-clip: padding-box;
+	border-radius: 20px;
+
+    div {
+        background-color: white;
+        color: var(--color-primary);
+        width: 30px;
+        height: 30px;
+        margin-left: 5px;
+        margin-top: 5px;
+
+        text-align: center;
+        border-radius: 15px;
+        font-size: 12px;
+
+        span {
+            line-height: 30px;
+	        font-weight: bold;
+        }
+
+        &:hover {
+            background-color: var(--color-primary);
+            color: white;
+        }
+    }
+}

src/c3nav/site/static/site/js/c3nav.js

@@ -1579,7 +1579,12 @@ c3nav = {
             c3nav._routeLayers[level[0]] = L.layerGroup().addTo(layerGroup);
             c3nav._userLocationLayers[level[0]] = L.layerGroup().addTo(layerGroup);
             c3nav._overlayLayers[level[0]] = L.layerGroup().addTo(layerGroup);
-            c3nav._questsLayers[level[0]] = L.layerGroup().addTo(layerGroup);
+            c3nav._questsLayers[level[0]] = L.markerClusterGroup({
+                spiderLegPolylineOptions: {
+                    color: 'var(--color-primary)',
+                },
+                showCoverageOnHover: false,
+            }).addTo(layerGroup);
         }
         c3nav._levelControl.finalize();
         c3nav._levelControl.setLevel(c3nav.initial_level);
@@ -1897,7 +1902,7 @@ c3nav = {
         // add a location to the map as a marker
         if (location.locations) {
             const bounds = {};
-            for (const i = 0; i < location.locations.length; i++) {
+            for (let i = 0; i < location.locations.length; i++) {
                 c3nav._merge_bounds(bounds, c3nav._add_location_to_map(c3nav.locations_by_id[location.locations[i]], icon, true));
             }
             return bounds;
@@ -2240,7 +2245,7 @@ c3nav = {
         const lines = data.split("\n");
         const result = {};
 
-        for (const i = 0; i < lines.length; i++) {
+        for (let i = 0; i < lines.length; i++) {
             const line = lines[i].split(' ');
             if (line.length === 2) {
                 result[line[0]] = String.fromCharCode(parseInt(line[1], 16));
@@ -2593,10 +2598,24 @@ QuestsControl = L.Control.extend({
                     c3nav._questsLayers[level_id].clearLayers();
                 }
                 for (const quest of data) {
-                    L.geoJson(quest.point, {}).addTo(c3nav._questsLayers[quest.level_id]).on('click', function() {
+                    const quest_icon = c3nav._map_material_icon(c3nav.user_data.quests[quest.quest_type].icon ?? 'editor_choice');
-                        c3nav.open_modal();
+                    L.geoJson(quest.point, {
-                        $.get(`/editor/quests/${quest.quest_type}/${quest.identifier}`, c3nav._modal_loaded).fail(c3nav._modal_error);
+                        pointToLayer:  (geom, latlng) => {
-                    });
+                            return L.marker(latlng, {
+                                icon: L.divIcon({
+                                    className: 'quest-icon',
+                                    html: `<span>${quest_icon}</span>`,
+                                    iconSize: [24, 24],
+                                    iconAnchor: [12, 12],
+                                })
+                            });
+                        }
+                    })
+                        .addTo(c3nav._questsLayers[quest.level_id])
+                        .on('click', function() {
+                            c3nav.open_modal();
+                            $.get(`/editor/quests/${quest.quest_type}/${quest.identifier}`, c3nav._modal_loaded).fail(c3nav._modal_error);
+                        });
                 }
             })
             .catch(err => {

src/c3nav/site/templates/site/base.html

@@ -38,6 +38,7 @@
         <link href="{% static 'fonts/fonts.css' %}" rel="stylesheet">
         <link href="{% static 'normalize/normalize.css' %}" rel="stylesheet">
         <link href="{% static 'leaflet/leaflet.css' %}" rel="stylesheet">
+        <link href="{% static 'leaflet-markercluster/MarkerCluster.css' %}" rel="stylesheet">
         <link href="{% static 'material-symbols/material-symbols.css' %}" rel="stylesheet">
         <link href="{% static 'site/css/c3nav.scss' %}" rel="stylesheet" type="text/x-scss">
     {% endcompress %}

src/c3nav/site/templates/site/map.html

@@ -269,6 +269,7 @@
         <script type="text/javascript" src="{% static 'leaflet/leaflet.js' %}"></script>
         <script type="text/javascript" src="{% static 'leaflet-layergroup-collision/rbush.js' %}"></script>
         <script type="text/javascript" src="{% static 'leaflet-layergroup-collision/Leaflet.LayerGroup.Collision.js' %}"></script>
+        <script type="text/javascript" src="{% static 'leaflet-markercluster/leaflet.markercluster.js' %}"></script>
         <script type="text/javascript" src="{% static 'c3nav/js/api.js' %}"></script>
         <script type="text/javascript" src="{% static 'site/js/c3nav.js' %}"></script>
     {% endcompress %}

src/c3nav/static/leaflet-markercluster/MarkerCluster.css

@@ -0,0 +1,14 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}