[GIS] Leaflet features work on some browsers, but not all

easybutton-pluginleaflet

So I'm having a strange issue with Leaflet plug-ins, certain features will fail on certain browsers. The site is is at-
https://samdotson1992.github.io/KY_beer/

It seems to work on:

  • IE11

  • Edge

But does not work on-

  • Chrome

  • Firefox

Note the basemap will map will appear regardless, but the points won't load from the CSV and my other features fail too. Everything is on GitHub at https://github.com/samdotson1992/KY_beer.

Any suggestions? Ideas?

Best Answer

Loading the map in Chrome gives the following error (Press F12 to see the errors in your local browser):

Mixed Content: The page at 'https://samdotson1992.github.io/KY_beer/' was loaded over HTTPS, but requested an insecure script 'http://www.domoritz.de/leaflet-locatecontrol/dist/L.Control.Locate.min.js'. This request has been blocked; the content must be served over HTTPS.

Despite using a https link for including the locatecontrol plugin, it obviously redirects to a non-https site of the developer shown in the error message. While Chrome is more strict about not loading the content, e.g. Edge just shows a warning message in the developer console but still loads the files.

As a result the functions from this plugin are not available in Chrome, which results in a broken map.

You can fix that by including the plugin via e.g. the JsDelivr CDN (which actually is the preferred way mentioned on the github page of the plugin). You need to adapt just the lines 22 and 24 in your index.html like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.62.0/dist/L.Control.Locate.min.css" />
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.62.0/src/L.Control.Locate.min.js" charset="utf-8"></script>
Related Question