Local References to CSS and JS files for Leaflet MarkerCluster plugin not loading

586 Views Asked by At

Currently, I'm using the cdnjs from cloudflare to reference the MarkerCluster plugin js and css files for leaflet, and it works fine. However, when I try and reference the local version I downloaded from the github page and reload my html page, the markerclusters go away. Here are my references:

<link rel="stylesheet" type="text/css" href="Leaflet.markercluster-master/Leaflet.markercluster-master/dist/MarkerCluster.css" /> 
<link rel="stylesheet" type="text/css" href="Leaflet.markercluster-master/Leaflet.markercluster-master/dist/MarkerCluster.Default.css" />
<script src="Leaflet.markercluster-master/Leaflet.markercluster-master/src/MarkerCluster.js"></script>

I have checked and rechecked the file paths and I can confirm they are correct. I've referenced both MarkerCluster.css and MarkerCluster.Default.css because that was recommended when I reference through cdnjs. I've made sure to redownload the latest version from github, still to no avail.

I've added and deleted type="text/javascript" from the script that runs the js file, but that didn't help either:

<script type="text/javascript" src="Leaflet.markercluster-master/Leaflet.markercluster-master/src/MarkerCluster.js"></script>

I am referencing these files within the <head> of the html file. Any help would be greatly appreciated!

Reasoning: I would like to reference the local files so that it can act as a backup in case the cdnjs goes down. I know that this has very rarely happened, if ever. But for this project, we are concerned with maintaining this site for a long time and want to ensure the maximum amount of protection against plugins breaking/becoming incompatible.

2

There are 2 best solutions below

0
On BEST ANSWER

The MarkerCluster.js file you have downloaded is just a part of the source code of the plugin.

It is concatenated with other source files to produce the dist file that is available on public CDN's.

See the disclaimer on the repository: https://github.com/Leaflet/Leaflet.markercluster/blob/master/dist/WhereAreTheJavascriptFiles.txt

We don't ship the .js files in the git master branch. They are only present in version tags and in npm.

See how to get the JS files here: https://github.com/Leaflet/Leaflet.markercluster#using-the-plugin Or how to build them: https://github.com/Leaflet/Leaflet.markercluster#building-testing-and-linting-scripts

A very simple mean to retrieve this dist JS file is to download what you get from the CDN. E.g. paste the URL in your browser address bar; this should display the raw content of the file. Then right click anywhere on the code and select "Save as..."

0
On

If you look in dist/WhereAreTheJavascriptFiles.txt you'll see that if you download the source you need to build the dist js files with jake. Or just use the CDN. The js file you've included is part of the source codebase.