@wikicasa-dev/utilities 0.1.1 → 0.2.0

package/src/custom/leaflet_map.ts

@@ -0,0 +1,946 @@
+import { createCustomEvent } from "@utils/GenericUtils";
+import { MAP_TILER_STYLE, MAP_TILER_TOKEN } from "./constants";
+import { SVG } from "./icons";
+
+import "core-js/modules/es.array.iterator";
+import type {
+  LatLng,
+  MarkerCluster,
+  Popup,
+  Marker,
+  Polyline,
+  MarkerClusterGroup,
+  LayerGroup,
+  LeafletEvent,
+  FitBoundsOptions,
+} from "leaflet";
+
+declare global {
+  interface Window {
+    _cdn: string;
+    touch: boolean;
+  }
+}
+
+let FreeDraw: any;
+let L: Record<string, any>;
+
+export const MAX_ZOOM = 18;
+
+const defaultDrawingOptions = (
+  COLORS: Record<string, any>
+): Record<string, any> => ({
+  guidelineDistance: 15,
+  showArea: true,
+  fillColor: COLORS.lightPrimary,
+  fillOpacity: 0.75,
+  color: COLORS.primary,
+  opacity: 1,
+  weight: 3,
+  zIndex: 1,
+  stroke: true,
+  fill: true,
+  clickable: true,
+});
+
+let drawingOptions: Record<string, any>;
+
+/*
+const clusterStyles = [
+    {
+        textColor: "white",
+        url: "/_ui/img/map/marker24x24.png",
+        height: 24,
+        width: 24
+    },
+    {
+        textColor: "white",
+        url: "/_ui/img/map/marker36x36.png",
+        height: 36,
+        width: 36
+    },
+    {
+        textColor: "white",
+        url: "/_ui/img/map/marker48x48.png",
+        height: 48,
+        width: 48,
+    }
+];
+*/
+
+interface LMap extends L.Map {
+  touchExtend: Record<string, any>;
+}
+
+/**
+ * @author Andrea Moraglia
+ */
+export default class {
+  private markers: Map<number, L.Marker>;
+  private callbacks: Array<any>;
+  private initialized: boolean;
+  private markerClusterer: MarkerClusterGroup;
+  private clusterHightlight: any;
+  private map: LMap;
+  private mapContainer: HTMLElement;
+  private infowindow: Popup;
+  private infowindowCarousel: Popup;
+  private freeDraw: any;
+  private shapeLayer: LayerGroup;
+  private config: {
+    cluster: boolean;
+    search: boolean;
+    center: Array<number>;
+    drawing: boolean;
+    zoom: number;
+  };
+  private drawHandler: L.Handler;
+  private spinner: HTMLDivElement;
+  private buttonsWrapper: JQuery<HTMLElement>;
+  private spinnerIcon: HTMLDivElement;
+  private drawing: boolean;
+  // @ts-ignore
+  private search: any;
+
+  constructor() {
+    this.callbacks = [];
+    this.markers = new Map<number, L.Marker>();
+    this.initialized = false;
+    this.drawing = false;
+  }
+
+  findMarker(id: number): Marker | undefined {
+    return this.markers.get(id);
+  }
+
+  findCluster(id: number): Marker | undefined {
+    const marker = this.markers.get(id);
+
+    if (marker) return this.markerClusterer.getVisibleParent(marker);
+
+    return undefined;
+  }
+
+  highlightCluster(cluster: MarkerCluster): void {
+    if (!cluster) return;
+
+    if (this.clusterHightlight) this.clearHighlight();
+
+    this.clusterHightlight = cluster;
+    this.clusterHightlight._icon.classList.add("marker-cluster-selected");
+  }
+
+  highlightMarker(id: number): void {
+    const marker = this.markers.get(id);
+
+    if (!marker) return;
+
+    this.clusterHightlight = this.markerClusterer.getVisibleParent(marker);
+
+    if (this.clusterHightlight)
+      this.clusterHightlight._icon.classList.add("marker-cluster-selected");
+  }
+
+  clearHighlight(): void {
+    if (this.clusterHightlight && this.clusterHightlight._icon)
+      this.clusterHightlight._icon.classList.remove("marker-cluster-selected");
+  }
+
+  addMarkerBulk(
+    data: Array<Marker>,
+    center: L.LatLng | null,
+    limit: number,
+    icon: string = "/_ui/img/map/mrkr-wikicasa.png"
+  ): void {
+    const myIcon = L.icon({
+      iconUrl: icon,
+      iconSize: [27, 34],
+      iconAnchor: [0, 33],
+      /* popupAnchor: [-3, -76],
+             shadowSize: [68, 95],
+             shadowAnchor: [22, 94]*/
+    });
+
+    const bulk: Array<Marker> = [];
+
+    if (center && !this.validateCoordinate(center.lat, center.lng))
+      center = null;
+
+    const mapRange = limit ? limit : window["_mapRange"] || 10000;
+
+    for (let i = 0; i < data.length; i++) {
+      const item: Record<string, any> = data[i];
+      const id = item["id"];
+      const position = {
+        lat: item["latitude"],
+        lng: item["longitude"],
+      } as LatLng;
+
+      if (!center || this.getDistance(center, position) < mapRange) {
+        const marker = L.marker(position, { icon: myIcon });
+        marker.id = id;
+        this.markers.set(id, marker);
+
+        if (this.markerClusterer) {
+          bulk.push(marker);
+        } else marker.addTo(this.map);
+      }
+    }
+
+    if (bulk.length > 0) this.markerClusterer.addLayers(bulk);
+  }
+
+  addMarker(key: number | null, position: LatLng, icon?: any): void {
+    //if (!validateCoordinate(position))
+    //    return;
+
+    const defOpts = {
+      iconUrl: icon ? icon : `${window["_cdn"]}/_ui/img/Ico/pin-blue.svg`,
+      iconSize: [48, 48],
+      iconAnchor: [24, 48],
+      /* popupAnchor: [-3, -76],
+             shadowSize: [68, 95],
+             shadowAnchor: [22, 94]*/
+    };
+
+    const iconOpts = $.extend({}, defOpts, icon);
+
+    const myIcon = L.icon(iconOpts);
+
+    const marker = L.marker(position, { icon: myIcon });
+
+    if (key != null) {
+      marker.id = key;
+      this.markers.set(key, marker);
+    }
+
+    if (this.markerClusterer) {
+      this.markerClusterer.addLayer(marker);
+    } else {
+      marker.addTo(this.map);
+    }
+  }
+
+  addCompleteMarker(marker: Marker): void {
+    // @ts-ignore
+    this.markers.set(marker.id, marker);
+
+    if (this.markerClusterer) {
+      this.markerClusterer.addLayer(marker);
+    } else {
+      marker.addTo(this.map);
+    }
+  }
+
+  removeMarker(id: number): void {
+    const marker = this.findMarker(id);
+
+    if (marker) this.map.removeLayer(marker);
+  }
+
+  getVisibleMarkersId(): Array<number> {
+    const visibleIds: Array<number> = [];
+    const keys = Object.keys(this.markers);
+    const bounds = this.map.getBounds();
+
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const marker = this.findMarker(Number(key));
+      if (marker && bounds.contains(marker.getLatLng())) {
+        visibleIds.push(Number(key));
+      }
+    }
+
+    return visibleIds;
+  }
+
+  initMarkerClusterer(): Promise<unknown> {
+    const options = {
+      showCoverageOnHover: true,
+      spiderfyOnMaxZoom: false,
+      spiderLegPolylineOptions: {
+        color: drawingOptions.color,
+      },
+      singleMarkerMode: true,
+    };
+
+    const self = this;
+
+    return new Promise(
+      (
+        resolve: (...args: Array<unknown>) => unknown,
+        reject: () => unknown
+      ) => {
+        Promise.all([
+          require(/* webpackChunkName: "chunks/leaflet.markercluster" */ "leaflet.markercluster/dist/MarkerCluster.css"),
+          import(
+            /* webpackChunkName: "chunks/leaflet.markercluster" */ "leaflet.markercluster"
+          ),
+        ])
+          .then(() => {
+            self.markerClusterer = L.markerClusterGroup(options);
+
+            self.map.addLayer(self.markerClusterer);
+
+            resolve();
+          })
+          .catch((error: any) => {
+            console.error(error);
+            reject();
+          });
+      }
+    );
+  }
+
+  detachMarkerClusterer(): void {
+    this.map.removeLayer(this.markerClusterer);
+  }
+
+  attachMarkerClusterer(): void {
+    this.map.addLayer(this.markerClusterer);
+  }
+
+  disableControls(): void {
+    this.map.boxZoom.disable();
+    this.map.doubleClickZoom.disable();
+    this.map.dragging.disable();
+    this.map.keyboard.disable();
+    this.map.scrollWheelZoom.disable();
+    this.map.touchZoom.disable();
+  }
+
+  enableControls(): void {
+    this.map.boxZoom.enable();
+    this.map.doubleClickZoom.enable();
+    this.map.dragging.enable();
+    this.map.keyboard.enable();
+    this.map.scrollWheelZoom.enable();
+    this.map.touchZoom.enable();
+  }
+
+  setDrawing(): void {
+    this.stopDrawing();
+
+    this.disableControls();
+
+    if (this.freeDraw) {
+      this.freeDraw.mode(FreeDraw.CREATE);
+      this.map["touchExtend"].enable();
+    }
+
+    if (this.shapeLayer) {
+      this.drawHandler = new L.Draw.Polygon(this.map, drawingOptions);
+      this.drawHandler.enable();
+    }
+
+    this.drawing = true;
+  }
+
+  stopDrawing(): void {
+    this.enableControls();
+
+    if (this.freeDraw) {
+      this.map["touchExtend"].disable();
+      this.freeDraw.cancel();
+      this.freeDraw.mode(FreeDraw.EDIT);
+    }
+
+    if (this.drawHandler) this.drawHandler.disable();
+
+    this.drawing = false;
+  }
+
+  isDrawing(): boolean {
+    return this.drawing;
+  }
+
+  initDrawingManager(): Promise<unknown> {
+    if (!window["touch"]) {
+      return new Promise(
+        (
+          resolve: (...args: Array<unknown>) => unknown,
+          reject: () => unknown
+        ) => {
+          Promise.all([
+            import(
+              /* webpackChunkName: "chunks/leaflet.draw" */ "leaflet-draw"
+            ),
+            require(/* webpackChunkName: "chunks/leaflet.draw" */ "leaflet-draw/dist/leaflet.draw.css"),
+          ])
+            .then(() => {
+              this.shapeLayer = new L.FeatureGroup();
+
+              this.map.addLayer(this.shapeLayer);
+
+              this.map.on("draw:created", (e: LeafletEvent) => {
+                const polygon = e.layer;
+                this.shapeLayer.clearLayers();
+                this.shapeLayer.addLayer(polygon);
+                polygon.options.editing || (polygon.options.editing = {});
+                polygon.editing.enable();
+                this.fitBounds(polygon.getBounds());
+              });
+
+              L.drawLocal.draw.handlers.polygon.tooltip = {
+                start: "Clicca per iniziare a disegnare il poligono",
+                cont: "Clicca per continuare a disegnare il poligono",
+                end: "Clicca sul primo punto per chiudere il poligono",
+              };
+
+              resolve();
+            })
+            .catch((error: string) => {
+              console.error(error);
+              reject();
+            });
+        }
+      );
+    } else {
+      return new Promise(
+        (
+          resolve: (...args: Array<unknown>) => unknown,
+          reject: () => unknown
+        ) => {
+          // @ts-ignore
+          import(
+            /* webpackChunkName: "chunks/leaflet.freedraw" */ "leaflet-freedraw"
+          )
+            .then((module: any) => {
+              FreeDraw = module.default;
+
+              this.freeDraw = new FreeDraw();
+
+              this.freeDraw.on("markers", (e: any) => {
+                if (
+                  e.eventType === "create" &&
+                  e.latLngs.length &&
+                  e.latLngs[0].length > 2
+                ) {
+                  const polygon = L.polygon(
+                    e.latLngs,
+                    drawingOptions
+                  ) as L.Polygon;
+
+                  this.fitBounds(polygon.getBounds());
+
+                  this.map.fire("draw:created", {
+                    originalEvent: e,
+                    layer: polygon,
+                  });
+
+                  this.stopDrawing();
+                }
+              });
+
+              this.map.addLayer(this.freeDraw);
+
+              this.freeDraw.mode(FreeDraw.NONE);
+
+              resolve();
+            })
+            .catch((error: string) => {
+              console.error(error);
+              reject();
+            });
+        }
+      );
+    }
+  }
+
+  drawPolygonFromPoints(latLngs: Array<LatLng>): void {
+    if (!latLngs) return;
+
+    const polygon = L.polygon(latLngs, drawingOptions);
+
+    if (this.freeDraw) this.freeDraw.create(polygon.getLatLngs()[0]);
+    else if (this.shapeLayer) this.shapeLayer.addLayer(polygon);
+    else {
+      this.shapeLayer = new L.FeatureGroup();
+      this.map.addLayer(this.shapeLayer);
+      this.shapeLayer.addLayer(polygon);
+    }
+
+    /*if (!this.freeDraw)
+            this.map.fitBounds(polygon.getBounds(), {
+                padding: [10, 10]
+            });
+         */
+
+    this.map.fire("draw:created", {
+      layer: polygon,
+    });
+  }
+
+  deleteMarkers(): void {
+    const keys = Object.keys(this.markers);
+
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+
+      const marker = this.findMarker(Number(key));
+
+      if (marker) this.map.removeLayer(marker);
+    }
+
+    this.markers.clear();
+
+    if (this.markerClusterer) this.markerClusterer.clearLayers();
+  }
+
+  deleteShape(): void {
+    if (this.freeDraw) this.freeDraw.clear();
+
+    if (this.shapeLayer) this.shapeLayer.clearLayers();
+
+    this.map.fire("draw:deleted");
+  }
+
+  hasShape(): boolean {
+    return (
+      (this.freeDraw && this.freeDraw.size() > 0) ||
+      (this.shapeLayer && this.shapeLayer.getLayers().length > 0)
+    );
+  }
+
+  getShape(): Polyline {
+    return this.freeDraw
+      ? this.freeDraw.all()[0]
+      : this.shapeLayer
+      ? this.shapeLayer.getLayers()[0]
+      : null;
+  }
+
+  getShapePoints(): Array<LatLng> {
+    return (this.getShape()?.getLatLngs()[0] as Array<LatLng>) ?? [];
+  }
+
+  initSearch(): Promise<unknown> {
+    return new Promise(
+      (
+        resolve: (...args: Array<unknown>) => unknown,
+        reject: () => unknown
+      ) => {
+        Promise.all([
+          require(/* webpackChunkName: "chunks/leaflet.geocoder" */ "leaflet-control-geocoder/dist/Control.Geocoder.css"),
+          // @ts-ignore
+          import(
+            /* webpackChunkName: "chunks/leaflet.geocoder" */ "leaflet-control-geocoder"
+          ),
+        ])
+          .then(() => {
+            this.search = new L.Control.Geocoder({
+              defaultMarkGeocode: false,
+              collapsed: false,
+              placeholder: "Inserisci un indirizzo",
+              errorMessage: "Nessun luogo trovato",
+              geocoder: new L.Control.Geocoder.Mapbox(MAP_TILER_TOKEN, {
+                serviceUrl:
+                  "https://api.mapbox.com/geocoding/v5/mapbox.places/",
+                geocodingQueryParams: { language: "it" },
+                reverseQueryParams: {},
+              }),
+            })
+              .on("markgeocode", (e: any) => {
+                this.stopDrawing();
+                this.deleteShape();
+                this.fitBounds(e.geocode.bbox);
+                this.setDrawing();
+              })
+              .addTo(this.map);
+
+            resolve();
+          })
+          .catch((error: string) => {
+            console.error(error);
+            reject();
+          });
+      }
+    );
+  }
+
+  isInitialized(): boolean {
+    return this.initialized;
+  }
+
+  getInfowindow(): Popup {
+    return this.infowindow;
+  }
+
+  getInfowindowCarousel(): Popup {
+    return this.infowindowCarousel;
+  }
+
+  getMap(): LMap {
+    return this.map;
+  }
+
+  getMapContainer(): HTMLElement {
+    return this.mapContainer;
+  }
+
+  getMarkers(): Map<number, Marker> {
+    return this.markers;
+  }
+
+  getMarkersCount(): number {
+    return this.markers.size;
+  }
+
+  getMarkerClusterer(): MarkerClusterGroup {
+    return this.markerClusterer;
+  }
+
+  addListener(
+    obj: any,
+    event: string,
+    fn: (args?: any) => unknown | void
+  ): void {
+    obj.on(event, fn);
+  }
+
+  init(
+    selector: JQuery,
+    apiKey: string,
+    COLORS: Record<string, string>,
+    opts?: any,
+    longLat: { longitude: number; latitude: number } | null = null,
+    zoom: number = 12
+  ): void {
+    this.mapContainer = selector[0];
+    if (!this.mapContainer || this.map) return;
+
+    drawingOptions = defaultDrawingOptions(COLORS);
+
+    const dataZoom = this.mapContainer.getAttribute("data-zoom");
+    if (dataZoom) zoom = parseInt(dataZoom);
+
+    let lat, lng;
+    if (longLat) {
+      lat = longLat.latitude;
+      lng = longLat.longitude;
+    } else {
+      lat = parseFloat(this.mapContainer.getAttribute("data-lat") || String(0));
+      lng = parseFloat(this.mapContainer.getAttribute("data-lng") || String(0));
+    }
+
+    const drawing = this.mapContainer.hasAttribute("data-drawing-manager");
+    const search = this.mapContainer.hasAttribute("data-search");
+    const cluster = this.mapContainer.hasAttribute("data-cluster");
+
+    let center = [lat, lng];
+
+    if (!this.validateCoordinate(center[0], center[1])) {
+      center = [45.464161, 9.190336];
+    }
+
+    this.config = { zoom, center, cluster, search, drawing };
+
+    this.load(this.config, apiKey, opts);
+  }
+
+  load(config: any, apiKey: string, opts: any): void {
+    if (!this.spinner) {
+      this.spinner = document.createElement("div");
+      this.spinner.className = "spinner-wrapper";
+
+      this.spinnerIcon = document.createElement("div");
+      this.spinnerIcon.className = "spinner";
+
+      this.spinnerIcon.innerHTML = SVG;
+
+      this.spinner.appendChild(this.spinnerIcon);
+      this.mapContainer.appendChild(this.spinner);
+    }
+
+    const defOpts = {
+      maxZoom: MAX_ZOOM,
+      zoomControl: false,
+    };
+
+    const options = $.extend({}, defOpts, opts);
+
+    getL().then(([leaflet]: any) => {
+      window["L"] = leaflet;
+      L = leaflet;
+
+      const self = this;
+
+      if (window["touch"]) this.addTouchHandler();
+
+      this.map = new L.Map(this.mapContainer, options);
+
+      L.control
+        .zoom({
+          position: "bottomright",
+        })
+        .addTo(this.map);
+
+      // eslint-disable-next-line max-len
+      //L.tileLayer(`https://api.mapbox.com/styles/v1/wikicasa/cjjfg09rh57nr2rqumbg6dds3/tiles/256/{z}/{x}/{y}@2x?access_token=${token}`).addTo(this.map);
+      L.tileLayer(
+        `https://api.maptiler.com/maps/${MAP_TILER_STYLE}/{z}/{x}/{y}@2x.png?key=${apiKey}`,
+        {
+          tileSize: 512,
+          zoomOffset: -1,
+          minZoom: 1,
+          // eslint-disable-next-line max-len
+          attribution:
+            '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
+          crossOrigin: true,
+        }
+      ).addTo(this.map);
+
+      this.map.setView(config.center, config.zoom);
+
+      // eslint-disable-next-line max-len
+      this.infowindow = L.popup().setContent(
+        '<div id="infowindow" class="infowindow"><div id="wrapper-single" class="wrapper-single"></div><div id="wrapper-multiple" class="wrapper-multiple"></div></div>'
+      );
+
+      L.Control.infowindowCarousel = L.Control.extend({
+        options: {
+          position: "bottomleft",
+        },
+        onAdd: function (map: LMap) {
+          this._div = L.DomUtil.create("div");
+          this._div.id = "infowindow-carousel";
+          this._div.className =
+            "infowindow-carousel siema bg-white text-left m-0 d-sm-none";
+
+          this._div.addEventListener("mouseover", () => {
+            map.dragging.disable();
+          });
+
+          this._div.addEventListener("mouseout", () => {
+            map.dragging.enable();
+          });
+
+          self.infowindowCarousel = this._div;
+
+          return this._div;
+        },
+      });
+
+      this.map.addControl(new L.Control.infowindowCarousel());
+
+      Promise.all([
+        config.search ? this.initSearch() : Promise.resolve(),
+        config.cluster ? this.initMarkerClusterer() : Promise.resolve(),
+        config.drawing ? this.initDrawingManager() : Promise.resolve(),
+        new Promise((resolve: (...args: Array<unknown>) => void) =>
+          this.map.whenReady(() => resolve())
+        ),
+      ]).then(() => {
+        this.stopSpinner();
+
+        this.mapContainer.dispatchEvent(
+          createCustomEvent("ready", {
+            detail: {
+              description: "Map init is complete",
+            },
+            bubbles: true,
+            cancelable: true,
+          })
+        );
+
+        this.initialized = true;
+
+        for (let i = 0; i < this.callbacks.length; i++) {
+          this.callbacks[i]();
+        }
+      });
+    });
+  }
+
+  startSpinner(): void {
+    this.spinner.style.display = "block";
+  }
+
+  stopSpinner(): void {
+    this.spinner.style.display = "none";
+  }
+
+  ready(fn: () => unknown): void {
+    if (this.isInitialized()) fn();
+    else this.callbacks.push(fn);
+  }
+
+  on(event: string, fn: any): void {
+    this.ready(() => {
+      this.map.on(event, fn);
+    });
+  }
+
+  setCenter(lat: number, lng: number, zoom: number = 13): void {
+    if (!this.map) return;
+
+    if (!this.validateCoordinate(lat, lng)) return;
+    this.map.setView([lat, lng], zoom);
+  }
+
+  setZoom(zoom: number): void {
+    this.map.setView(this.map.getCenter(), zoom);
+  }
+
+  getZoom(): number {
+    return this.map.getZoom();
+  }
+
+  reset(): void {
+    this.stopDrawing();
+    this.deleteShape();
+    this.deleteMarkers();
+  }
+
+  fitBounds(
+    myBounds: { getNorthEast: () => LatLng; getSouthWest: () => LatLng },
+    opts: FitBoundsOptions = { padding: [0, 0] }
+  ): void {
+    // Andrea M: use LatLngBounds constructor to pass always real LatLngBounds class to fitBounds method
+    this.map.fitBounds(
+      L.latLngBounds(myBounds.getNorthEast(), myBounds.getSouthWest()),
+      opts
+    );
+  }
+
+  fitZoom(myPoint: LatLng): void {
+    // reduces the zoom-level of myMap until it contains myPoint
+    if (!this.map.getBounds().contains(myPoint) && this.map.getZoom() > 1) {
+      this.map.setZoom(this.map.getZoom() - 1);
+      this.fitZoom(myPoint);
+    }
+  }
+
+  validateCoordinate(lat: number, lng: number): boolean {
+    if (!lat || 0 === lat || 90 < Math.abs(lat)) {
+      return false;
+    }
+    if (!lng || 0 === lng || 180 < Math.abs(lng)) {
+      return false;
+    }
+    return true;
+  }
+
+  getDistance(latLng: LatLng, otherLatLng: LatLng): number {
+    return this.map.distance(latLng, otherLatLng);
+  }
+
+  geocode(address: string): JQueryPromise<unknown> {
+    return $.ajax({
+      dataType: "json",
+      contentType: "application/json",
+      type: "GET",
+      url: `https://api.mapbox.com/geocoding/v5/mapbox.places/${address}.json?language=it&access_token=${MAP_TILER_TOKEN}`,
+    });
+  }
+
+  isMarkerInsidePolygon(
+    coordinates: Array<number>,
+    points: Array<LatLng>
+  ): boolean {
+    const x = coordinates[0],
+      y = coordinates[1];
+
+    let inside = false;
+    for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
+      const xi = points[i].lat,
+        yi = points[i].lng;
+      const xj = points[j].lat,
+        yj = points[j].lng;
+
+      const intersect =
+        yi > y != yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+      if (intersect) inside = !inside;
+    }
+
+    return inside;
+  }
+
+  addButton(btn: JQuery): void {
+    if (!this.buttonsWrapper) {
+      this.buttonsWrapper = $(`<div class="map-btn"></div>`);
+      $(this.mapContainer).append(this.buttonsWrapper);
+    }
+
+    this.buttonsWrapper.append(btn);
+  }
+
+  addTouchHandler(): void {
+    L.Map.mergeOptions({
+      touchExtend: true,
+    });
+
+    L.Map.TouchExtend = L.Handler.extend({
+      initialize: function (map: LMap) {
+        this._map = map;
+        this._container = map.getContainer();
+      },
+
+      addHooks: function () {
+        L.DomEvent.on(this._container, "touchstart", this._onTouchStart, this);
+        L.DomEvent.on(this._container, "touchend", this._onTouchEnd, this);
+        L.DomEvent.on(this._container, "touchmove", this._onTouchMove, this);
+      },
+
+      removeHooks: function () {
+        L.DomEvent.off(this._container, "touchstart", this._onTouchStart, this);
+        L.DomEvent.off(this._container, "touchend", this._onTouchEnd, this);
+        L.DomEvent.off(this._container, "touchmove", this._onTouchMove, this);
+      },
+
+      _onTouchEvent: function (e: TouchEvent, type: string) {
+        if (!this._map._loaded) {
+          return;
+        }
+
+        const touch = e.touches[0],
+          rect = this._container.getBoundingClientRect(),
+          lat = touch.clientX - rect.left - this._container.clientLeft,
+          lng = touch.clientY - rect.top - this._container.clientTop,
+          containerPoint = L.point(lat, lng),
+          layerPoint = this._map.containerPointToLayerPoint(containerPoint),
+          latlng = this._map.layerPointToLatLng(layerPoint);
+
+        //const containerPoint = this._map.mouseEventToContainerPoint(e);
+        //const layerPoint = this._map.containerPointToLayerPoint(containerPoint);
+        //const latlng = this._map.layerPointToLatLng(layerPoint);
+        try {
+          this._map.fire(type, {
+            latlng: latlng,
+            layerPoint: layerPoint,
+            containerPoint: containerPoint,
+            originalEvent: e,
+          });
+          // eslint-disable-next-line no-empty
+        } catch (e) {}
+      },
+
+      _onTouchStart: function (e: LeafletEvent) {
+        this._onTouchEvent(e, "mousedown");
+      },
+
+      _onTouchEnd: function (e: LeafletEvent) {
+        if (!this._map._loaded) {
+          return;
+        }
+        this._map.fire("mouseup", {
+          originalEvent: e,
+        });
+      },
+
+      _onTouchMove: function (e: LeafletEvent) {
+        this._onTouchEvent(e, "mousemove");
+      },
+    });
+
+    L.Map.addInitHook("addHandler", "touchExtend", L.Map.TouchExtend);
+  }
+}
+
+export function getL(): any {
+  return Promise.all([
+    // @ts-ignore
+    import(/* webpackChunkName: "chunks/leaflet" */ "leaflet/src/Leaflet"),
+    require(/* webpackChunkName: "chunks/leaflet" */ "leaflet/dist/leaflet.css"),
+  ]);
+}