Getting error while using 'circle-color' data driven styling in Mapboxgl.js & GeoJSON, but working fine with default color

Question

I am trying to create a map, put data points using GeoJSON and Mapbox. It works fine when I am using a default color code for all points, but when I try to use data driven styling to put different colors for different property values It is giving errors. I am using mapboxgl.js.

I get the following errors in Chrome Inspect:

net::ERR_INTERNET_DISCONNECTED
exports.getJSON @ ajax.js:33
evented.js:111 Error
at XMLHttpRequest.r.onerror (ajax.js:18)

Please help! Here are my GeoJSON and HTML files.

mapboxgl.accessToken = 'pk.eyJ1Ijoicml0YW1iaGFyYSIsImEiOiJjajZuNGZjNHUwNHgxMzNwc29hZ2ZkbmRvIn0.4kTuXEpbJBeoN3jCp3pfwQ';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v9',
    center: [-121.403732, 40.492392],
    zoom: 10
});
map.on("load", function() {
    map.addSource('pH', {
        'type': 'geojson',
         'data': 'test.json'
    });
    map.addLayer({
        id: 'heat-map',
        type: 'circle',
        source: 'pH',
        paint: {
            // 'circle-color': '#f1f075',
            'circle-color': {
                property: 'value',
                 stops: [
                    [6, '#f1f075'],
                    [10, '#e55e5e']
                ]          
            },
            "circle-radius": 6,
            'circle-opacity': 0.8
        },
    });
});

GeoJSON file:

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": { "value": "7" }, 
        "geometry": {
            "type": "Point",
            "coordinates": [-121.415061, 40.506229]
        }
    }, {
        "type": "Feature",
        "properties": { "value": "8" }, 
        "geometry": {
            "type": "Point",
            "coordinates": [-121.505184, 40.488084]
        }
    }, {
        "type": "Feature",
        "properties": { "value": "9" }, 
        "geometry": {
            "type": "Point",
            "coordinates": [-121.354465, 40.488737]
        }
    }]
}

Answer 1

I believe the problem is due to the fact that your value s are in the geojson as strings not numbers. When I changed them to numbers as below your example code worked for me

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": { "value": 7 }, 
        "geometry": {
            "type": "Point",
            "coordinates": [-121.415061, 40.506229]
        }
    }, {
        "type": "Feature",
        "properties": { "value": 8 }, 
        "geometry": {
            "type": "Point",
            "coordinates": [-121.505184, 40.488084]
        }
    }, {
        "type": "Feature",
        "properties": { "value": 9 }, 
        "geometry": {
            "type": "Point",
            "coordinates": [-121.354465, 40.488737]
        }
    }]
}

If you still get the AJAX error you may need to run a local server ( you can do this with python -m SimpleHTTPServer in your project folder and then load localhost:8000/path/to/index.html in your browser)