app/assets/javascripts/dashboard.js

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