Leaflet's viewreset event can't be detected normally with d3.js's points' drawing codes #5173

hijiangtao opened this Issue Dec 7, 2016 · 2 comments


None yet

2 participants

hijiangtao commented Dec 7, 2016 edited

How to reproduce

  • Leaflet version I'm using: Leaflet 1.0.2
  • Browser (with version) I'm using: Chrome
  • OS/Platform (with version) I'm using: Ubuntu 16.04
  • step 1: Include d3.js (v4.4.0) and Leaflet.js (v1.0.2 &v0.7.7, both js and css file)
  • step 2: Use the following codes (which is a drawing function of drawing some points in the map, and the points will move with the map event, such as pan and zoom) to observe the result, and you can change leaflet version to see the normal result.

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

My codes can generally be seperated into several parts: leaflet map instance's generation, d3's data binding to svg and map instance, map viewreset handler event.

What was expected is that when I zoom in/out the map in the view, the points in the map (yellow ones) should move as it's actual position in geospace (maybe go down or up, left or right, somehow), but they actually just kept in an absolute position in the container, suppose there is a point in the middle of the container (map view), when I pan the view to another country, the point still keep in the middle of the container, but actually it should be disappeared! I debug the codes a little and find it's an abnormal event listener with viewreset, I don't know how to handle this problem, but hope my description can help you in finding the truth.

Generally, mouse operation in the map can be divided into two parts, pan or zoom, I just find the problem in zoom in/out operation, the pan's result shows it maybe the normal one? (maybe should be re-judged after the zoom result becomes normal)

I also give a generated data of my drawing codes in the codes (please have a look at the variable data, it's a geojson object, which is "FeatureCollection" here), hope you can use it to reproduce the scenario like my previous trying.

The funny thing is that when I rollback the leaflet version from 1.0.2 to 0.7.7, the event listener becomes normal (I didn't change any other codes, except the include leaflet.js verison file), but I should also change the leaflet.css to a correspond version (v0.7.7), otherwise the points in the map will blink and disappear at most of the time.

Minimal example reproducing the issue

This is the codes in Leaflet playground, GIST

@hijiangtao hijiangtao changed the title from Leaflet to Leaflet's viewreset event can't be detected normally with d3.js's points' drawing codes Dec 7, 2016

Probably a duplicate of #5016. @hijiangtao , please check if listening for both viewreset and moveend solves your use case.

hijiangtao commented Dec 8, 2016 edited

Oh, I see. The problem was fixed by changing viewreset event to moveend event, so I didn't try the scenario of both listening to two events as you suggested. :-)

I get the description of refactored viewreset event in #3278, which means not zoom but full reset, but the document shows that it would be fired when the map needs to redraw its content (this usually happens on map zoom or load). So I really get confused about the usage of viewreset, I wonder if the documents should be updated, please?

And another question is about the description of moveend event.

Fired when the center of the map stops changing

As the description shows in documents, my points will update only when my operations trigger the changing of the center of the map, however, when I use the default zoom control (I suppose it should be a zoom operation based on the center of current map view?), the points get updated, too. It should be updated according the interaction logic, but should not appeared here since this operation didn't trigger the changing of center of map.

Thanks really a lot for your group's contribution in Leaflet's development!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment