CODEWITHSUNDEEP
javascripthtmlleaflet
mato
mato

Reputation: 141

Leaflet: Uncaught TypeError: L.markerClusterGroup is not a function when trying to use Cluster plug-in

I am trying to use Cluster Group plug-in for Leaflet, but I keep getting the "Uncaught TypeError: L.markerClusterGroup is not a function"

here is my simplified HTML file:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Brewser</title>
        <link rel="stylesheet" type="text/css" href="brewser.css">
        <link rel="stylesheet" type="text/css" href="leaflet.css"/>
        <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="dist/MarkerCluster.css"/>
        <link rel="stylesheet" type="text/css" href="dist/MarkerCluster.Default.css"/>      
    </head>
    <body>
        <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>   
        <script src="leaflet.js" type="text/javascript"></script>
        <script src="app.js" type="text/javascript"></script>
        <script src="brewser.js" type="text/javascript"></script>
        <script src="dist/leaflet.markercluster-src.js"></script>
    </body>
</html>

Here is my JS:

var myMap = L.map('map').setView([49.197060, 16.611837], 13);
var markers = L.markerClusterGroup();

Any idea what could be wrong?

plug-in files I am using are those in dist directory:

leaflet.markercluster-src.js
leaflet.markercluster.js
leaflet.markercluster-src.js.map
leaflet.markercluster.js.map
MarkerCluster.css
MarkerCluster.Default.css

Upvotes: 1

Views: 1388

Answers (1)

Joe
Joe

Reputation: 82564

Your imports are out of order:

    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>   
    <script src="leaflet.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="brewser.js" type="text/javascript"></script>
    <script src="dist/leaflet.markercluster-src.js"></script>

should be:

    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>   
    <script src="leaflet.js" type="text/javascript"></script>
    <!-- Notice where markercluster import is above app.js -->
    <script src="dist/leaflet.markercluster-src.js"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="brewser.js" type="text/javascript"></script>

Upvotes: 1

Related Questions