app/assets/javascripts/dashboard.js

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