cannot display DrawControl in jupyterLab

[12rambau]

I'm using ipyleaflet in a custom lib and since we updated our version to ipyleaflet==0.16 we cannot see the drawing control anymore:

the following code:

from ipyleaflet import Map, DrawControl

m = Map()
m.add_control(DrawControl())
m

Is producing an empty drawing element in the DOM:

<div class="leaflet-top leaflet-left">
  <div class="leaflet-control-zoom leaflet-bar leaflet-control">
    <a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in" aria-disabled="false">+</a>
    <a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out" aria-disabled="false">-</a>
  </div>
  <div class="leaflet-draw leaflet-control"></div>
</div>

The exact same code rendered in a classic Jupyter Notebook or Voila will render the following HTML:

<div class="leaflet-top leaflet-left">
  <div class="leaflet-control-zoom leaflet-bar leaflet-control">
    <a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a>
    <a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">-</a>
  </div>
  <div class="leaflet-draw leaflet-control">
    <div class="leaflet-draw-section">
      <div class="leaflet-draw-toolbar leaflet-bar leaflet-draw-toolbar-top">
        <a class="leaflet-draw-draw-polyline" href="#" title="Draw a polyline"><span class="sr-only">Draw a polyline</span></a><a class="leaflet-draw-draw-polygon" href="#" title="Draw a polygon"><span class="sr-only">Draw a polygon</span></a><a class="leaflet-draw-draw-circlemarker" href="#" title="Draw a circlemarker"><span class="sr-only">Draw a circlemarker</span></a>
      </div>
      <ul class="leaflet-draw-actions"></ul>
    </div>
    <div class="leaflet-draw-section">
      <div class="leaflet-draw-toolbar leaflet-bar"><a class="leaflet-draw-edit-edit leaflet-disabled" href="#" title="No layers to edit"><span class="sr-only">Edit layers</span></a><a class="leaflet-draw-edit-remove leaflet-disabled" href="#" title="No layers to delete"><span class="sr-only">Delete layers</span></a></div>
      <ul class="leaflet-draw-actions"></ul>
    </div>
  </div>
</div>

here is my Jupyter environment:

jupyter==1.0.0
jupyter-client==7.3.1
jupyter-console==6.4.3
jupyter-contrib-core==0.3.3
# Editable install with no version control (jupyter-contrib-nbextensions==0.5.3)
-e /jupyter_contrib_nbextensions/src
jupyter-core==4.10.0
jupyter-highlight-selected-word==0.2.0
jupyter-latex-envs==1.4.6
jupyter-nbextensions-configurator==0.4.1
jupyter-server==1.17.0
jupyter-server-proxy==3.2.1
jupyterlab==3.4.2
jupyterlab-language-pack-es-ES==3.4.post0
jupyterlab-language-pack-fr-FR==3.4.post0
jupyterlab-pygments==0.2.2
jupyterlab-server==2.14.0
jupyterlab-widgets==1.1.0

Do you have any idea what is happening and what I should check ?

[davidbrochart]

I don't have this issue on my side, but I need to at least specify a zoom level:

m = Map(zoom=10)

Can you try and see if that helps?

[12rambau]

I checked but it didn't changed a thing but it's still working in voila:

[12rambau]

It seems there were a conflict between my environments. Jupyterlab was wired to 0.13.3 but python was using 0.16

[leosilverberg]

@12rambau Could you elaborate on how you fixed this problem? I'm getting stuck in the same place.

[12rambau]

I don't remember the exact details but to put it in simple words, there was inconsistencies between the javascript package available in my installation of JupyterLab and ipyleaflet. I was working in a cloud computing system so Jupyterlab was build on a docker image. It finally worked again when I rebuilded jupyterlab in a new release of the platform.

TBH if reinstalling JupyterLab from scratch is an option it should solve your problem.