A single button control that locates the user on the map when clicked. The control then places an icon on their current location and zooms into that location. The marker color, zoom level, control position, and other properties of the control are customizable.


L.mapquest.key = 'KEY';

var map ='map', {
  center: [39.7392,-104.9903],
  layers: L.mapquest.tileLayer('map'),
  zoom: 12



  • options object

    An object containing any of the following key value options: position, zoom, defaultLocation, title, className, markerPrimaryColor, markerSecondaryColor.

    • position String optional, defaults to 'topright'

      The position of the control (one of the map corners).

      Possible values are 'topleft', 'topright', 'bottomleft' or 'bottomright'.

    • zoom Number optional, defaults to 16

      The zoom level that the map zooms to when the location of the user is found.

    • defaultLocation String optional

      Set a default location for the control to locate.

    • title String optional, defaults to 'Locator'

      Text for the browser tooltip that appear on control hover.

    • className String optional

      A custom CSS class name to assign to the control.

    • markerPrimaryColor String optional, defaults to '#333333'

      The primary color of the via marker added to the map.

    • markerSecondaryColor String optional, defaults to '#b7b7b7'

      The secondary color of the via marker added to the map.


      position: 'topright',
      zoom: 16,
      title: 'Locator',
      className: '',
      markerPrimaryColor: '#333333',
      markerSecondaryColor: '#b7b7b7'

Return Value

An L.Control object that can be added to a map with the addControl() function.

Visual Example