Back To Home option

gistfile1.txt

import { ControlPosition } from "leaflet";

...

export interface IBackToHomeOptions {
    position?: ControlPosition;
    home?: {lat: number, lng: number};
    text?: string;
}

helpers\array.ts

export const compareToArrays = (a: unknown[], b: unknown[]) =>
  JSON.stringify(a) === JSON.stringify(b);

map.component.ts

import { AfterViewInit, Component, EventEmitter, Input, Output } from '@angular/core';
import { IMarker, IConfigMap } from './../../models';
import { Controls } from '../../services/controls';
import { Circle, DefaultMarker } from '../../services/markers';
import { LeafletMap as Map } from './../../services/ng-leaflet-map.service';
import { Map as MapObject } from 'leaflet';
import { ISizeMap } from '../../models/config-map';
import { DefaultConfig } from '../../services';
import { DrawMap } from '../../services/draw-map';
import { ICircle } from '../../models/layers';
@Component({
  selector: 'ng-leaflet-map',
  templateUrl: './map.component.html',
  styles: [
  ]
})
export class MapComponent implements AfterViewInit {
  ...

  setControls() {
    this.config!!.scale && Controls.addScale(this.map.get(), this.config?.scale);
    this.config!!.layers && Controls.addBaseOverLayers(this.map.get(), this.config!!.layers);
    this.config!!.zoom && Controls.changeZoomConfig(this.map.get(), this.config?.zoom);
    this.config!!.fullscreen && Controls.activeFullScreen(this.map.get(), this.mapId);
    this.config!!.watermark && Controls.activeWatermark(this.map.get(), this.config!!.watermark);
    this.config!!.ourLocation?.active && Controls.getOurLocation(this.map.get(), this.config?.ourLocation.zoom || 12)
    this.config!!.drawRoute?.showControl && Controls.addTitle(
      this.map.get(),
      this.config!!.drawRoute.title || '',
      this.config!!.drawRoute.subtitle || '',
      this.config!!.drawRoute.position
    );
    this.config!!.backToHome && Controls.showBackToHome(this.map.get(), this.config?.backToHome);
  }

}

ng-leaflet\projects\mugan86\ng-leaflet\src\lib\models\config-map.ts

import { ControlPosition } from "leaflet";
import { MarkerColorOptions } from "../config/markers/default";
import { IBackToHomeOptions, IBaseLayer, ILayers, IScaleOptions, IWatermarkOptions, IZoomOptions } from "./controls";

export interface IConfigMap {
    markerColor?: MarkerColorOptions;
    center?: [number, number];
    scale?: IScaleOptions | undefined;
    layers?: ILayers;
    zoom?: IZoomOptions;
    fullscreen?: boolean;
    defaultLayer?: IBaseLayer;
    watermark?: IWatermarkOptions;
    fitBounds?: boolean;
    ourLocation?: IOurLocationOptions;
    drawRoute?: IDrawRouteOptions;
    backToHome?: IBackToHomeOptions;
}

interface IOurLocationOptions {
    active: boolean;
    zoom?: number;
}

interface IDrawRouteOptions {
    active?: boolean;
    title?: string;
    subtitle?: string;
    position?: ControlPosition;
    showControl?: boolean;
}

export interface ISizeMap {
    width: string;
    height: string;
}

ng-leaflet\projects\mugan86\ng-leaflet\src\lib\plugins\controls\back-to-home.ts

import { Control, DomUtil, Map } from 'leaflet';
import { IBackToHomeOptions } from '../../models/controls';

import { compareToArrays } from './../../helpers/array';

const htmlTemplate =
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M32 18.451L16 6.031 0 18.451v-5.064L16 .967l16 12.42zM28 18v12h-8v-8h-8v8H4V18l12-9z" /></svg>';

const BackToHome = Control.extend({
  options: {
    home: { lat: 43.1746, lng: -2.4125 },
    position: 'topleft',
    text: 'Volver al punto de inicio',
  },
  onAdd: function (map: Map) {
    const btn = DomUtil.create('button');
    btn.title = 'back to home';
    btn.style.width = '40px';
    btn.innerHTML = htmlTemplate;
    btn.className += 'leaflet-bar back-to-home hidden';
    btn.style.visibility = 'hidden';

    btn.onclick = () => {
      map.flyTo([this.options.home.lat, this.options.home.lng], 13);
      btn.style.visibility = 'visible';
    };

    map.on('moveend', () => {
      const { lat: latCenter, lng: lngCenter } = map.getCenter();

      const latC = +latCenter.toFixed(3) * 1;
      const lngC = +lngCenter.toFixed(3) * 1;
  
      const defaultCoordinate = [this.options.home.lat, this.options.home.lng];
  
      const centerCoordinate = [latC, lngC];
  
      const isMove = !compareToArrays(centerCoordinate, defaultCoordinate);
      console.log(isMove, centerCoordinate, defaultCoordinate);
      if (!compareToArrays(centerCoordinate, defaultCoordinate)) {
        btn.style.visibility = 'visible';
      }
    });

    return btn;
  },
});

export const backToHome = (options?: IBackToHomeOptions) =>
  new BackToHome(options);

ng-leaflet\src\lib\services\controls.ts

...
import { backToHome } from '../plugins/controls/back-to-home';
class Controls {
 

  static showBackToHome(map: Map, config?: IBackToHomeOptions) {
    backToHome(config).addTo(map);
  }
...
}

export { Controls };