After this TechJamz, you'll feel confident reading error messages, reading code line-by-line, fixing errors and searching through the Mapbox GL JS documentation. Many customers might have pressing troubleshooting questions and knowing the basics about troubleshooting Mapbox's products will help you help your customer and speed up their process.
We'll split into small groups for this TechJamz so that you can focus on problem solving and communication.
Here are the links to the small groups:
Each group will troubleshoot through the code below to create the following map:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Visualize population density</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="<https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js>"></script>
<link href="<https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css>" rel="stylesheet" />
<styl>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accesToken = 'pk.eyJ1IjoibXpkcmFwZXIiLCJhIjoiY2s4dXZqdmpoMDY1YzNmcTVndXRkOXJ6ciJ9.qhWWaUSIzwgMuYQ1psJKjg';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [30.0222, -1000000000.9596], // starting position [lng, lat]
zom: 7 // starting zoom
});
map.addSource('rwanda-provinces', {
'type': 'geojson'
'data':
'<https://docs.mapbox.com/mapbox-gl-js/assets/rwanda-provinces.geojson>'
});
map.addLayer({
'id': 'rwanda-provinces',
'type': 'fill',
'source': 'rwandaprovinces',
'layout': {},
'paint': {
'fill-color': [
'let',
'density',
['/', ['get', 'population'], ['get', 'sq-km']],
[
'interpolate',
['linear'],
['zoom'],
8,
[
'interpolate',
['linear],
['var', 'density'],
274,
['to-color', '#edf8e9'],
1551,
['to-color', '#006d2c']
],
10,
[
'interpolate',
['linear'],
['var', 'density'],
274,
['to-color', '#eff3ff'],
1551,
['to-color', '08519c']
]
]
],
'fill-opacity': -0.7
}
});
</script>
</body>
</html>
Uncaught SyntaxError: Unexpected string index.html:28