User Geolocation & Location Tracking

Not covered by the current SDK release notes

Geolocation is listed as an SDK feature, but getMyLocation() is not documented in the current ss-map-gl release notes, so this page's signature has not been reverified against that release. Confirm behavior against your installed version before relying on it.

The MapEngine class provides a built-in getMyLocation() method that interacts directly with the browser's Geolocation API to locate the user and display a live tracking marker.

---

getMyLocation() Method

mapEngine.getMyLocation(showMarker, trackUserLocation, options): Promise<GeolocationCoordinates>

Parameters

• showMarker (boolean): If true, adds a pulsating location marker on the map.
• trackUserLocation (boolean): If true, continuously listens for position updates and pans the viewport.
• options (PositionOptions): HTML5 Geolocation API configuration object.

---

Example: Locate Me Button

import React, { useEffect, useRef, useState } from 'react';
import { MapEngine } from '@sovereignsolutions/ss-map-gl';

export default function GeolocationExample() {
  const mapRef = useRef<HTMLDivElement>(null);
  const engineRef = useRef<MapEngine | null>(null);
  const [coords, setCoords] = useState<{ lat: number; lng: number } | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!mapRef.current) return;

    const mapEngine = new MapEngine({
      container: mapRef.current,
      center: [78.9629, 20.5937],
      zoom: 4,
    });

    engineRef.current = mapEngine;
    return () => mapEngine.destroy();
  }, []);

  const handleGetLocation = async () => {
    if (!engineRef.current) return;
    setLoading(true);

    try {
      const position = await engineRef.current.getMyLocation(true, true, {
        enableHighAccuracy: true,
        timeout: 10000,
        maximumAge: 0,
      });

      setCoords({
        lat: position.latitude,
        lng: position.longitude,
      });
    } catch (err) {
      console.error('Failed to get location:', err);
      alert('Geolocation permission denied or timed out.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <button
        onClick={handleGetLocation}
        disabled={loading}
        style={{
          marginBottom: '10px',
          padding: '8px 18px',
          borderRadius: '9999px',
          background: '#0284c7',
          color: '#fff',
          border: 'none',
          cursor: 'pointer',
        }}
      >
        {loading ? 'Locating...' : 'Find My Location'}
      </button>

      {coords && (
        <p style={{ fontSize: '0.9rem', color: '#94a3b8' }}>
          Latitude: <strong>{coords.lat.toFixed(5)}</strong>, Longitude: <strong>{coords.lng.toFixed(5)}</strong>
        </p>
      )}

      <div ref={mapRef} style={{ width: '100%', height: '450px', borderRadius: '12px' }} />
    </div>
  );
}