Is there a way to center the map on user's location without zooming?

Can you point me why I have this error in the javascript console?

My code:

var capaOSM = new L.tileLayer(tileLayers[mapIndex], options);
mapa.addLayer(capaOSM);
L.control.locate({
strings: {
title: 'Localizame en el mapa',
popup: 'Rango de error: {distance} {unit}',
outsideMapBoundsMsg: 'Parece que estas fuera de los margenes de este mapa'
}
}).addTo(mapa);

Thanks!

Possibly with mocha or something similar.

Hi everyone,

I would like to use leaflet-locatecontrol but I encounter an issue with the locate() functionality.

As far as I can understand here [1] you force setView option to be false in order to override it with a different value. The thing is that by forcing setView to be false in _locateOptions you render it unusable to enable the maxZoom locate() option.

What I would like to do is, on locate, zoom up to a point and setView. Is that possible somehow?

Thank you

[1] https://github.com/domoritz/leaflet-locatecontrol/blob/gh-pages/src/L.Control.Locate.js#L70

I did not want to bother you. I found that that NPM can do direct installs from GIT. (Yes it is better to register it in the NPM registry, so that the version can be tracked. But, I did not want to trouble you).

BOWER is not working through our firewalls, and it much easier to combine node.js stuff if you use NPM. I can also customize the build.

Anyway, I can use the NPM url trick for this leaflet.minimap git repostory

npm install git+https://github.com/Norkart/Leaflet-MiniMap.git --save

However, when I try that with this repository I get the errors:

> npm install git://github.com/domoritz/leaflet-locatecontrol.git --save

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'install',
1 verbose cli   'git://github.com/domoritz/leaflet-locatecontrol.git',
1 verbose cli   '--save' ]
2 info using [email protected]
3 info using [email protected]
4 verbose node symlink C:\Program Files\nodejs\\node.exe
5 verbose readDependencies using package.json deps
6 verbose cache add [ 'git://github.com/domoritz/leaflet-locatecontrol.git', null ]
7 verbose cache add name=undefined spec="git://github.com/domoritz/leaflet-locatecontrol.git" args=["git://github.com/domoritz/leaflet-locatecontrol.git",null]
8 verbose parsed url { protocol: 'git:',
8 verbose parsed url   slashes: true,
8 verbose parsed url   auth: null,
8 verbose parsed url   host: 'github.com',
8 verbose parsed url   port: null,
8 verbose parsed url   hostname: 'github.com',
8 verbose parsed url   hash: null,
8 verbose parsed url   search: null,
8 verbose parsed url   query: null,
8 verbose parsed url   pathname: '/domoritz/leaflet-locatecontrol.git',
8 verbose parsed url   path: '/domoritz/leaflet-locatecontrol.git',
8 verbose parsed url   href: 'git://github.com/domoritz/leaflet-locatecontrol.git' }
9 silly lockFile d1e4cc4d-moritz-leaflet-locatecontrol-git git://github.com/domoritz/leaflet-locatecontrol.git
10 verbose lock git://github.com/domoritz/leaflet-locatecontrol.git C:\Users\ysg4206\AppData\Roaming\npm-cache\d1e4cc4d-moritz-leaflet-locatecontrol-git.lock
11 verbose addRemoteGit [ 'git://github.com/domoritz/leaflet-locatecontrol.git',
11 verbose addRemoteGit   'master' ]
12 verbose git clone git://github.com/domoritz/leaflet-locatecontrol.git Cloning into bare repository 'C:\Users\ysg4206\AppData\Roaming\npm-cache\_git-remotes\git-github-com-domoritz-leaflet-locatecontrol-git-d1e4cc4d'...
13 verbose git fetch -a origin (git://github.com/domoritz/leaflet-locatecontrol.git)
14 silly verifyOwnership skipping for windows
15 error Failed resolving git HEAD (git://github.com/domoritz/leaflet-locatecontrol.git) fatal: ambiguous argument 'master': unknown revision or path not in the working tree.
15 error Failed resolving git HEAD (git://github.com/domoritz/leaflet-locatecontrol.git) Use '--' to separate paths from revisions, like this:
15 error Failed resolving git HEAD (git://github.com/domoritz/leaflet-locatecontrol.git) 'git <command> [<revision>...] -- [<file>...]'
16 silly lockFile d1e4cc4d-moritz-leaflet-locatecontrol-git git://github.com/domoritz/leaflet-locatecontrol.git
17 silly lockFile d1e4cc4d-moritz-leaflet-locatecontrol-git git://github.com/domoritz/leaflet-locatecontrol.git
18 error Error: Command failed: fatal: ambiguous argument 'master': unknown revision or path not in the working tree.
18 error Use '--' to separate paths from revisions, like this:
18 error 'git <command> [<revision>...] -- [<file>...]'
18 error
18 error     at ChildProcess.exithandler (child_process.js:648:15)
18 error     at ChildProcess.emit (events.js:98:17)
18 error     at maybeClose (child_process.js:756:16)
18 error     at Process.ChildProcess._handle.onexit (child_process.js:823:5)
19 error If you need help, you may report this *entire* log,
19 error including the npm and node versions, at:
19 error     <http://github.com/npm/npm/issues>
20 error System Windows_NT 6.1.7601
21 error command "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "git://github.com/domoritz/leaflet-locatecontrol.git" "--save"
22 error cwd G:\wwwroot\NodeToby
23 error node -v v0.10.30
24 error npm -v 1.4.21
25 error code 128
26 verbose exit [ 1, true ]

When stopLocate fires self._layer.clearLayers(); executes to remove the _circle and _circleMarker from the LayerGroup.

On Android 4.2.2, Samsung Galaxy tab 7, I am noticing that clearLayers() does not remove the accuracy circle or circleMarker. I have to manually re-position the map for the circle and circleMarker marker to disappear (i assume a redraw or invalidate is being fired?)

I am using the leaflet 0.6.2 & latest version of the leaflet-locatecontrol as of Oct 12, '13.

Hi!
Is there any equivalent L.Icon.Default.imagePath for this plug-in?

What does it do?
It sets a custom path for the images

Now it try to load from the path to the leaflet-locatecontrol css (including it) /images

Thanks!

Hey, maintainer(s) of domoritz/leaflet-locatecontrol!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library domoritz/leaflet-locatecontrol is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "domoritz/leaflet-locatecontrol",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I upgraded to Leaflet 0.6 and the latest Locate control. I am getting a new type of error. On FireFox V20, I am finding that the error radius is NaN. So I am getting errors on creating the circle:

var locateControl = new L.control.locate({
    position: "topleft",
    drawCircle: true
});

If I turn off the drawCircle: false, I do get the correct location (with the marker, and with the tooltip saying that you are within NaN of this location).

I tried this again with Chrome v26, and I am getting that I am within 1200 meters.

The really odd thing is that your demo at http://domoritz.de/leaflet-locatecontrol/demo/ does work for me in FireFox, and it also says that I am withing 1200 meters.

I am testing on a desktop machine (win7).

On the standard locate function, there's an option to call another function when the location is found and when the location is not found. I have an "onLocationFound" function that runs some custom tasks like building a marker that has a popup with options to save the location among other tasks.

I thought I could just reference my function in var onLocationError = function (err) {}); but it's not getting called.

My custom functions are defined in the HTML after Leaflet and before this plugin.

Under

var visualizeLocation = function() {

the fitBounds sets the wrong bounds for the map if not in 4326 and in local country circuit.

//  map.fitBounds(self._event.bounds, { padding: self.options.circlePadding });

But if you use panTo it works to get to the correct place?

map.panTo(self._event.latlng);

I am trying to use your script in mobile app built on Rhomobile. Everything works perfect, Only when location icon is drawn your icon just disappears from control. Any ideas why?

http://oi60.tinypic.com/10mls9f.jpg

???

Control does not behave analogous to standard controls on mobile:

I coudn't find any references, but I suppose the accuracy value returned by the geolocator is alredy meant to be the displayed as the accuracy radius, and not the diameter. So you probably shoudn't divide that by 2.
At least that's what Google Maps seems to display.

Hi, great plugin, I was just wondering if the "locate functionality" can be invoked by a button outside of the map. I'd like to make it more obvious for my users.

I introduced the stopFollowingOnDrag functionality in #22. This has proven to be a very handy feature for our uses, but it has recently come to our attention that one might want following to cancel on any number of events, dragstart (or any of the other drage events) being one.

In our local copy, I've written functionality for stopFollowingOnEvents into the library. Upon initialization, you declare something like the following in the init options:

stopFollowingOnEvents: [
    'dragstart',
    'mousedown',
    'customEvent'
]

Inside the library, each item from the provided array is taken and the following-cancellation event handler is bound to it.

This works well. However, we have further customization inserted (awareness of custom events we added into an old version of Leaflet), so I'll have to rework it for a patch, which I'm happy to do.

So, this issue exists in effect to find out if this would be a welcome feature, and if so, what should be done with stopFollowingOnDrag. If desired, stopFollowingOnDrag could simply become an alias to stopFollowingOnEvents: ['dragstart'] to preserve backward compatibility.

Anyhow, lemme know. As I said, I'll be happy to make a pull request, but I wanted to see if it'd be welcome, first.

Is there any way to have this activated already when the page is loaded? I'd like to have this in a "pressed" state so that it zooms to the user's location automatically once the page loads and they can click it to deactivate. Thanks!

Events could be either triggered on the map or the plugin itself. What is the right way for plugins to trigger events such as onLocationError, onLocationOutsideMapBounds, startfollowing and stopfollowing? Maybe @mourner or @TMWC can help me here.

Is it possible to define a function raise when the location process finish?

In the code I can find onLocationFound that seems the correct place but I don't want to override it and it doesn't call any function or event

Thanks!

icon-location and icon-direction doesn't show in Android default browser

This happens because the whole layer gets cleared.

I plan to create an AngularJS module that integrates your leaflet-locatecontrol with angular-leaflet-directive but it would be great to simply have a bower package for your library.

Can you create one ? Also, I think that it would be better to store sources in a master branch and the demonstration in gh-pages branch... And it will be a little bit easier to create the bower package ;-)

this issue affects iOS device on Safari:

http://stackoverflow.com/questions/1409141/location-manager-error-kclerrordomain-error-0

There is a possibility to define map boundaries in Leaflet (maxBounds option), such that the user cannot pan outside some defined area. It would be interesting to catch the cases when the location is outside the map boundaries, and offer the developer an option to not set the view to this location.

I was having an issue in that if the user is outside the map bounds the appropriate method would be called, but the user had to click the locate button "off" before being able to try the operation again.

It looks like maybe this is intended to be solved here:

        L.DomEvent
            .on(link, 'click', L.DomEvent.stopPropagation)       
            .on(link, 'click', L.DomEvent.preventDefault)
            .on(link, 'click', function() {
                if (self._active && (self._event === undefined || map.getBounds().contains(self._event.latlng) ||$
                    isOutsideMapBounds())) {               
                    stopLocate();
                } else {
                    locate();
                }
            })           
            .on(link, 'dblclick', L.DomEvent.stopPropagation);

To get the expected behavior I added this, though:
                if (isOutsideMapBounds()) {
                    self.options.onLocationOutsideMapBounds(self);
=>                    stopLocate();
                } else {
                    map.fitBounds(self._event.bounds, {
                        padding: self.options.circlePadding,
                        maxZoom: self._locateOptions.maxZoom
                    });
                }

You might have a better fix for this but wanted to let you know.

I assume when setView: false is set, the map should not change zoom, or set focus to the location. It should just show the blue dot for location, correct? If I'm right in assuming this, it seems setView: false is broken as it zooms right into the marker's positon (well actually it zooms into another location and when clicked again, zooms to the correct location.)

Right now there's a @1x icon & SVG files. Should be a pretty quick task to render out a @2x icon for this. Will do when I get a moment.

It's kind of simple but I have stuck. How can I set the map zoom upon location discovery?

With simply .locate() I used:

.locate({
       setView: true, 
       maxZoom: 10
});

But now I try and this doesn't work.

map.addControl(L.control.locate({
       setView: true, 
       maxZoom: 10
}));

Thanks

Is it possible to add special id's to theese objects (or make on option to add)? It'll be nice to have a possibility to controll appearence of circle and point through css. For example, through media queries in case of different styles for desktop and mobile devices.

Is it possible to draw line where user walks and store it to some variable where I can access that shape (line)? So, something like L.Path or L.Polyline is created when user calls stopLocate()?

Thanks.

Hello,
In the docs, it says you can change "popupText" but it looks like the property is actually "popup".

This produce a bug when the L.Template is being applied

Fabien

As an advanced option it might be nice if we could override the default locationfound logic with an onLocationFound option.

The bosses are pushing an idea that would require a more complex boundary detection algorithm (based on a polygon rather than the Leaflet map boundaries) and I'd need to apply any such logic at that level.

I do realize this would negate some of the functionality included in this software but it'd still be nice to use for the remaining pieces (control, following, etc.)

I don't know how pull requests work, but I added some code to show imperial/English units instead of metric.

Inside visualizeLocation:

var distance;
            var unit;
            if(self.options.metric == false) {
                distance = Math.round(radius * 3.28); // feet
                unit = "feet"
            } else {
                distance = radius.toFixed(0);
                unit = "meters";
            }

// small inner marker
            L.circleMarker(self._event.latlng, self.options.markerStyle)
                .bindPopup("You are within " + distance + " " + unit + " of this point")
                .addTo(self._layer);

Inside options:

// inner marker
        markerStyle: {
            color: '#136AEC',
            fillColor: '#2A93EE',
            fillOpacity: 0.7,
            weight: 2,
            opacity: 0.9,
            radius: 4
        },
        debug: false,
        metric:false

I noticed that the locate icon is not as obvious as I thought. So, here are two suggestions (old and new one). The new icon is inspired by the icon at http://www.openstreetmap.org/.

Old (normal, located, following):

New (normal, located, following):

I'd like to know what you think!

We're looking at using this for OpenStreetMap, any chance you can tag the current state to have something stable to hang on to?

Is there any way to manually enable and disable this control? I'd like to be able to toggle the locate control from a button outside of the map element. Thanks!

While debugging an other issue I constantly see this message popping up in the log:

Looks like self._event is not defined here: https://github.com/domoritz/leaflet-locatecontrol/blob/gh-pages/src/L.Control.Locate.js#L175

E/browser (14295): Console: Uncaught TypeError: Cannot read property 'accuracy' of undefined http://192.168.178.50/dev/cebe.cc/map/web/L.Control.Locate.js:175

Wouldn't it be a goof idea to add a fallback to an ip based location if there is nothing else available?

This has been done before by other develops (see https://github.com/onury/geolocator for example).

However, I would suggest to add something like a accuracy_indicator to indicate, that an ip based location is less accurate than a HTML based one (at least usually, isn't it?)

Any hope on getting this as an npm package?
(I see an issue about getting this with bower, But I struggle more with bower than npm, and I don't mind grunting to strip out items).

here are two links to describe the process:

http://decodize.com/javascript/build-nodejs-npm-installation-package-scratch/

http://www.mattpalmerlee.com/2013/04/23/create-your-first-node-module-and-publish-it-to-the-npm-registry/

Uncaught Error: Invalid LatLng object: (40.7999350265614, NaN)

Hello, if I use this Leaflet plugin with another plugin called Awesome-Markers (https://github.com/lvoogdt/Leaflet.awesome-markers), the Fontawesome icons within the Leaflet markers don't show anymore.

Solution for me was to comment out the following lines from L.control.locate.css:

@import url('font/locate-fa.woff');
@import url('css/locate-fa.css');

No issues were displayed on Chrome console, though. This took me some trial-and-error.

Hi,

Just a minor syntax error on line 80 for the onLocationFound function... should be e.latlng.lng instead of e.latlng.lon

Cheers

The maxZoom level is used when the location. Is it possible to add an option to choose to keep the current map zoom level?

This is actually quite simple :

• In locateOptions, add a useCurrentZoomLevel option:
  locateOptions: {
  useCurrentZoomLevel : true,
  }
• In the visualizeLocation() function, add a check to this option in fitBound when setting the maxZoom, and get the current zoom level if needed :
  maxZoom: self._locateOptions.useCurrentZoomLevel?map.getZoom():self._locateOptions.maxZoom

(Sorry, I don't know how to do a pull request)

Maybe it's related to #23

Thanks.

The style of the zoom buttons has significantly changed. I think it makes sense to have a separate style for Leaflet 0.4 and 0.5.

Is it possible to set a custom marker instead of the stadard blue dot?

Thanks for the control, nice work.

When clicking on the icon once, it activates the location search. Another click deactivates it. I'd expect subsequent clicks on it to activate it again, but that's not the case here. I believe this is because map.locate() does not generate more onLocationFound events after the first one.

In practice this means that (with autoRemoveCircle=true) the location circle is shown after the first click, but then never again after one and more clicks.

The icons have to become lighter to match the style of 0.6.

When clicking the spinner while first location fix is not yet available I get an undef ref error.

Checking self._event before accessing it fixes it:

diff --git a/src/L.Control.Locate.js b/src/L.Control.Locate.js
index 8f1568f..29cf987 100644
--- a/src/L.Control.Locate.js
+++ b/src/L.Control.Locate.js
@@ -88,7 +88,7 @@ L.Control.Locate = L.Control.extend({
.on(link, 'click', L.DomEvent.stopPropagation)
.on(link, 'click', L.DomEvent.preventDefault)
.on(link, 'click', function() {

•            if (self._active && (map.getBounds().contains(self._event.latlng) || !self.options.setView ||
  

•            if (self._active && (self._event && map.getBounds().contains(self._event.latlng) || !self.options.setView ||