TypeScript example for leaflet-locatecontrol 0.83.1 #362

RupertBarrow · 2025-03-06T18:32:40Z

It would be nice if you could provide a TypeScript example (with Leaflet) : I could not get v0.83.1 to work with Leaflet 1.9.4 and Ionic 8 + Angular 19 + TypeScript 5.8.2

FYI, I use leaflet-locatecontrol 0.81.1 with :

// src/types/leaflet.locatecontrol.d.ts

import * as L from 'leaflet';

declare module 'leaflet' {
  interface LocateControlOptions {
    initialZoomLevel: boolean | number;
    position?: L.ControlPosition;
    layer?: L.LayerGroup;
    setView?: boolean | 'untilPan' | 'always';
    keepCurrentZoomLevel?: boolean;
    flyTo?: boolean;
    clickBehavior?: {
      inView?: 'stop' | 'setView';
      outOfView?: 'stop' | 'setView';
      inViewNotFollowing?: 'stop' | 'setView';
    };
    returnToPrevBounds?: boolean;
    cacheLocation?: boolean;
    drawCircle?: boolean;
    drawMarker?: boolean;
    markerClass?: L.Class;
    circleStyle?: L.PathOptions;
    markerStyle?: L.PathOptions;
    followCircleStyle?: L.PathOptions;
    followMarkerStyle?: L.PathOptions;
    icon?: string;
    iconLoading?: string;
    iconElementTag?: string;
    circlePadding?: number[];
    metric?: boolean;
    onLocationError?: (err: any) => void;
    onLocationOutsideMapBounds?: (control: L.Control.Locate) => void;
    showPopup?: boolean;
    strings?: {
      title?: string;
      metersUnit?: string;
      feetUnit?: string;
      popup?: string;
      outsideMapBoundsMsg?: string;
    };
    locateOptions?: L.LocateOptions;
    showCompass: boolean;
  }

  namespace Control {
    class Locate extends L.Control {
      constructor(options?: LocateControlOptions & L.ControlOptions);

      start(): void;
      stop(): void;
      setView(): void;
      stopFollowing(): void;
      getLocation(): L.LatLng | undefined;

      options: LocateControlOptions & L.ControlOptions;
    }
  }

  namespace control {
    function locate(options?: LocateControlOptions & L.ControlOptions): Control.Locate;
  }
}

and

// src/app/components/map/leaflet/controls.ts

import * as L from 'leaflet';
import 'leaflet.locatecontrol';
...
export const ZOOM_LEVEL = 12;

export const LOCATE_CONTROL_OPTIONS: L.LocateControlOptions = {
  initialZoomLevel: ZOOM_LEVEL,
  position: 'topright',
  drawMarker: true,
  drawCircle: true,
  showPopup: true,
  showCompass: true,
  strings: {
    title: 'Show my current location',
  },
};

and

// src/app/components/map/map.component.ts

...
import { LOCATE_CONTROL_OPTIONS } from './leaflet/controls';
...
export class MapComponent implements OnInit {
   ...
  async ngOnInit() {
    const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' });

    this.modalsManager.presentMapModal();

    const map = L.map('map', {
      zoom: ZOOM_LEVEL,
      zoomControl: false,
      zoomSnap: 0.1,
      layers: [osm],
    }).on('load', () => {
      // Set the map and display markers the first time the map is displayed
      this.mapDataService.init(map);

      // Initialize custom controls and display them at the same time as the map
      this._initCustomControls(map);
    });
  }

   ...
  private _initCustomControls(map: L.Map) {
    const locateControl = L.control.locate(LOCATE_CONTROL_OPTIONS);
    this.customControlsContainer.appendChild(locateControl.onAdd(map));
  }

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeScript example for leaflet-locatecontrol 0.83.1 #362

TypeScript example for leaflet-locatecontrol 0.83.1 #362

TypeScript example for leaflet-locatecontrol 0.83.1 #362

TypeScript example for leaflet-locatecontrol 0.83.1 #362

Comments