Unable to Display GeoJSON data Using Leaflet and Marker Cluster

262 views Asked by At

I am able to display the map tiles using the code below, but cannot seem to find a way to get this geoJSON data to display using the Marker Cluster library for Leaflet. I was able to display the GeoJSON data without Marker Cluster no problem. I must be missing something obvious. Any assistance would be greatly appreciated.

<!DOCTYPE HTML>
<html>
<head>
    <title>Leaflet GeoJSON Test</title>
    <meta charset="utf-8" />
    <!--Leaflet-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"      href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
     <!--Leaflet-->
</head>
<body>

<div id="map" style="width: 600px; height: 400px"></div>

<!--Marker Cluster-->
<link rel="stylesheet" href="..\dist\MarkerCluster.css" />
<link rel="stylesheet" href="..\dist\MarkerCluster.Default.css" />
<script src="..\dist\leaflet.markercluster-src.js"></script>
<!--Marker Cluster-->

<script src="..\geoJSON\ga_brewery_master_list.geojson" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>

<script>

    var map = L.map('map').setView([33.76088, -84.38599], 5);

    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'examples.map-i875mjb7'
    }).addTo(map);

    var geojsonMarkerOptions = {
        radius: 4,
        fillColor: "#ff7800",
        color: "#000",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    };

    var markers = L.markerClusterGroup();

    var geoJsonLayer  = L.geoJson(brew, {
        onEachFeature: function popupContent(feature, layer) {
            layer.bindPopup("<b>Name:</b>" + " " + feature.properties.Name + '<br />'
                                                    + "<b>Type:</b>" + " " + feature.properties.Type
                                                    + '<br />'
                                                    + "<b>Barrels Produced/yr:</b>" + " " + feature.properties.Barrels_Ye
                                                    + '<br />'
                                                    + "<b>Address:</b>" + " " + feature.properties.Address
                                                    + '<br />'
                                                    + "<b>Zip Code:</b>" + " " + feature.properties.Zip_Code
                                                    + '<br />'
                                                    + "<b>City:</b>" + " " + feature.properties.City
                                                    + '<br />'
                                                    + "<b>State:</b>" + " " + feature.properties.State
                                                    + '<br />'
                                                    )
            ;
        },
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        }
    });

    markers.addLayer(geoJsonLayer);

    map.addLayer(markers);
    map.fitBounds(markers.getBounds());

</script>

1

There are 1 answers

0
Chris Rice On

This is very embarrassing, but I found the problem. I had backslashes rather than forward slashes in the relative paths to the Marker Cluster plugin.

I simply changed this...

<link rel="stylesheet" href="..\dist\MarkerCluster.css" />
<link rel="stylesheet" href="..\dist\MarkerCluster.Default.css" />
<script src="..\dist\leaflet.markercluster-src.js"></script>

To this...

<link rel="stylesheet" href="../dist/MarkerCluster.css" />
<link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
<script src="../dist/leaflet.markercluster-src.js"></script>

That fixed the problem. Here is the live map just for good measure.

http://sportruminations.com/Leaflet/HTML/test.html