Unable to Display GeoJSON data Using Leaflet and Marker Cluster
Question
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 © <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 answers
solution1
1 2015-06-11 14:19:49
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.
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.