stefanocudini / leaflet-gps

Simple leaflet control plugin for tracking gps position

Leaflet.Control.GPS

A leaflet control plugin for tracking gps position

If this project helped your work help me to keep this alive by Paypal DONATION ❤

Tested in Leaflet 0.7.7 and 1.3.0

Demos online:
opengeo.tech/maps/leaflet-gps

How to use

Adding the GPS Control to the map:

map.addControl( new L.Control.Gps() );

Debugging

I recommend a chrome extension: 'Manual Geolocation' for simulate gps device and set realtime position

Manual Geolocation

You can also use a dummy transform function:

var tinnedGps = { lat: 52.5, lng: -2.0 };
map.addControl( new L.Control.Gps( { transform: function(realGps) { return tinnedGps; } ) );

Where

Demos online:
opengeo.tech/maps/leaflet-gps

Source code:
Github
Bitbucket
NPM
Atmosphere

Options

Options	Default	Description
autoActive	false	activate control at startup
autoCenter	false	move map when gps location change
maxZoom	null	max zoom for autoCenter
textErr	''	error message on alert notification
callErr	null	function that run on gps error activating
style	{radius:5,color:'#c20',fillColor:'#f23'}	default L.CircleMarker styles
marker	null	L.Marker used for location, default use a L.CircleMarker
accuracy	true	show accuracy Circle
title	'Center map on your location'	title control on mouse over
position	'topleft'	control position on map
transform	function(latlng) { return latlng }	return location before for gps marker
setView	false	automatically sets the map view to the user location

Events

Event	Data	Description
'gps:located'	{marker, latlng}	fired after gps marker is located
'gps:disabled'	{marker}	fired after gps is disabled

Methods

Method	Arguments	Description
getLocation()		return Latlng and marker of current position
activate()		active tracking on runtime
deactivate()		deactive tracking on runtime

Use Cases

This list is intended to be of utility for all developers who are looking web mapping sample code to solve complex problems of integration with other systems using Leaflet Control GPS.

Anyone can add the link of your website

(spamming urls will be automatically deleted)

• Refuges.info

leaflet-gps's Issues

making the js files linkable

Hi,

I would like to use the js and css but instead on cloning the whole repo, I would like to just link in in my script section. How do I do that?

Thank you

[accessibility] Use `<button>` or `<a role="button">`

<a class="gps-button"> button is announced as a "link" using a screen reader (missing role="button", see Leaflet controls).

Another option is to use <button type="button">, but requires additional styling to reset browser defaults.

---

Other potentially helpful resources:

• Leaflet Guideline: Test your maps
• Leaflet Plugin Authoring Guide: Content Accessibility

Autoupdate marker position

Be cool have option for autoupdating marker position by time (min, sec).
Example:
options: {
autoActive: false, //activate control at startup
autoCenter: false, //move map when gps location change
maxZoom: null, //max zoom for autoCenter
autoUpdate: 60 // autoupdate my position via GPS in sec
Now marker position updating if move map or if change map zoom.
But marker not move automaticaly if I go or if I ride.

radius = accuracy of point enhancement

Thought it might be a nice addition to have the option of setting a marker with a L.Circle showing the accuracy of the GPS location

Breadcrumbs via ployline or marker on map

Not really an issue and more of a question. Have you experimented with the ability to leave a GPS trace on the map. Maybe via plotted marker at interval or poly-line generated from intervals?

locate loadingIcon spinner

Your locate plugin has the most accuracy and is the smoothest one for leaflet. Great Job!

Any idea how to implement a spinner icon to the locate-button (with font-awesome) which should appear only when "map.locate" is trying to find the current position of the user?

here's an example: https://www.domoritz.de/leaflet-locatecontrol/demo/

Get marker coordinates

Hi,
Is it possible to display the user coordinates inside a div or pass them to a variable?

Thanks and good work.

Error : Operation could not be completed(KCLErrorDomain error 0)

this issue affects iOS device on Safari:

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

Leaflet 1.0 beta

Does leaflet-gps work with Leaflet 1.0 beta ?

Update npm package

The version that I got via npm was outdated, also please include a "main" entry in the package.json for browserify compatibility. (see pull request #14 )

leaflet-gps vs leaflet-realtime

Hi,

May I know that is the difference between these two solutions ?

Thanks.

[accessibility] Make the gps-alert available to screen readers

Making the .gps-alert a live region is important as it conveys to screen readers that the content should be announced when added to the DOM, or otherwise has been updated. This is done by adding the status role (a live region role) to the <div>, and accompanying ARIA attributes:

<div class="gps-alert" style="display: block;"
+ role="status"
+ aria-live="polite"
+ aria-atomic="true">
  Geolocation error: User denied Geolocation.
</div>

While role="status" already implies aria-live="polite", it's best to be explicit with the value per MDN advice:

To maximize compatibility, add a redundant aria-live="polite" when using this role.

Have you tested it with leaflet 0.6.4??

Have you tested it with leaflet 0.6.4??

warning: watchPosition() are deprecated

getCurrentPosition() and watchPosition() are deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

Someone know a definitive solution for this!??!