---
title: "GeolocateControl | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Class GeolocateControl`Maptiler`

A `GeolocateControl` control provides a button that uses the browser's geolocation API to locate the user on the map.

Not all browsers support geolocation, and some users may disable the feature. Geolocation support for modern browsers including Chrome requires sites to be served over HTTPS. If geolocation support is not available, the `GeolocateControl` will show as disabled.

The zoom level applied will depend on the accuracy of the geolocation provided by the device.

The `GeolocateControl` has two modes. If `trackUserLocation` is `false` (default) the control acts as a button, which when pressed will set the map's camera to target the user location. If the user moves, the map won't update. This is most suited for the desktop. If `trackUserLocation` is `true` the control acts as a toggle button that when active the user's location is actively monitored for changes. In this mode the `GeolocateControl` has three interaction states:

-   active - the map's camera automatically updates as the user's location changes, keeping the location dot in the center. Initial state and upon clicking the `GeolocateControl` button.
-   passive - the user's location dot automatically updates, but the map's camera does not. Occurs upon the user initiating a map movement.
-   disabled - occurs if Geolocation is not available, disabled or denied.

These interaction states can't be controlled programmatically, rather they are set based on user interactions.

## State Diagram[](#state-diagram)

![GeolocateControl state diagram](https://docs.maptiler.com/assets/tsdocs/3269297/78e720e5-d781-4da8-9803-a7a0e6aaaa9f)

#### Example[](#example)

```typescript
map.addControl(new GeolocateControl({
    positionOptions: {
        enableHighAccuracy: true
    },
    trackUserLocation: true
}));
```

#### See[](#see)

[Locate the user](https://maplibre.org/maplibre-gl-js/docs/examples/locate-the-user/)

## Events[](#events)

**Event** `trackuserlocationend` of type [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/) will be fired when the `GeolocateControl` changes to the background state, which happens when a user changes the camera during an active position lock. This only applies when `trackUserLocation` is `true`. In the background state, the dot on the map will update with location updates but the camera will not.

**Event** `trackuserlocationstart` of type [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/) will be fired when the `GeolocateControl` changes to the active lock state, which happens either upon first obtaining a successful Geolocation API position for the user (a `geolocate` event will follow), or the user clicks the geolocate button when in the background state which uses the last known position to recenter the map and enter active lock state (no `geolocate` event will follow unless the users's location changes).

**Event** `userlocationlostfocus` of type [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/) will be fired when the `GeolocateControl` changes to the background state, which happens when a user changes the camera during an active position lock. This only applies when `trackUserLocation` is `true`. In the background state, the dot on the map will update with location updates but the camera will not.

**Event** `userlocationfocus` of type [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/) will be fired when the `GeolocateControl` changes to the active lock state, which happens upon the user clicks the geolocate button when in the background state which uses the last known position to recenter the map and enter active lock state.

**Event** `geolocate` of type [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/) will be fired on each Geolocation API position update which returned as success. `data` - The returned [Position](https://developer.mozilla.org/en-US/docs/Web/API/Position) object from the callback in [Geolocation.getCurrentPosition()](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition) or [Geolocation.watchPosition()](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition).

**Event** `error` of type [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/) will be fired on each Geolocation API position update which returned as an error. `data` - The returned [PositionError](https://developer.mozilla.org/en-US/docs/Web/API/PositionError) object from the callback in [Geolocation.getCurrentPosition()](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition) or [Geolocation.watchPosition()](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition).

**Event** `outofmaxbounds` of type [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/) will be fired on each Geolocation API position update which returned as success but user position is out of map `maxBounds`. `data` - The returned [Position](https://developer.mozilla.org/en-US/docs/Web/API/Position) object from the callback in [Geolocation.getCurrentPosition()](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition) or [Geolocation.watchPosition()](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition).

#### Example[](#example-1)

```typescript
// Initialize the geolocate control.
let geolocate = new GeolocateControl({
  positionOptions: {
      enableHighAccuracy: true
  },
  trackUserLocation: true
});
// Add the control to the map.
map.addControl(geolocate);
// Set an event listener that fires
// when a trackuserlocationend event occurs.
geolocate.on('trackuserlocationend', () => {
  console.log('A trackuserlocationend event has occurred.')
});
```

#### Example[](#example-2)

```typescript
// Initialize the geolocate control.
let geolocate = new GeolocateControl({
  positionOptions: {
      enableHighAccuracy: true
  },
  trackUserLocation: true
});
// Add the control to the map.
map.addControl(geolocate);
// Set an event listener that fires
// when a trackuserlocationstart event occurs.
geolocate.on('trackuserlocationstart', () => {
  console.log('A trackuserlocationstart event has occurred.')
});
```

#### Example[](#example-3)

```typescript
// Initialize the geolocate control.
let geolocate = new GeolocateControl({
  positionOptions: {
      enableHighAccuracy: true
  },
  trackUserLocation: true
});
// Add the control to the map.
map.addControl(geolocate);
// Set an event listener that fires
// when an userlocationlostfocus event occurs.
geolocate.on('userlocationlostfocus', function() {
  console.log('An userlocationlostfocus event has occurred.')
});
```

#### Example[](#example-4)

```typescript
// Initialize the geolocate control.
let geolocate = new GeolocateControl({
  positionOptions: {
      enableHighAccuracy: true
  },
  trackUserLocation: true
});
// Add the control to the map.
map.addControl(geolocate);
// Set an event listener that fires
// when an userlocationfocus event occurs.
geolocate.on('userlocationfocus', function() {
  console.log('An userlocationfocus event has occurred.')
});
```

#### Example[](#example-5)

```typescript
// Initialize the geolocate control.
let geolocate = new GeolocateControl({
  positionOptions: {
      enableHighAccuracy: true
  },
  trackUserLocation: true
});
// Add the control to the map.
map.addControl(geolocate);
// Set an event listener that fires
// when a geolocate event occurs.
geolocate.on('geolocate', () => {
  console.log('A geolocate event has occurred.')
});
```

#### Example[](#example-6)

```typescript
// Initialize the geolocate control.
let geolocate = new GeolocateControl({
  positionOptions: {
      enableHighAccuracy: true
  },
  trackUserLocation: true
});
// Add the control to the map.
map.addControl(geolocate);
// Set an event listener that fires
// when an error event occurs.
geolocate.on('error', () => {
  console.log('An error event has occurred.')
});
```

#### Example[](#example-7)

```typescript
// Initialize the geolocate control.
let geolocate = new GeolocateControl({
  positionOptions: {
      enableHighAccuracy: true
  },
  trackUserLocation: true
});
// Add the control to the map.
map.addControl(geolocate);
// Set an event listener that fires
// when an outofmaxbounds event occurs.
geolocate.on('outofmaxbounds', () => {
  console.log('An outofmaxbounds event has occurred.')
});
```

#### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#GeolocateControl))

-   [GeolocateControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/)
    -   GeolocateControl
        -   [MaptilerGeolocateControl](https://docs.maptiler.com/sdk-js/api-reference/classes/MaptilerGeolocateControl/)

##### Index

### Constructors[](#constructors)

[constructor](#constructor)

### Properties[](#properties)

[options](#options)

### Methods[](#methods)

[fire](#fire) [listens](#listens) [off](#off) [on](#on) [onAdd](#onadd) [once](#once) [onRemove](#onremove) [setEventedParent](#seteventedparent) [trigger](#trigger)

## Constructors[](#constructors-1)

### constructor[](#constructor)

-   new GeolocateControl(options: [GeolocateControlOptions](https://docs.maptiler.com/sdk-js/api-reference/types/GeolocateControlOptions/)): GeolocateControl[](#constructorgeolocatecontrol)
    
    #### Parameters
    
    -   options: [GeolocateControlOptions](https://docs.maptiler.com/sdk-js/api-reference/types/GeolocateControlOptions/)
        
        the control's options
        
    
    #### Returns GeolocateControl
    
    Inherited from [GeolocateControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/).[constructor](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/#constructor)
    

## Properties[](#properties-1)

### options[](#options)

options: [GeolocateControlOptions](https://docs.maptiler.com/sdk-js/api-reference/types/GeolocateControlOptions/)

Inherited from [GeolocateControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/).[options](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/#options)

## Methods[](#methods-1)

### fire[](#fire)

-   fire(event: string | [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/), properties?: any): this[](#fire-1)
    
    #### Parameters
    
    -   event: string | [Event](https://docs.maptiler.com/sdk-js/api-reference/classes/Event/)
    -   `Optional`properties: any
    
    #### Returns this
    
    Inherited from [GeolocateControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/).[fire](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/#fire)
    

### listens[](#listens)

-   listens(type: string): boolean[](#listens-1)
    
    Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type.
    
    #### Parameters
    
    -   type: string
        
        The event type
        
    
    #### Returns boolean
    
    `true` if there is at least one registered listener for specified event type, `false` otherwise
    
    Inherited from [GeolocateControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/).[listens](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/#listens)
    

### off[](#off)

-   off(type: string, listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)): this[](#off-1)
    
    Removes a previously registered event listener.
    
    #### Parameters
    
    -   type: string
        
        The event type to remove listeners for.
        
    -   listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)
        
        The listener function to remove.
        
    
    #### Returns this
    
    Inherited from [GeolocateControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/).[off](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/#off)
    

### on[](#on)

-   on(type: string, listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)): [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/)[](#on-1)
    
    Adds a listener to a specified event type.
    
    #### Parameters
    
    -   type: string
        
        The event type to add a listen for.
        
    -   listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)
        
        The function to be called when the event is fired. The listener function is called with the data object passed to `fire`, extended with `target` and `type` properties.
        
    
    #### Returns [Subscription](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Subscription/)
    
    Inherited from [GeolocateControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/).[on](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/#on)
    

### `Maptiler`onAdd[](#onadd)

-   onAdd(map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/) | [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)): [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/)[](#onadd-1)
    
    Register a control on the map and give it a chance to register event listeners and resources. This method is called by [Map.addControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#addcontrol) internally.
    
    #### Parameters
    
    -   map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/) | [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)
        
        the Map this control will be added to
        
    
    #### Returns [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/)
    
    The control's container element. This should be created by the control and returned by onAdd without being attached to the DOM: the map will insert the control's element into the DOM as necessary.
    
    Overrides [GeolocateControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/).[onAdd](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/#onadd)
    

### once[](#once)

-   once(type: string, listener?: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)): Promise<any\> | GeolocateControl[](#once-1)
    
    Adds a listener that will be called only once to a specified event type.
    
    The listener will be called first time the event fires after the listener is registered.
    
    #### Parameters
    
    -   type: string
        
        The event type to listen for.
        
    -   `Optional`listener: [Listener](https://docs.maptiler.com/sdk-js/api-reference/types/Listener/)
        
        The function to be called when the event is fired the first time.
        
    
    #### Returns Promise<any\> | GeolocateControl
    
    `this` or a promise if a listener is not provided
    
    Inherited from [GeolocateControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/).[once](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/#once)
    

### onRemove[](#onremove)

-   onRemove(): void[](#onremove-1)
    
    Unregister a control on the map and give it a chance to detach event listeners and resources. This method is called by [Map.removeControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#removecontrol) internally.
    
    #### Returns void
    
    Inherited from [GeolocateControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/).[onRemove](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/#onremove)
    

### setEventedParent[](#seteventedparent)

-   setEventedParent(parent?: [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/) | null, data?: any): this[](#seteventedparent-1)
    
    Bubble all events fired by this instance of Evented to this parent instance of Evented.
    
    #### Parameters
    
    -   `Optional`parent: [Evented](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Evented/) | null
    -   `Optional`data: any
    
    #### Returns this
    
    Inherited from [GeolocateControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/).[setEventedParent](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/#seteventedparent)
    

### trigger[](#trigger)

-   trigger(): boolean[](#trigger-1)
    
    Programmatically request and move the map to the user's location.
    
    #### Returns boolean
    
    `false` if called before control was added to a map, otherwise returns `true`.
    
    #### Example[](#example-8)
    
    ```typescript
    // Initialize the geolocate control.
    let geolocate = new GeolocateControl({
     positionOptions: {
       enableHighAccuracy: true
     },
     trackUserLocation: true
    });
    // Add the control to the map.
    map.addControl(geolocate);
    map.on('load', () => {
      geolocate.trigger();
    });
    ```
    
    Inherited from [GeolocateControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/).[trigger](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/#trigger)