4

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.

1 Answer 1

1

looks like the data source you use has err or just be empty. here is what I got from querying the datasource https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_hour.geojson:

result:{"type":"FeatureCollection","metadata":{"generated":1479611702000,"url":"http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_hour.geojson","title":"USGS Magnitude 4.5+ Earthquakes, Past Hour","status":200,"api":"1.5.2","count":0},"features":[]}

you can try to download data to local and load to map to test the sample code.

7

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.