I have been attempting to generate a map, plot data points using GeoJSON and Mapbox. Everything goes smoothly when I use a default color code for all points, but as soon as I try to implement data driven styling to assign different colors based on different property values, errors start cropping up. I am working with mapboxgl.js.
Upon inspecting in Chrome, the following errors pop up:
net::ERR_INTERNET_DISCONNECTED
exports.getJSON @ ajax.js:33
evented.js:111 Error
at XMLHttpRequest.r.onerror (ajax.js:18)
If anyone could offer some assistance, it would be greatly appreciated! Below are my GeoJSON and HTML files.
mapboxgl.accessToken = 'pk.eyJ1Ijoicml0YW1iaGFyYSImEiOiJjajZuNGZjNHUwNHgxMzNwc29hZ2ZkbmRvIn0.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]
}
}]
}