Leaflet markercluster plugin not loading

Question

I have a heck of a time getting plugins to load in leaflet. Not sure what I'm doing wrong. The files are on my local machine and are included in the html file but I still receive these two errors.

Loading failed for the with source “.../Plugins/cluster/leaflet.markercluster-src.js”.

TypeError: L.markerClusterGroup is not a function index.js:15:17

Im assuming the type error is from the plugin not loading...

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Template</title>
    <meta charset="utf-8" />
    <!--LOADS leaflet.js FROM CDN-->
    <script 
        src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin="">
    </script>    
    <!--LOADS leaflet.css FROM CDN-->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
    <!--LOADS style_blank.css FOR LEAFLET-->
    <link href="style_blank.css" type="text/css" rel="stylesheet">
    <!--LOADS jquery-3.4.1.js FROM CDN-->
    <script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous">
    </script>    
    <!--LOADS markercluster css-->
    <link href="Plugins/cluster/MarkerCluster.css" type="text/css" rel="stylesheet">
    <link href="Plugins/cluster/MarkerCluster.Default.css" type="text/css" rel="stylesheet">
    <!--LOADS markercluster plugin-->
    <script src="Plugins/cluster/leaflet.markercluster-src.js"></script>  
</head>

<body>
    <div id="map"></div>
    <!--CONTAINS GEOJSON DATA-->
    <script src="Data/activeShops.js"></script>
    <!--LOADS LEAFLET MAP DATA/CUSTIMIZATION-->
    <script src="index.js"></script>  
</body>
</html>

Javascript:

// starting location
var map = L.map('map',{
    center: [41.05, -77.5],
    zoom: 8,
    minZoom: 2,
    maxZoom: 18,
});

// tile layer
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
    attribution: ""
}).addTo(map);

// markercluster plugin
var markers = L.markerClusterGroup();
var activeShops = L.geoJSON(activeShops);

markers.addLayer(activeShops);
map.addLayer(markers);

Are there any problems with my HTML or Javascript file that would prevent this plugin from loading? I have both .css files and javascript src file indluded in HTML as per the directions on github. Thank you.

You could try loading Leaflet.markercluster files from unpkg CDN as well: unpkg.com/browse/[email protected]/dist — ghybs
I tried that before and received this error "The resource from “unpkg.com/browse/[email protected]/dist” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)." — prime90
The previous link is just for you to see what files are available, not what you should use as value of your href and src attributes... — ghybs
Still gives me the same error. No idea why this isn't working. Currently have the script in the header like this <script src="https://unpkg.com/browse/[email protected]/dist/leaflet.markercluster-src.js"></script> — prime90
I guess unpkg could be more explicit how you should use it... Compare with the value you used for Leaflet. Use the "view raw" button on unpkg page. https://unpkg.com/[email protected]/dist/leaflet.markercluster-src.js — ghybs

Radon8472 Radon8472 · Accepted Answer · 2020-01-14T11:26:37

I have the same problem..

the reason is that you load the leafletjs files from the leatflet repo, and this sends Content-Type: text/html for this files. And this server sends a X-Content-Type-Options: nosniff header too.

The result is that your browser discovers that you try to load JavaScript and Css, but the content-type of the files behind the Url is not matching what makes your browser blocking this files from loading.

@see Mozilla developer docs - X-Content-Type-Options

The problem is, you must be on the server side of the loaded files to change the output headers.

The only "hack" to handle this behavoir I found in the question css-file-blocked-mime-type-mismatch-x-content-type-options-nosniff But removing the rel attribute is a very dirty trick and there is no garanty that this will work in the future.

The only "clean" solution would be to download leaflet.js and leaflet.css and host them on your own webspace.

Leaflet markercluster plugin not loading

2 Answers