4

I created a personal webpage on notepad++ and created links to 5 different leaflet maps on it. it works fine when you run it from notepad++. The problem is when I used FileZilla to put my files onto the school server, the leaflet map links on my webpage do not work. If I click on the link it just shows the map title not the actual map. I get errors sayin... Mixed Content: The page at 'https://tigerweb.towson.edu/sphill16/map1.htm' was loaded over HTTPS, but requested an insecure stylesheet 'http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css'. This request has been blocked; the content must be served over HTTPS.

  • 1
    Noob comment here, but have you tried adding an 's' to the 'http' in the leaflet CDN url? – Trevor J. Smith Feb 26 '16 at 4:04
3

You're not the first person to encounter this issue, but there is an easy fix. The cdnjs service hosts copies of all versions of Leaflet and serves them over https:

https://cdnjs.com/libraries/leaflet

So just replace your links with the cdnjs versions, and you should be fine.

Another way would be to download the Leaflet library files and place them in the same directory tree as your local web page, perhaps in a subdirectory called leaflet (or whatever you like, really). Then you can change the references in your HTML to point to those:

<link rel="stylesheet" href="leaflet/leaflet.css" />
<script src="leaflet/leaflet.js"></script>

and upload the whole project including the directory with the leaflet library files. Either way will work.

1

You can also try removing the protocol from your includes:

<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.