app/assets/javascripts/dashboard.js

   1 //= require maplibre.map
   2 //= require maplibre.i18n
   3 //= require maplibre.combinedcontrolgroup
   4
   5 $(function () {
   6   const defaultHomeZoom = 11;
   7   let map;
   8
   9   if ($("#map").length) {
  10     map = new maplibregl.Map({
  11       container: "map",
  12       style: OSM.MapLibre.Styles.Mapnik,
  13       attributionControl: false,
  14       locale: OSM.MapLibre.Locale,
  15       rollEnabled: false,
  16       dragRotate: false,
  17       pitchWithRotate: false,
  18       bearingSnap: 180,
  19       maxPitch: 0,
  20       center: OSM.home ? [OSM.home.lon, OSM.home.lat] : [0, 0],
  21       zoom: OSM.home ? defaultHomeZoom : 0
  22     });
  23
  24     const position = $("html").attr("dir") === "rtl" ? "top-left" : "top-right";
  25     const navigationControl = new maplibregl.NavigationControl({ showCompass: false });
  26     const geolocateControl = new maplibregl.GeolocateControl({
  27       positionOptions: {
  28         enableHighAccuracy: true
  29       },
  30       trackUserLocation: true
  31     });
  32     map.addControl(new OSM.MapLibre.CombinedControlGroup([navigationControl, geolocateControl]), position);
  33     map.touchZoomRotate.disableRotation();
  34     map.keyboard.disableRotation();
  35
  36     $("[data-user]").each(function () {
  37       const user = $(this).data("user");
  38       if (user.lon && user.lat) {
  39         OSM.MapLibre.getMarker({ icon: "dot", color: user.color })
  40           .setLngLat([user.lon, user.lat])
  41           .setPopup(OSM.MapLibre.getPopup(user.description))
  42           .addTo(map);
  43       }
  44     });
  45   }
  46 });