User Location

User location markers allow you to display the user's current position on the map with a visual indicator. This guide explains how to create, customise, and use user location markers.

Creating a User Location Marker

The simplest way to create a user location marker is to use the default geolocation provider:

// Create a marker that automatically gets the user's location
const userLocationMarker = new maplayr.UserLocationMarker();

// Add it to your map view
mapView.addUserLocationMarker(userLocationMarker);
Copy

By default, the marker will request the user's location using the browser's Geolocation API and automatically update when the position changes.

If you want to use the Geolocation API with specific parameters, you must construct the GeolocationPositionProvider manually and pass it to the user location marker:

const locationProvider = new maplayr.GeolocationPositionProvider({
  enableHighAccuracy: true,
  timeout: 15000,
  maximumAge: 30000
});

const userLocationMarker = new maplayr.UserLocationMarker(locationProvider);
Copy

Manual Location Control

You can create a marker without automatic location tracking and set the position manually:

// Create a marker with an initial position
const userLocationMarker = new maplayr.UserLocationMarker({
  coordinates: new maplayr.Coordinates(36.69427, -6.41905),
  accuracy: 10 // accuracy in metres
});

// Add it to your map view
mapView.addUserLocationMarker(userLocationMarker);
Copy

This is useful for testing, demos, or when you want to control the location programmatically. You can update the user location marker's position anytime by setting its position property.

Customising Appearance

You can customise the visual appearance of the user location marker:

const userLocationMarker = new maplayr.UserLocationMarker();

// Change the fill color (supports any CSS color format)
userLocationMarker.fillColor = "#ff6b35";

mapView.addUserLocationMarker(userLocationMarker);
Copy

The user location marker displays as a circular indicator with:

• An outer translucent ring showing location accuracy
• A white border ring
• An inner filled circle in the specified color

Best Practices

• Use the default geolocation provider for most real-world applications
• Choose distinct colors when using multiple markers
• Consider the user experience when requesting location permissions