app/assets/javascripts/maplibre/dom_util.js

   1 OSM.MapLibre.Marker = class extends maplibregl.Marker {
   2   constructor({ icon = "dot", color = "var(--marker-red)", ...options } = {}) {
   3     const element = document.createElement("div");
   4     element.className = "maplibre-gl-marker";
   5     element.style.width = "25px";
   6     element.style.height = "40px";
   7
   8     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   9     svg.setAttribute("viewBox", "0 0 25 40");
  10     svg.setAttribute("width", "25");
  11     svg.setAttribute("height", "40");
  12     svg.classList.add("pe-none");
  13     svg.style.overflow = "visible";
  14
  15     // Use the marker icons from NoteMarker.svg
  16     const use1 = document.createElementNS("http://www.w3.org/2000/svg", "use");
  17     use1.setAttribute("href", "#pin-shadow");
  18
  19     const use2 = document.createElementNS("http://www.w3.org/2000/svg", "use");
  20     use2.setAttribute("href", `#pin-${icon}`);
  21     use2.setAttribute("color", color);
  22     use2.classList.add("pe-auto");
  23
  24     svg.appendChild(use1);
  25     svg.appendChild(use2);
  26     element.appendChild(svg);
  27
  28     super({
  29       element,
  30       anchor: "bottom",
  31       offset: [0, 0],
  32       ...options
  33     });
  34   }
  35 };
  36
  37 OSM.MapLibre.Popup = class extends maplibregl.Popup {
  38   constructor(options) {
  39     // General offset 5px for each side, but the offset depends on the popup position:
  40     // Popup above the marker -> lift it by height + 5px = 45px
  41     // Popup left the marker -> lift it by width/2 + 5px = 22.5px ~= 17px
  42     const offset = {
  43       "bottom": [0, -45],
  44       "bottom-left": [0, -45],
  45       "bottom-right": [0, -45],
  46       "top": [0, 5],
  47       "top-left": [0, 5],
  48       "top-right": [0, 5],
  49       // our marker is bigger at the top, but this does not attach there -> tucked 2px more
  50       "right": [-15, -10],
  51       "left": [15, -10]
  52     };
  53     super({ offset, ...options });
  54   }
  55 };