GeoJSON: Map not zoomed correctly on initial render

[flesser]

When opening a Notebook with GeoJSON renderer, the map widget sometimes is not centered but shows the whole world at a zoom layer of 0:

Only when the window or notebook panel gets resized (triggering the onResize message handler), the map correctly zooms in on the rendered features.

Debugging with console.log()s in the code revealed that this._map.getZoom() still is 0 even after calling fitBounds() at the end of renderModel.

I guess it has something to do with the map initialization code happening inside the Promise, when maybe the DOM isn't ready yet?

[gnestor]

Hi @flesser! I'm not encountering an issue with centering but rather partial rendering of tiles until I resize the panel/window (running jupyter lab 0.27.0 and master of this repo)...

I encountered this using jupyterlab_geojson in classic notebook but at the time it wasn't happening in lab. Something must have changed in @phosphor/widget or jupyterlab since then...

The hacky solution is to do the following after the GeoJSON layer is added to the map:

setTimeout(() => {
  this._map.invalidateSize();
}, 600);

Ideally, leaflet would provide an event listener for after layer is added (there is a layeradd event but it seems to be called before the map is rendered so not helpful) or phosphor widget would provide an event listener for after widget is updated (there is an onUpdateRequest event but again it's called before the map is rendered), in which we could handle by calling this._map.invalidateSize().

@flesser you seem to understand leaflet better than I, so hopefully there is a good workaround! 🤞

[gnestor]

Ok, I think the partial rendering issue is resolved by #35. As for improper zoom, I can't reproduce this. @flesser Can you share the GeoJSON file/snippet that you're using?

[bnaul]

@gnestor I'm still seeing this behavior:

from IPython.display import GeoJSON

g = {"type": "Feature",
     "geometry": {"type": "Polygon", "coordinates": [[[-67.13734351262877, 45.137451890638886],
                        [-66.96466, 44.8097],
                        [-68.03252, 44.3252],
                        [-69.06, 43.98],
                        [-70.11617, 43.68405],
                        [-70.64573401557249, 43.090083319667144],
                        [-70.75102474636725, 43.08003225358635],
                        [-70.79761105007827, 43.21973948828747],
                        [-70.98176001655037, 43.36789581966826],
                        [-70.94416541205806, 43.46633942318431],
                        [-71.08482, 45.3052400000002],
                        [-70.6600225491012, 45.46022288673396],
                        [-70.30495378282376, 45.914794623389355],
                        [-70.00014034695016, 46.69317088478567],
                        [-69.23708614772835, 47.44777598732787],
                        [-68.90478084987546, 47.184794623394396],
                        [-68.23430497910454, 47.35462921812177],
                        [-67.79035274928509, 47.066248887716995],
                        [-67.79141211614706, 45.702585354182816],
                        [-67.13734351262877, 45.137451890638886]]]}}
GeoJSON(g)

However, it looks like the behavior is correct for a Point rather than a Polygon or MultiPolygon.