Get the user’s location using the GPS with Leaflet geolocate control

This tutorial shows how to use the geolocate control with Leaflet to get the user’s location using the GPS or the browser location.

Unlock the power of GPS and Leaflet geolocate control to access your user’s location effortlessly and enhance your application’s functionality.


npm install --save @maptiler/leaflet-maptilersdk leaflet

main.js

import { MaptilerLayer, MapStyle } from '@maptiler/leaflet-maptilersdk';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const key = 'YOUR_MAPTILER_API_KEY_HERE';

// but this is going to be superseded by the `geolocate: true` options
const map = L.map('map').setView([0, 0], 1);
const mtLayer = new MaptilerLayer({
  apiKey: key,
  style: MapStyle.STREETS, // optional
  geolocate: true //set the initial view to the user's location
}).addTo(map);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Get the user's location using the GPS with Leaflet geolocate control | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Vector Tiles in Leaflet JS</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
    <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
    <script src="https://cdn.maptiler.com/leaflet-maptilersdk/v4.1.0/leaflet-maptilersdk.umd.min.js"></script>
    <style>
      #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const key = 'YOUR_MAPTILER_API_KEY_HERE';

      // but this is going to be superseded by the `geolocate: true` options
      const map = L.map('map').setView([0, 0], 1);
      const mtLayer = L.maptiler.maptilerLayer({
        apiKey: key,
        style: L.maptiler.MapStyle.STREETS, // optional
        geolocate: true //set the initial view to the user's location
      }).addTo(map);
    </script>
  </body>
</html>

Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to secure the key before you publish it.

Geolocate control

Examples

Get user location using GPS and Leaflet geolocate control.

Get the user’s location using the GPS with Leaflet geolocate control

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Related examples

Geolocate control