app/assets/javascripts/maplibre/controls.js

   1 OSM.MapLibre.CombinedControlGroup = class CombinedControlGroup {
   2   constructor(controls) {
   3     // array of MapLibre controls
   4     this.controls = controls;
   5     // DOM containers returned by onAdd()
   6     this.containers = [];
   7   }
   8
   9   onAdd(map) {
  10     this._container = document.createElement("div");
  11     this._container.className = "maplibregl-ctrl maplibregl-ctrl-group";
  12
  13     for (const ctrl of this.controls) {
  14       const ctrlContainer = ctrl.onAdd(map);
  15       this.containers.push(ctrlContainer);
  16
  17       // Extract buttons from the control's container and add to our wrapper
  18       const buttons = ctrlContainer.querySelectorAll("button");
  19       const iconMap = {
  20         "zoom-in": "plus-lg",
  21         "zoom-out": "dash-lg",
  22         "geolocate": "cursor-fill"
  23       };
  24
  25       buttons.forEach(button => {
  26       // Find the type of button (zoom-in, zoom-out, etc.) from its class name
  27         const match = button.className.match(/maplibregl-ctrl-([\w-]+)/);
  28         if (match) {
  29           const type = match[1]; // e.g., "zoom-in"
  30           const icon = iconMap[type];
  31
  32           if (icon) {
  33             $(button)
  34               .empty()
  35               .append($("<i>").addClass(`maplibregl-ctrl-icon fs-5 bi bi-${icon}`));
  36           }
  37         }
  38         this._container.appendChild(button);
  39       });
  40     }
  41
  42     return this._container;
  43   }
  44
  45   onRemove() {
  46     for (const ctrl of this.controls) ctrl.onRemove?.();
  47
  48     if (this._container) this._container.remove();
  49   }
  50 };
  51
  52 OSM.MapLibre.GeolocateControl = class extends maplibregl.GeolocateControl {
  53   constructor({ positionOptions = {}, ...options } = {}) {
  54     super({
  55       positionOptions: {
  56         enableHighAccuracy: true,
  57         ...positionOptions
  58       },
  59       trackUserLocation: true,
  60       ...options
  61     });
  62   }
  63 };
  64
  65 OSM.MapLibre.NavigationControl = class extends maplibregl.NavigationControl {
  66   constructor(options = {}) {
  67     super({
  68       showCompass: false,
  69       ...options
  70     });
  71   }
  72 };