diff --git a/maps_utils/static/maps_utils/geo-feature-collection.css b/maps_utils/static/maps_utils/geo-feature-collection.css index 5a3c181d3109a9308ba87687cbe46327104f9955..6de2de16a913a4d162052d8f4a512d972c5a1ee6 100644 --- a/maps_utils/static/maps_utils/geo-feature-collection.css +++ b/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; + +} diff --git a/maps_utils/static/maps_utils/geo-feature-collection.js b/maps_utils/static/maps_utils/geo-feature-collection.js index f974dbe7cf6f3a3e32c3a7eebfc5247142e362fe..7a6e5a1a85298c92117030d20746503d61d2fda3 100644 --- a/maps_utils/static/maps_utils/geo-feature-collection.js +++ b/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( - (coords[sectorIndex][1] + - coords[sectorIndex + 1][1]) / - 2, - (coords[sectorIndex][0] + - coords[sectorIndex + 1][0]) / - 2 - )); - } + 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), + }); + }); } };