Objective

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.

Steps

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:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e39c01e5-14f8-4a1c-9d7c-02af049a66c6/Untitled.png

  1. Open a text editor
  2. Copy and paste the code below
  3. Save the file as index.html
  4. Open the the file in your browser
  5. Open the JavaScript console
  6. Read the error messages and solve the problem until the map appears
<!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

  1. Go to line 28 in your file
  2. Examine why the computer is running line 28 as part of line 27