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/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin="">
</script>
<!--LOADS leaflet.css FROM CDN-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/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.
2 answers
solution1
1 ACCPTED 2020-01-14 11: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.
solution2
0 2019-12-23 15:34:52
Is this file exist in your project?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.