app/assets/javascripts/dashboard.js

   1 //= require maplibre.map
   2 //= require maplibre.i18n
   3
   4 $(function () {
   5   const defaultHomeZoom = 11;
   6   let map;
   7
   8   if ($("#map").length) {
   9     map = new maplibregl.Map({
  10       container: "map",
  11       style: OSM.Mapnik,
  12       attributionControl: false,
  13       locale: OSM.MaplibreLocale,
  14       center: OSM.home ? [OSM.home.lon, OSM.home.lat] : [0, 0],
  15       zoom: OSM.home ? defaultHomeZoom : 0
  16     });
  17
  18     const position = $("html").attr("dir") === "rtl" ? "top-left" : "top-right";
  19     map.addControl(new maplibregl.NavigationControl({ showCompass: false }), position);
  20     const geolocate = new maplibregl.GeolocateControl({
  21       positionOptions: {
  22         enableHighAccuracy: true
  23       },
  24       trackUserLocation: true
  25     });
  26     map.addControl(geolocate, position);
  27
  28     $("[data-user]").each(function () {
  29       const user = $(this).data("user");
  30       if (user.lon && user.lat) {
  31         OSM.createMapLibreMarker({ icon: "dot", color: user.color })
  32           .setLngLat([user.lon, user.lat])
  33           .setPopup(OSM.createMapLibrePopup(user.description))
  34           .addTo(map);
  35       }
  36     });
  37   }
  38 });