Skip to main content

User Location

User Location

Display the user's current location on the map with accuracy radius

Tags: geolocation location gps tracking user position

View Demo

The User Location demo shows how to integrate the browser's Geolocation API with your map to display the user's current position. It includes a blue marker at the user's location, an accuracy circle showing location precision, live tracking mode for continuous updates, and comprehensive error handling for permission states.

Import​

<script>
  import { Map, Marker, Source, CircleLayer } from '@classic-homes/maps-svelte';
</script>
// React
import { Map, Marker, Source, CircleLayer } from '@classic-homes/maps-react';

Basic Usage​

<script>
  import { Map, Marker, Source, CircleLayer } from '@classic-homes/maps-svelte';
  import type { LngLat } from '@classic-homes/maps-core';

  let userLocation: LngLat | null = $state(null);
  let accuracy: number | null = $state(null);

  function getLocation() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        userLocation = [position.coords.longitude, position.coords.latitude];
        accuracy = position.coords.accuracy;
      },
      (error) => console.error(error),
      { enableHighAccuracy: true }
    );
  }
</script>

<button onclick={getLocation}>Get My Location</button>

<Map title="User Location" center={userLocation ?? [0, 0]} zoom={15}>
  {#if userLocation}
    <Marker coordinates={userLocation} color="#0066ff" />
  {/if}
</Map>

Props​

Component-Specific Props​

Prop Type Default Description
navigator.geolocation Geolocation - Browser Geolocation API
enableHighAccuracy boolean true Request high accuracy GPS
timeout number 10000 Geolocation timeout in ms
maximumAge number 0 Cache age for position in ms
watchPosition function - Enable continuous tracking

Inherited Base Map Props​

Prop Type Default Description
title string required Map title for accessibility (aria-label)
description string - Optional description for screen readers
height number | string 400 Map height in pixels or CSS value
width number | string - Map width in pixels or CSS value
loading boolean false Show loading skeleton
error string | null - Error message to display
emptyMessage string - Message shown when data is empty
theme 'light' | 'dark' | 'auto' 'auto' Theme preference
animation boolean true Enable/disable animations (respects prefers-reduced-motion)
class string - Custom CSS class for styling

Accessibility​

  • The title prop is used as aria-label for screen readers
  • Keyboard navigation support for interactive elements
  • Animations respect prefers-reduced-motion media query
  • High contrast colors in both light and dark modes
  • Marker - Add interactive markers to the map (DOM-based)
  • CircleLayer - GPU-rendered circle features for accuracy radius
  • Map - Base map container component
On this page