app/assets/javascripts/dashboard.js

   1 //= require maplibre/map
   2
   3 $(function () {
   4   let map;
   5
   6   if ($("#map").length) {
   7     map = new OSM.MapLibre.SecondaryMap();
   8
   9     const position = $("html").attr("dir") === "rtl" ? "top-left" : "top-right";
  10     const navigationControl = new OSM.MapLibre.NavigationControl();
  11     const geolocateControl = new OSM.MapLibre.GeolocateControl();
  12     map.addControl(new OSM.MapLibre.CombinedControlGroup([navigationControl, geolocateControl]), position);
  13
  14     const markerObjects = $("[data-user]")
  15       .filter(function () {
  16         const { lat, lon } = $(this).data("user");
  17         return lat && lon;
  18       })
  19       .map(function () {
  20         const { lat, lon, color, description } = $(this).data("user");
  21
  22         const marker = new OSM.MapLibre.Marker({ color })
  23           .setLngLat([lon, lat])
  24           .setPopup(new OSM.MapLibre.Popup().setHTML(description));
  25
  26         return { marker, lat, lon };
  27       })
  28       .get();
  29
  30     for (const item of markerObjects) {
  31       item.marker.addTo(map);
  32     }
  33
  34     const updateZIndex = () => {
  35       for (const item of markerObjects) {
  36         item.currentY = map.project([item.lon, item.lat]).y;
  37       }
  38
  39       markerObjects.sort((a, b) => a.currentY - b.currentY);
  40
  41       for (const [index, item] of markerObjects.entries()) {
  42         item.marker.getElement().style.zIndex = index;
  43       }
  44     };
  45
  46     if (markerObjects.length > 0) {
  47       map.on("move", updateZIndex);
  48       map.on("rotate", updateZIndex);
  49       map.on("pitch", updateZIndex);
  50       updateZIndex();
  51     }
  52   }
  53 });