app/assets/javascripts/maplibre.map.js

   1 //= require maplibre-gl/dist/maplibre-gl
   2 //= require maplibre.i18n
   3
   4 OSM.MapLibre.Styles.Mapnik = {
   5   version: 8,
   6   sources: {
   7     osm: {
   8       type: "raster",
   9       tiles: [
  10         "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
  11       ],
  12       tileSize: 256,
  13       maxzoom: 19
  14     }
  15   },
  16   layers: [
  17     {
  18       id: "osm",
  19       type: "raster",
  20       source: "osm"
  21     }
  22   ]
  23 };
  24
  25 OSM.MapLibre.defaultHomeZoom = 11;
  26 OSM.MapLibre.defaultSecondaryMapOptions = {
  27   container: "map",
  28   style: OSM.MapLibre.Styles.Mapnik,
  29   attributionControl: false,
  30   locale: OSM.MapLibre.Locale,
  31   rollEnabled: false,
  32   dragRotate: false,
  33   pitchWithRotate: false,
  34   bearingSnap: 180,
  35   maxPitch: 0,
  36   center: OSM.home ? [OSM.home.lon, OSM.home.lat] : [0, 0],
  37   zoom: OSM.home ? OSM.MapLibre.defaultHomeZoom : 0
  38 };
  39
  40 // Helper function to create Leaflet style (SVG comes from Leaflet) markers for MapLibre
  41 // new maplibregl.Marker({ color: color }) is simpler, but does not have the exact same gradient
  42 OSM.MapLibre.getMarker = function ({ icon = "dot", color = "var(--marker-red)", ...options }) {
  43   const el = document.createElement("div");
  44   el.className = "maplibre-gl-marker";
  45   el.style.width = "25px";
  46   el.style.height = "40px";
  47
  48   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  49   svg.setAttribute("viewBox", "0 0 25 40");
  50   svg.setAttribute("width", "25");
  51   svg.setAttribute("height", "40");
  52   svg.classList.add("pe-none");
  53   svg.style.overflow = "visible";
  54
  55   // Use the marker icons from NoteMarker.svg
  56   const use1 = document.createElementNS("http://www.w3.org/2000/svg", "use");
  57   use1.setAttribute("href", "#pin-shadow");
  58
  59   const use2 = document.createElementNS("http://www.w3.org/2000/svg", "use");
  60   use2.setAttribute("href", `#pin-${icon}`);
  61   use2.setAttribute("color", color);
  62   use2.classList.add("pe-auto");
  63
  64   svg.appendChild(use1);
  65   svg.appendChild(use2);
  66   el.appendChild(svg);
  67
  68   return new maplibregl.Marker({
  69     element: el,
  70     anchor: "bottom",
  71     offset: [0, 0],
  72     ...options
  73   });
  74 };
  75
  76 // Helper function to create MapLibre popups that don't overlap with Leaflets' markers
  77 OSM.MapLibre.getPopup = function (content) {
  78   // General offset 5px for each side, but the offset depends on the popup position:
  79   // Popup above the marker -> lift it by height + 5px = 45px
  80   // Popup left the marker -> lift it by width/2 + 5px = 22.5px ~= 17px
  81   const offset = {
  82     "bottom": [0, -45],
  83     "bottom-left": [0, -45],
  84     "bottom-right": [0, -45],
  85     "top": [0, 5],
  86     "top-left": [0, 5],
  87     "top-right": [0, 5],
  88     // our marker is bigger at the top, but this does not attach there -> tucked 2px more
  89     "right": [-15, -10],
  90     "left": [15, -10]
  91   };
  92   return new maplibregl.Popup({ offset }).setHTML(content);
  93 };