Giter VIP home page Giter VIP logo

leaflet-locatecontrol's Introduction

Leaflet.Locate

Bower version npm version

A useful control to geolocate the user with many options. Official Leaflet and MapBox plugin.

Tested with Leaflet 0.7 in Firefox, Webkit and mobile Webkit. Tested with Font Awesome 4.3.0.

v0.34.0 introduced breaking changes to the API. Please check your code!

Demo

Check out the demo at http://domoritz.github.io/leaflet-locatecontrol/demo/

Usage

Set up:

tl;dr

  1. Get CSS and JavaScript files
  2. Include CSS and JavaScript files
  3. Initialize plugin

Download JavaScript and CSS files

For testing purposes and development, you can use the latest version directly from my repository.

For production environments, use Bower and run bower install leaflet.locatecontrol or download the files from this repository. Bower will always download the latest version and keep the code up to date. The original JS and CSS files are in \src and the minified versions suitable for production are in \dist.

You can also get the latest version of the plugin with npm. This plugin is available in the npm repository. Just run npm install leaflet.locatecontrol.

The control is available from JsDelivr CDN. If you don't need the latest version, you can use the mapbox CDN.

Add the JavaScript and CSS files

The control uses Font Awesome for the icons and if you don't have it included yet, you can use the CSS from the CDN.

Then include the CSS and JavaScript files.

This example shows how to include font awesome from a CDN and the locate control files directly from github. In production, prefer using bower or the Mapbox or JsDelivr CDN.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://domoritz.github.io/leaflet-locatecontrol/dist/L.Control.Locate.min.css" />

<script src="https://domoritz.github.io/leaflet-locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>

Add the following snippet to your map initialization:

This snippet adds the control to the map. You can pass also pass a configuration.

L.control.locate().addTo(map);

Possible options

The locate controls inherits options from Leaflet Controls.

L.control.locate({
	position: 'topleft',  // set the location of the control
    layer: undefined,  // use your own layer for the location marker, creates a new layer by default
    drawCircle: true,  // controls whether a circle is drawn that shows the uncertainty about the location
    follow: false,  // follow the user's location
    setView: true, // automatically sets the map view to the user's location, enabled if `follow` is true
    keepCurrentZoomLevel: false, // keep the current map zoom level when displaying the user's location. (if `false`, use maxZoom)
    stopFollowingOnDrag: false, // stop following when the map is dragged if `follow` is true (deprecated, see below)
    remainActive: false, // if true locate control remains active on click even if the user's location is in view.
    markerClass: L.circleMarker, // L.circleMarker or L.marker
    circleStyle: {},  // change the style of the circle around the user's location
    markerStyle: {},
    followCircleStyle: {},  // set difference for the style of the circle around the user's location while following
    followMarkerStyle: {},
    icon: 'fa fa-map-marker',  // class for icon, fa-location-arrow or fa-map-marker
    iconLoading: 'fa fa-spinner fa-spin',  // class for loading icon
    iconElementTag: 'span',  // tag for the icon element, span or i
    circlePadding: [0, 0], // padding around accuracy circle, value is passed to setBounds
    metric: true,  // use metric or imperial units
    onLocationError: function(err) {alert(err.message)},  // define an error callback function
    onLocationOutsideMapBounds:  function(context) { // called when outside map boundaries
            alert(context.options.strings.outsideMapBoundsMsg);
    },
    showPopup: true, // display a popup when the user click on the inner marker
    strings: {
        title: "Show me where I am",  // title of the locate control
        metersUnit: "meters", // string for metric units
        feetUnit: "feet", // string for imperial units
        popup: "You are within {distance} {unit} from this point",  // text to appear if user clicks on circle
        outsideMapBoundsMsg: "You seem located outside the boundaries of the map" // default message for onLocationOutsideMapBounds
    },
    locateOptions: {}  // define location options e.g enableHighAccuracy: true or maxZoom: 10
}).addTo(map);

Methods

You can call start() or stop() on the locate control object to set the location of page load for example.

// create control and add to map
var lc = L.control.locate().addTo(map);

// request location update and set location
lc.start();

You can also use the helper functions to automatically stop following when the map is panned. See the example below.

var lc = L.control.locate().addTo(map);
map.on('dragstart', lc._stopFollowing, lc);

Alternatively, you can unload events when not following to avoid unnecessary events.

map.on('startfollowing', function() {
    map.on('dragstart', lc._stopFollowing, lc);
}).on('stopfollowing', function() {
    map.off('dragstart', lc._stopFollowing, lc);
});

Events

The locate control fires startfollowing and stopfollowing on the map object and passes self as data.

You can also leverage the native Leaflet events onlocationfound and onlocationerror to handle when geolocation is successful or produces an error. You can find out more about these events in the Leaflet documentation.

Extending

To customize the behavior of the plugin, use L.extend to override start, stop, drawMarker and/or removeMarker. Please be aware that functions may change and customizations become incompatible.

L.Control.MyLocate = L.Control.Locate.extend({
   drawMarker: function() {
     // override to customize the marker
   }
});

var lc = new L.Control.MyLocate();

FAQ

How do I set the maximum zoom level?

Set the maxZoom in locateOptions (keepCurrentZoomLevel must not be set to true).

map.addControl(L.control.locate({
       locateOptions: {
               maxZoom: 10
}}));

Screenshot

screenshot

Users

Sites that use this locate control:

Developers

Run the demo locally with grunt serve and then open localhost:9000/demo/index.html.

To generate the minified JS and CSS files, use grunt and run grunt. However, don't include new minified files or a new version as part of a pull request.

Making a release (only core developer)

A new version is released with npm run bump:minor. Then push the new code with git push && git push --tags and publish to npm with npm publish.

Thanks

To all contributors and issue reporters.

License

MIT

leaflet-locatecontrol's People

Contributors

bmcbride avatar cebe avatar chadwilcomb avatar derzinn avatar domoritz avatar espy avatar fnicollet avatar gabrielflorit avatar gitare avatar gmccrackin avatar jeromecaffaro avatar jtomaszewski avatar karlguillotte avatar marekkalnik avatar mbektimirov avatar meirct avatar mobilesam avatar nikolauskrismer avatar omjokine avatar plaxdan avatar radicalbiscuit avatar rhubarbrhubarb avatar tmcw avatar uintaam avatar webot avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.