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     $("[data-user]").each(function () {
  23       const user = $(this).data("user");
  24       if (user.lon && user.lat) {
  25         OSM.MapLibre.getMarker({ icon: "dot", color: user.color })
  26           .setLngLat([user.lon, user.lat])
  27           .setPopup(OSM.MapLibre.getPopup(user.description))
  28           .addTo(map);
  29       }
  30     });
  31   }
  32 });