Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Panning and Zooming disabled with Locate option 'watch:true'

See original GitHub issue

I’m reporting a bug, not asking for help
I’ve looked at the documentation to make sure the behaviour is documented and expected
I’m sure this is a Leaflet code issue, not an issue with my own code nor with the framework I’m using (Cordova, Ionic, Angular, React…)
I’ve searched through the issues to make sure it’s not yet reported

How to reproduce

Leaflet version I’m using: 1.0.1
OS/Platform (with version) I’m using: Mobile iOS 9.3.3

- step 1

Using the following HTML document:

<!DOCTYPE html>
<html>
<head>
	<title>1 Geo</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
	<style>body { padding: 0; margin: 0; } html, body, #map { height: 100vh; width: 100vw; }</style>
</head>

<body>

<div id="map"></div>

<script>
        function initializeMapAndLocator() {

           var map = L.map('map');

           googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
             maxZoom: 18,
             subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
           }).addTo(map);


           map.locate({
             setView: true,
             watch: true,
             timeout: 60000,
             enableHighAccuracy: true
           });
           var marker;
           var circles;


           function onLocationFound(e) {
             var radius = e.accuracy / 2;

             if (map.hasLayer(circles) && map.hasLayer(marker)) {
               map.removeLayer(circles);
               map.removeLayer(marker);
             }

             marker = new L.Marker(e.latlng, {
               draggable: true
             });
             circles = new L.circle(e.latlng, radius);
             circles.bindPopup("You are within " + radius + " meters from this point").openPopup();;

             map.addLayer(marker);
             map.addLayer(circles);
           }

           map.on('locationfound', onLocationFound);

         }

         initializeMapAndLocator();

</script>
</body>
</html>

- step 2

Testing on mobile device Apple iOS 9.3.

What behaviour I’m expecting and which behaviour I’m seeing

I am getting a marker set on the map and tracking my position in real time. But my view keep getting locked in my current position: if I try panning a little bit to see the areas around my marker, it goes back immediately to my current position. Also, if I try zooming out, the map is immediately reset to my current position with maxZoom: 18.

However, if I set watch:false in map.locate, I can zoom in / out and pan with the map.

I would like to keep using watch:true and be able of zooming / panning around my current position.

I tried adding ‘setMinZoom’ and ‘minZoom’ along ‘maxZoom: 18’, but it didn’t solve my issue.

Thank you for your help and insightful advices.

Minimal example reproducing the issue

this example is as simple as possible
this example does not rely on any third party code

Issue Analytics

State:
Created 7 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

Dublinscopecommented, Nov 25, 2016

Thank you Per and Ivan for your feedback. You have confirmed my thought that it was not bug.

My project is to track myself in real time walking in the streets. I don’t want to have the map locked on my marker.

Per, I understand that I have to use setView: false in map.locateand set the view in onLocationFound the first time it’s called.

Is it correct if I set the view this way?

           function onLocationFound(e) {
             var radius = e.accuracy / 2;

             if (map.hasLayer(circles) && map.hasLayer(marker)) {
               map.removeLayer(circles);
               map.removeLayer(marker);
             }

             marker = new L.Marker(e.latlng, {
               draggable: true
             });
             circles = new L.circle(e.latlng, radius);
             circles.bindPopup("You are within " + radius + " meters from this point").openPopup();;

             map.addLayer(marker);
             map.addLayer(circles);
           }

           map.on('locationfound', onLocationFound);
           map.setView(e.latlng);

Thank you for your help.

0reactions

zhen1991commented, Jul 13, 2018

Hi 😃 Any idea about how you fix this issue ?

Top Results From Across the Web

Map - Getting started with wrld.js

When this option is set, the map restricts the view to the given geographical bounds, bouncing the user back when he tries to...

L.Map - WRLD3D

Sets a map view that mostly contains the whole world with the maximum zoom level possible. panTo(<LatLng> latlng, <Pan options> options?) this. Pans...

Documentation - a JavaScript library for interactive maps

Sets the view of the map (geographical center and zoom) with the given animation options. setZoom(<Number> zoom, <Zoom/pan options> options?) this. Sets the ......

amcharts, disable panning only when zoomed out

You can adjust map interaction behavior via the MapChart.panBehavior property and monitor for when the zoomLevel has changed via the ...

Untitled

The map has several markers on it and when the user clicks on one, I want to pan to the marker location and...