Staljad tooltip i karta istället för popup on click

bonny · Jul 1, 2024 · 717443c · 717443c
1 parent 9753bd3
commit 717443c
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 13 deletions.
diff --git a/public/css/events-map.css b/public/css/events-map.css
@@ -152,10 +152,39 @@ body.map-is-expanded .SiteHeader {
         ease-in-out margin 0.25s;
 }
 
-/* .EventsMap-marker-icon--near,
-                                                                                                                                                        .EventsMap-marker-icon--nearer {
-                                                                                                                                                            border: 2px solid rgba(255, 255, 255, .5);
-                                                                                                                                                        } */
+/* Tooltip, shown on hover */
+/* <div class="EventsMap-markerTooltip">
+<img class="EventsMap-markerTooltip-image" src="${event.image}" alt="">
+<h1 class="class="EventsMap-markerTooltip-headline">${event.headline}</h1>
+<div class="EventsMap-markerTooltip-text">${event.time_human} • ${event.type}</div>
+</div> */
+.EventsMap-markerTooltip {
+    display: flex;
+    flex-direction: column;
+    gap: var(--default-margin-third);
+    width: 225px;
+    max-width: 90vw;
+}
+
+.EventsMap-markerTooltip-image {
+    width: 100%;
+    height: 100px;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 5px;
+}
+
+.EventsMap-markerTooltip-headline {
+    font-size: var(--font-size-small);
+    font-weight: 500;
+    margin: 0;
+    white-space: normal;
+}
+
+.EventsMap-markerTooltip-text {
+    font-size: var(--font-size-small);
+    white-space: normal;
+}
 
 .EventsMap-marker-content {
     display: flex;

diff --git a/public/js/events-map.js b/public/js/events-map.js
@@ -234,15 +234,31 @@ class EventsMap {
                 L.marker([event.lat, event.lng], {
                     icon: getLayerIcon(null, map, "", ""),
                     crimeEventData: event,
-                }).bindPopup(`
-                    <div class="EventsMap-marker-content">
-                        <a target="_blank" href="${event.permalink}?utm_source=brottsplatskartan&utm_medium=maplink" class="EventsMap-marker-contentText EventsMap-marker-contentLink">
-                            ${event.time_human} • ${event.type}
-                            <strong>${event.headline}</strong>
-                            <!-- <div class="EventsMap-marker-contentLinkIcon">Läs mer →</div> -->
-                        </a>
-                    </div>
-                `);
+                })
+                    .bindTooltip(
+                        `
+                        <div class="EventsMap-markerTooltip">
+                            <img class="EventsMap-markerTooltip-image" src="${event.image}" alt="">
+                            <h1 class="EventsMap-markerTooltip-headline">${event.headline}</h1>
+                            <div class="EventsMap-markerTooltip-text">${event.time_human} • ${event.type}</div>
+                        </div>
+                    `,
+                        { direction: "bottom", permanent: false }
+                    )
+                    // .bindPopup(
+                    //     `
+                    //     <div class="EventsMap-marker-content">
+                    //         <a target="_blank" href="${event.permalink}?utm_source=brottsplatskartan&utm_medium=maplink" class="EventsMap-marker-contentText EventsMap-marker-contentLink">
+                    //             ${event.time_human} • ${event.type}
+                    //             <strong>${event.headline}</strong>
+                    //             <!-- <div class="EventsMap-marker-contentLinkIcon">Läs mer →</div> -->
+                    //         </a>
+                    //     </div>                `
+                    // )
+                    .on("click", function (evt) {
+                        const link = evt.target.options.crimeEventData.permalink + "?utm_source=brottsplatskartan&utm_medium=maplink";
+                        window.open(link, "_blank");
+                    });
 
             markers.push(oneMarker);
         });