feat(maps_utils): display tooltips on hover

maps_utils/static/maps_utils/geo-feature-collection.css

@@ -84,7 +84,37 @@
     padding: 1rem;
     min-width: 18em;
     background: var(--color-white);
-    /* border: 1px var(--color-grey-200) solid; */
     border-radius: .5rem;
     pointer-events: all;
 }
+
+.geo-feature-collection-tooltip {
+    background: none;
+    border-radius: 0;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    margin-top: -.25rem;
+    box-shadow: none;
+    font-size: .875rem;
+    font-weight: bold;
+    color: var(--color-grey-500);
+    text-align: center;
+    text-shadow:
+        -1px -1px 0 white,
+        1px -1px 0 white,
+        -1px 1px 0 white,
+        1px 1px 0 white;
+    width: 12em;
+    white-space: normal;
+    height: 8rem;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    line-height: 1;
+}
+
+.geo-feature-collection-tooltip:before {
+    display: none;
+
+}

maps_utils/static/maps_utils/geo-feature-collection.js

@@ -265,13 +265,19 @@ const GeoFeatureCollection = Vue.component("GeoFeatureCollection", {
                               feature.properties.category,
                               feature.properties.index
                           ),
-                }).on("click", onClick);
+                })
+                    .on("click", onClick)
+                    .bindTooltip(feature.properties.title, {
+                        className: "geo-feature-collection-tooltip",
+                        direction: "top",
+                        offset: [0, -62],
+                    });
 
                 // Add item marker to the cluster.
                 markers.addLayer(featureMarker);
 
                 return featureMarker;
-            }
+            };
 
             /**
              * Process Point/MultiPoint type GeoJSON features.
@@ -304,15 +310,17 @@ const GeoFeatureCollection = Vue.component("GeoFeatureCollection", {
                     const sectorCount = coords.length;
                     const sectorIndex = Math.floor((sectorCount - 1) / 2);
 
-                    markerPosLatLng.push(L.latLng(
+                    markerPosLatLng.push(
+                        L.latLng(
                             (coords[sectorIndex][1] +
                                 coords[sectorIndex + 1][1]) /
                                 2,
                             (coords[sectorIndex][0] +
                                 coords[sectorIndex + 1][0]) /
                                 2
-                    ));
-                }
+                        )
+                    );
+                };
 
                 /**
                  * Supported GeoJSON features: Polygon, MultiPolygon, LineString, MultiLineString.
@@ -327,7 +335,9 @@ const GeoFeatureCollection = Vue.component("GeoFeatureCollection", {
                 } else if (feature.geometry.type == "LineString") {
                     markerForLineStringCoords(feature.geometry.coordinates);
                 } else if (feature.geometry.type == "MultiLineString") {
-                    feature.geometry.coordinates.forEach(markerForLineStringCoords);
+                    feature.geometry.coordinates.forEach(
+                        markerForLineStringCoords
+                    );
                 } else if (feature.geometry.type == "MultiPoint") {
                     // Supported via `pointToLayer`, noop here.
                 } else {
@@ -337,11 +347,13 @@ const GeoFeatureCollection = Vue.component("GeoFeatureCollection", {
                 }
 
                 if (markerPosLatLng.length) {
-                    markerPosLatLng.forEach(pos => {
+                    markerPosLatLng.forEach((pos) => {
                         addMarker(feature, pos, onClick);
                         // Bind click event on the layer.
-                        layer.on({ click: (evt) => this.zoomToLayer(evt.target) });
-                    })
+                        layer.on({
+                            click: (evt) => this.zoomToLayer(evt.target),
+                        });
+                    });
                 }
             };