CODEWITHSUNDEEP
htmlmapbox-gl-js
anirudh
anirudh

Reputation: 1

Unable to visualize points as clusters in the Mapbox GL JS Geojson example from their website

When I tried out this example from the mapbox website I was able to see only the base map. Whereas the Geojson data which I want to visualize as stylized clusters on the map is not being rendered on mapbox gl js. I used the same code example that is on their website but it was unsuccessful.

(url: https://www.mapbox.com/mapbox-gl-js/example/cluster/).

I don't know what's going wrong. Any help will be greatly appreciated. Thank you.

Here's the code....

<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.js'></script>

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.35.1/mapbox-gl.css' rel='stylesheet' />
<style>

    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
</style>

</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYW5pcnVkaDIwMjAiLCJhIjoiY2oxMzljM3EwMDAwYTJ3czhtd2dsMmRxZiJ9._9BAosMxlmvnT8FXh7JXYw';

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v9',
center: [-103.59179687498357, 40.66995747013945],
zoom: 3

});

map.on('load', function() {
// Add a new source from our GeoJSON data and set the
// 'cluster' option to true. GL-JS will add the point_count property to your source data.

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://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
    cluster: true,
    clusterMaxZoom: 14, // Max zoom to cluster points on
    clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});

map.addLayer({
    id: "clusters",
    type: "circle",
    source: "earthquakes",
    filter: ["has", "point_count"],
    paint: {
        "circle-color": {
            property: "point_count",
            type: "interval",
            stops: [
                [0, "#51bbd6"],
                [100, "#f1f075"],
                [750, "#f28cb1"],
            ]
        },
        "circle-radius": {
            property: "point_count",
            type: "interval",
            stops: [
                [0, 20],
                [100, 30],
                [750, 40]
            ]
        }
    }
});


map.addLayer({
    id: "cluster-count",
    type: "symbol",
    source: "earthquakes",
    filter: ["has", "point_count"],
    layout: {
        "text-field": "{point_count_abbreviated}",
        "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
        "text-size": 12
    }
});


map.addLayer({
    id: "unclustered-point",
    type: "circle",
    source: "earthquakes",
    filter: ["!has", "point_count"],
    paint: {
        "circle-color": "#11b4da",
        "circle-radius": 4,
        "circle-stroke-width": 1,
        "circle-stroke-color": "#fff"
    }
});

});

</script>

</body>
</html>

Upvotes: 0

Views: 709

Answers (1)

zocoi
zocoi

Reputation: 1200

If you look into the browser inspector, you will see

XMLHttpRequest cannot load https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.

You need to download the JSON file and load it from local server, then it will work.

Upvotes: 2

Related Questions