Folium: Folium.draw does not work in Jupyter notebook

[AntonioLopardo]

import folium
from folium.plugins import Draw

m = folium.Map(
tiles='cartodbpositron'
)

draw = Draw()

draw.add_to(m)

m

Draw has been working flawlessly for me for months, displaying the toolbar and exporting without issues my drawings. But now using exactly the same code on jupyter notebook the plugin does not display the ui and conflicts with the rendering of geojson elements. Jupyter doesn't throw any error and the map along with the Export button are visible. I realize that this might be some kind of setup issue, but the code was working perfectly 2 weeks ago and I have not changed anything since then.

I'm running version 0.5.0 on python 3.6

[Conengmo]

Unfortunately I'm not able to reproduce your problem... Don't really know where to start here, but it seems likely related to the way maps are embedded in Jupyter. Which browser do you use? Do you know how to use the development tools of your browser to investigate the issue?

[AntonioLopardo]

I use chrome, I'm not terribly familiar with chrome's dev tools however I have been able to reproduce the problem on 3 machines, using fresh pip installs of folium. The export button is displayed but the toolbar isn't.

[Conengmo]

I'm using Firefox, so maybe that's why I'm not seeing this. There have been more reports of issues with Chrome, most notably #812. We could definitely use some help on this topic.

By the way, did you try to export your map as html (m.save('map.html')) and opening it outside of Jupyter?

[AntonioLopardo]

I gave it a go but saving it doesn't help. On Firefox it works without issues though. You are probably right it might be a Chrome's problem. Any idea on how to fix it? Thanks for the help btw
The strange thing is that this demo https://leaflet.github.io/Leaflet.draw/docs/examples/full.html works so the problem must be the interaction between Chrome and Folium itself.

[Conengmo]

I don't know what the issue is, so no idea how to fix it yet :) Could you take a look in the console in Chrome, see if there are any errors logged there?

[AntonioLopardo]

cdn.rawgit.com/Leaflet/Leaflet.draw/v0.4.12/dist/leaflet.draw.css:1 Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID leaflet.draw.js:1 Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID rawgit.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css:1 Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID map.html:119 Uncaught TypeError: L.Control.Draw is not a constructor at map.html:119

This is the output of the console

[AntonioLopardo]

Looking up those two files on the leaflet.draw documentation the thing that seems a bit off is the version. On folium.draw we link to v0.4.12 but on leaflet it gets up to v0.4.2. I'm not sure that this is the issue since it works on firefox but it might be part of it.
Btw I have tried to simply change the version to v0.4.2 in the draw module but it doesn't solve it.

[Conengmo]

Weird, so it seems to fail in loading the leaflet.draw resources. ERR_CERT_COMMON_NAME_INVALID seems to indicate it has something to do with SSL/HTTPS.

Can you try using the most recent version?

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Leaflet/Leaflet.draw/v1.0.2/src/leaflet.draw.css"/>

[AntonioLopardo]

Progress!
It throws me mostly the same error, this time around though the toolbar actually shows up but with none of the graphical asset, icons on the buttons, the cursor and likes.

Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID leaflet.draw.css:1 Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID leaflet.awesome.rotate.css:1

Update
Running it again gave different errors.
GET https://cdn.rawgit.com/Leaflet/Leaflet.draw/v1.0.2/src/leaflet.draw.css 0 () VM593 map.html:28 GET https://rawgit.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css 0 () VM593 map.html:14

[Conengmo]

Maybe you can try using this url for the css?

https://raw.githubusercontent.com/Leaflet/Leaflet.draw/v1.0.2/src/leaflet.draw.css

[AntonioLopardo]

I'm sorry but the output appears to be relatively inconsistent that's my current output

map.html:1 Refused to apply style from 'https://raw.githubusercontent.com/Leaflet/Leaflet.draw/v1.0.2/src/leaflet.draw.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled. rawgit.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css:1 Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID 2map.html:1 Refused to apply style from 'https://raw.githubusercontent.com/Leaflet/Leaflet.draw/v1.0.2/src/leaflet.draw.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

btw thanks for your patience

[Conengmo]

Alright so githubusercontent.com doesn't communicate the right file type for the css file. But the javascript is working now isn't it?

Can you try this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css"/>

[AntonioLopardo]

Success!
It works as it did before, thank you very much!
Closing

[Conengmo]

If it works now, shouldn't we add this to folium?

[AntonioLopardo]

Yep, absolutely since it's literally just a matter of changing the links.
Thanks again!