Leaflet UserMarker

UserMarker is a leaflet plugin for plotting a marker representing a user, or multiple users, on a map.

Features

Leaflet UserMarker is an iOS style marker for representing users on a map. It extends Leaflet's Marker class, so everything you can do with a normal marker - like setting lat/lng and binding popups - can be done with UserMarker's as well. In addition to this, UserMarker has the following features:

Ability to set accuracy which will be displayed as a blue, transparent circle around the marker.
Turn on/off a "pulsing" effect that can be used to represent high accuracy, or if a user is online.

See it in action

Leaflet UserMarker can be seen in action on Longitude.me.

You can also see the bundled examples.

Example Code

Create a user marker and add it to a map:

var marker = L.userMarker([5.45, 70.56]);
marker.addTo(map);

Set accuracy on an existing marker:

marker.setAccuracy(400); // 400 meters accuracy

Create a "pulsing" marker with small icon and accuracy 100:

var marker = L.userMarker(latlng, {pulsing:true, accuracy:100, smallIcon:true});
marker.addTo(map);

Locate the map viewers position and display a UserMarker:

map.on("locationfound", function(location) {
    if (!marker)
        marker = L.userMarker(location.latlng).addTo(map);

    marker.setLatLng(location.latlng);
    marker.setAccuracy(location.accuracy);
});
map.locate({
    watch: false,
    locate: true,
    setView: true,
    enableHighAccuracy: true
});

Author

Usermarker is developed by Jonatan Heyman.

License