Mapbox gl playground

A mapbox gl js playground for quick tryouts

by cs09g

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js"></script>
<div id='map'></div>

CSS

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

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiY3MwOWciLCJhIjoiY2pkOWlycmVpNm1mNjJ5bnNhbHZkbThhYiJ9.cKAp-Qr4tju7fZxU9jT4JQ';
var map = new mapboxgl.Map({
  container: 'map',
  zoom: 0.3,
  center: [0, 20],
  style: 'mapbox://styles/mapbox/light-v10'
});

map.addControl(new mapboxgl.NavigationControl());

// filters for classifying earthquakes into five categories based on magnitude
var mag1 = ["<", ["get", "mag"], 2];
var mag2 = ["all", [">=", ["get", "mag"], 2], ["<", ["get", "mag"], 3]];
var mag3 = ["all", [">=", ["get", "mag"], 3], ["<", ["get", "mag"], 4]];
var mag4 = ["all", [">=", ["get", "mag"], 4], ["<", ["get", "mag"], 5]];
var mag5 = [">=", ["get", "mag"], 5];

// colors to use for the categories
var colors = ['#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c'];

map.on('load', function() {
  // add a clustered GeoJSON source for a sample set of earthquakes
  map.addSource('earthquakes', {
    "type": "geojson",
    "data": "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
    "cluster": true,
    "clusterRadius": 80,
    "clusterProperties": { // keep separate counts for each magnitude category in a cluster
      "mag1": ["+", ["case", mag1, 1, 0]],
      "mag2": ["+", ["case", mag2, 1, 0]],
      "mag3": ["+", ["case", mag3, 1, 0]],
      "mag4": ["+", ["case", mag4, 1, 0]],
      "mag5": ["+", ["case", mag5, 1, 0]]
    }
  });
  // circle and symbol layers for rendering individual earthquakes (unclustered points)
  map.addLayer({
    "id": "earthquake_circle",
    "type": "circle",
    "source": "earthquakes",
    "filter": ["!=", "cluster", true],
    "paint": {
      "circle-color": ["case",
        mag1, colors[0],
        mag2, colors[1],
        mag3, colors[2],
        mag4, colors[3], colors[4]],
      "circle-opacity": 0.6,
      "circle-radius": 12
    }
  });
  map.addLayer({
    "id": "earthquake_label",
    "type": "symbol",
    "source": "earthquakes",
    "filter": ["!=", "cluster", true],
    "layout": {
      "text-field":...