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       center: OSM.home ? [OSM.home.lon, OSM.home.lat] : [0, 0],
  16       zoom: OSM.home ? defaultHomeZoom : 0
  17     });
  18
  19     const position = $("html").attr("dir") === "rtl" ? "top-left" : "top-right";
  20     const navigationControl = new maplibregl.NavigationControl({ showCompass: false });
  21     const geolocateControl = new maplibregl.GeolocateControl({
  22       positionOptions: {
  23         enableHighAccuracy: true
  24       },
  25       trackUserLocation: true
  26     });
  27     map.addControl(new OSM.MapLibre.CombinedControlGroup([navigationControl, geolocateControl]), position);
  28
  29     $("[data-user]").each(function () {
  30       const user = $(this).data("user");
  31       if (user.lon && user.lat) {
  32         OSM.MapLibre.getMarker({ icon: "dot", color: user.color })
  33           .setLngLat([user.lon, user.lat])
  34           .setPopup(OSM.MapLibre.getPopup(user.description))
  35           .addTo(map);
  36       }
  37     });
  38   }
  39 });