Leaflet.Locate

To install the plugin for production use, use npm to add leaflet.locatecontrol to your project.

npm install leaflet.locatecontrol

If you are using a module bundler or ESM, import LocateControl directly. Note that when using this method, you must use new LocateControl() instead of the L.control.locate() shorthand.

import { LocateControl } from "leaflet.locatecontrol";
import "leaflet.locatecontrol/dist/L.Control.Locate.min.css";

// Usage:
// const lc = new LocateControl().addTo(map);

You can load the plugin directly from the JsDelivr CDN. Replace [VERSION] with the latest release number or remove it to always use the latest version.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@[VERSION]/dist/L.Control.Locate.min.css" />
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@[VERSION]/dist/L.Control.Locate.min.js" charset="utf-8"></script>

You can customize the behavior and appearance of the control by passing an options object to L.control.locate(OPTIONS). The control inherits standard options from Leaflet Controls.

let lc = L.control
  .locate({
    position: "topright",
    strings: {
      title: "Show me where I am, yo!"
    }
  })
  .addTo(map);

To request high accuracy (GPS) from the browser, pass enableHighAccuracy: true within the locateOptions object.

map.addControl(
  L.control.locate({
    locateOptions: {
      enableHighAccuracy: true
    }
  })
);

You can control how the map zooms when a location is found using locateOptions and keepCurrentZoomLevel.

Set a maximum zoom level: Use maxZoom inside locateOptions. This only applies if keepCurrentZoomLevel is false or if the current zoom is outside the specified range.

Restrict zoom range: Use keepCurrentZoomLevel with an array [min, max] to only keep the current zoom level when it falls within that range. Outside that range, the map will zoom to the location.

// Example: Set max zoom to 10
map.addControl(
  L.control.locate({
    locateOptions: {
      maxZoom: 10
    }
  })
);

// Example: Keep zoom only between levels 13 and 18, but cap at 16
map.addControl(
  L.control.locate({
    keepCurrentZoomLevel: [13, 18],
    locateOptions: {
      maxZoom: 16
    }
  })
);

If you are using Safari with Leaflet 1.7.1, you may encounter a bug. The recommended workaround is to disable the tap option in your Leaflet map configuration.

let map = new L.Map('map', {
    tap: false,
    // ... other options
});

After including the JavaScript and CSS files, initialize the control and add it to your Leaflet map instance using L.control.locate().addTo(map).

L.control.locate().addTo(map);

You can customize the plugin's behavior by extending L.Control.Locate using L.extend. This allows you to override internal methods like _drawMarker or _removeMarker to change how the location marker is rendered.

Warning: Internal functions may change in future versions, which could break customizations.

L.Control.MyLocate = L.Control.Locate.extend({
  _drawMarker: function () {
    // override to customize the marker
  }
});

let lc = new L.Control.MyLocate();

You can programmatically control the location tracking by calling methods on the locate control instance. This is useful for setting the location automatically on page load or stopping tracking based on application logic.

• start(): Requests a location update and sets the location.
• stop(): Stops the location tracking.
• stopFollowing(): Keeps the plugin active but stops the map from automatically zooming and panning to follow the location.

// create control and add to map
let lc = L.control.locate().addTo(map);

// request location update and set location
lc.start();