CODEWITHSUNDEEP
javascriptleafletleaflet.markercluster
prime90
prime90

Reputation: 959

Leaflet markercluster plugin not loading

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.

Upvotes: 1

Views: 2144

Answers (2)

Radon8472
Radon8472

Reputation: 4951

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.

Upvotes: 1

user5943862
user5943862

Reputation: 39

Plugins/cluster/leaflet.markercluster-src.js

Is this file exist in your project?

Upvotes: 0

Related Questions