New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GeoJSON Polygons Disappearing and Reappearing on Pan #6075

Open
NicoleMeganMoore opened this Issue Feb 27, 2018 · 12 comments

Comments

Projects
None yet
6 participants
@NicoleMeganMoore

NicoleMeganMoore commented Feb 27, 2018

I have some geojson layers in my map, and for some reason (and not all the time) some of the polygons just disappear when I am panning around. It only happens on the polygons I have changed the style on for their "selected" state. This was just done by the setStyle function on that particular feature upon click.

This happens with or without a basemap so it is not a z-index issue. It also only happens with polygons and not the points or lines, from what I have experienced.

Here is a gif of what I am seeing:

polygon_disappearance_glitch

How to reproduce

  • Leaflet version I'm using: 1.3.1 (does the same thing with 1.2.0)
  • Browser: Chrome Version 63.0.3239.132 (Official Build) (64-bit)
  • OS/Platform (with version) I'm using: Windows 8.1 64bit
@perliedman

This comment has been minimized.

Member

perliedman commented Feb 28, 2018

@NicoleMeganMoore Hi! Really hard to tell what's going on here without seeing some more of the code you're using.

Ideally, put up an example on Plnkr or similar: http://leafletjs.com/edit.html

@NicoleMeganMoore

This comment has been minimized.

NicoleMeganMoore commented Feb 28, 2018

I tried to duplicate the problem here with some sample polygons but it won't happen again.
https://jsfiddle.net/NicoleMeganMoore/3cv0vwh0/26/

There is quite a bit of data in my original app, which may be causing the problem to occur there and not in the fiddle. Also, sometimes the polygon just gets cut in half and doesn't fully disappear, which leads me to believe it is not because of my code. It also happens when zooming in and out, not just panning. It looks like it has something to do with the way the vector tiles are loaded.

I'm not sure where to go from here.. I can send you a private link to the heroku version if that would be useful for you.

@perliedman

This comment has been minimized.

Member

perliedman commented Mar 1, 2018

Hm, you say "vector tiles", but don't use it in the fiddle... How are you displaying vector tiles, if you're using them?

Polygons cut in half etc. is normal while panning and zooming, since Leaflet clips geometry when displaying them, but they shouldn't stay that way after you stop panning/zooming. If you have a lot of geometry, this process might of course take longer time.

If you want, you could e-mail me the link to per@liedman.net, and I'll try to have a look.

@NicoleMeganMoore

This comment has been minimized.

NicoleMeganMoore commented Mar 1, 2018

Sorry I just made the assumption that leaflet uses some sort of vector tile system in the background. I am not using it directly in my app.

They do disappear permanently and its not the part that just gets cut off at the edge of the screen. After hours they do not come back unless I pan in the right spot or zoom to the right zoom level, depending on what it feels is the right level at the time...

Heres another gif showing the part where it cuts it off in random places:
polygon_disappearance_glitch2

I would love to, thank you! You should be receiving it shortly. To reproduce this, I just click on a bunch of different areas and zoom around and pan around. It usually happens upwards of 30 seconds of doing that.

@ghybs

This comment has been minimized.

Collaborator

ghybs commented Mar 1, 2018

Hi @NicoleMeganMoore,

Does it also happen when using the map's preferCanvas option?

@NicoleMeganMoore

This comment has been minimized.

NicoleMeganMoore commented Mar 1, 2018

@cherouvim

This comment has been minimized.

cherouvim commented May 23, 2018

I experience something similar. I have a very simple map with ~100 Rectangle and ~100 Circle elements. After some fast zooms and pans (can't 100% reproduce the exact combination) my Rectangle elements start appearing and disappearing (and at the boundaries of this behavior they may appear half as well) as if leaflet thinks that it's in a different zoom/pan state and has to show/hide elements for performance reasons. While inspecting I can see that the d attribute for the path representing Rectangles turns to M0 0.

leaflet

My code is in react (also using react-leaflet, but don't this is what is causing problems) and looks like this:

render() {
  return (
    <Map className="MapNavigator" zoom={8} center={[38,23]}>
      <TileLayer url="https://a.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      {this.state.cities.map((city, index) => 
        <Rectangle
          key={"city-bounds-" + index}
          bounds={[[city.corner_1_lat, city.corner_1_lon], [city.corner_2_lat, city.corner_2_lon]]}
          color={"black"}
          weight="2"
        />
      )}
      {this.state.cities.map((city, index) => 
        <Circle
          key={"city-center-" + index}
          center={[city.location_lat, city.location_lon]}
          radius={1000}
        />
      )}
    </Map>
  );
}

Note that the react state never changes, thus the only thing that happens on the application is my zooms and pans. Nothing else.

I reproduce this on Chrome 66.0.3359.181 and Firefox 59.0.3 (64-bit) on Windows 7.

The exact versions I use are:

"leaflet": "^1.3.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-leaflet": "^1.9.1",

and I load the CSS using:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
@ghybs

This comment has been minimized.

Collaborator

ghybs commented May 23, 2018

Hi @cherouvim,

Please can you provide a reproduction example without react?
For example you can use https://leafletjs.com/edit.html

Otherwise I doubt we will be able to investigate.
Please also specify your OS, browser and their versions.

@TaviGherman

This comment has been minimized.

TaviGherman commented Jun 12, 2018

I experience the same problem with Angular and Leaflet:
"leaflet": "^1.3.1",
"@angular/core": "^5.2.2"
Refreshing the map with clearLayers() and redraw them it's not helping;
I created the polygons with L.geoJson, then their respective labels with L.marker. Only the polygon are disappearing the labels remains visible, but the labels are visible on pan also, while the polygons are redrawn on pan ended.
I am loading hundreds of polygons but doesn't seams to be related to the amount of data loaded (sometime is working fine with over a thousand).
The old project with Angular 1 and Leaflet 0.7.2 it's working fine.

@ghybs

This comment has been minimized.

Collaborator

ghybs commented Jun 13, 2018

Hi @TaviGherman,

Please can you provide a reproduction example without Angular?
For example you can use https://leafletjs.com/edit.html

Otherwise I doubt we will be able to investigate.
Please also specify your OS, browser and their versions.

@TaviGherman

This comment has been minimized.

TaviGherman commented Jun 13, 2018

I am using Google Chrome Version 66.0.3359.181 in Windows 10, 64 bit.
The problem seams to happens regardless the browser used.
I have tried the preferCanvas option, but same results. I suspect something about the events priority.
Unfortunately I cannot provide a reproduction example given the fact is part of a bigger project and the code is scattered in several places.

@plepe

This comment has been minimized.

plepe commented Nov 8, 2018

Happens to me too, but I have not been successful in providing a simple reproduction example. It happens after panning for some time.

openstreetbrowser - leaflet issue 6075

There are actually three types of polygons visible on this map: Buildings, created either as via L.polygon (closed ways) or L.geoJSON (multipolygons) and Arrow Heads on the magenta dashed lines, created via the leaflet-polylinedecorator module (filled polygons). All of these are affected.

What I find very interesting, that the polygons get cropped, like Leaflet would think the lower viewport boundary would be shifted. I haven't noticed yet, that the polygons would vanish from the top.

I've noticed this problem with different browsers (at least Firefox and Chromium on Ubuntu Linux). This problem exists for some time now, right now I'm using Leaflet 1.3.4, Chromium 70.0 on Ubuntu 16.04.5.

I hope this has been helpful ...

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