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 and What is my address?

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.

Another website of mine is boutiquehotel.me, which is a site for finding great boutique hotels all around the world. For example, check out boutique hotels in Stockholm, London, New York, or Berlin.

License

MIT License