I am currently using Mapbox
in order to complete one of the first examples but something strange is happening. My cluster tiles are not being displayed for some reason. I don't receive any kind of error message and my map is loading perfectly fine. I am currently using data from usgs.gov
about 4.5 hour earthquake update.
Here is my how I loaded all my src
and style
files.
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js'></script>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src = "leaflet-providers.js"> </script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css' rel='stylesheet' />
I was not using <script src = "leaflet-providers.js"> </script>
initially but decided to add it to see if it will fix the issue. Well, it didn't.
JS Code as copied from the Tutorial:
mapboxgl.accessToken = 'XXXXXXXX';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v9',
center: [-36.77344, 41.138952],
zoom: 2
});
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');
map.on('load', function() {
// Add a new source from our GeoJSON data and set the
// 'cluster' option to true.
map.addSource("earthquakes", {
type: "geojson",
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_hour.geojson",
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
// Use the earthquakes source to create five layers:
// One for unclustered points, three for each cluster category,
// and one for cluster labels.
map.addLayer({
"id": "unclustered-points",
"type": "symbol",
"source": "earthquakes",
"filter": ["!has", "point_count"],
"layout": {
"icon-image": "marker-15"
}
});
// Display the earthquake data in three layers, each filtered to a range of
// count values. Each range gets a different fill color.
var layers = [
[150, '#f28cb1'],
[20, '#f1f075'],
[0, '#51bbd6']
];
layers.forEach(function (layer, i) {
map.addLayer({
"id": "cluster-" + i,
"type": "circle",
"source": "earthquakes",
"paint": {
"circle-color": layer[1],
"circle-radius": 18
},
"filter": i === 0 ?
[">=", "point_count", layer[0]] :
["all",
[">=", "point_count", layer[0]],
["<", "point_count", layers[i - 1][0]]]
});
});
// Add a layer for the clusters' count labels
map.addLayer({
"id": "cluster-count",
"type": "symbol",
"source": "earthquakes",
"layout": {
"text-field": "{point_count}",
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Bold"
],
"text-size": 12
}
});
});
I really don't know why is this happening. Can you please help me figure it out. Should I build a back end in order to constantly refresh the data?
Example I used : Example from Mapbox website.