app/assets/javascripts/dashboard.js

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