@wikicasa-dev/utilities 0.2.0 → 0.2.1

package/src/custom/leaflet_map.ts

@@ -1,946 +0,0 @@
-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"),
-  ]);
-}