https://github.com/heyman/leaflet-usermarker

Leaflet plugin for plotting a marker representing a user, or multiple users, on a Leaflet map
https://github.com/heyman/leaflet-usermarker

Last synced: 1 day ago
JSON representation

Leaflet plugin for plotting a marker representing a user, or multiple users, on a Leaflet map

• Host: GitHub
• URL: https://github.com/heyman/leaflet-usermarker
• Owner: heyman
• License: mit
• Created: 2013-07-06T11:22:33.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2020-11-06T12:53:58.000Z (about 4 years ago)
• Last Synced: 2024-10-05T18:35:14.544Z (about 1 month ago)
• Language: CSS
• Homepage:
• Size: 19.5 KB
• Stars: 77
• Watchers: 11
• Forks: 20
• Open Issues: 4
• Metadata Files:
  • Readme: README.rst
  • License: LICENSE

Awesome Lists containing this project

README

        
==================

Leaflet UserMarker

==================

UserMarker is a leaflet plugin for plotting a marker representing a user, 

or multiple users, on a map.

.. image:: https://images.weserv.nl/?url=static.longitude.me/img/opengraph-image.jpg

    :alt: longitude.me

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:**

.. code-block:: javascript

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

    marker.addTo(map);

  

**Set accuracy on an existing marker:**

.. code-block:: javascript

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

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

.. code-block:: javascript

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

    marker.addTo(map);

**Locate the map viewers position and display a UserMarker:**

.. code-block:: javascript

    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