Mapbox gl playground

A mapbox gl js playground for quick tryouts

by cs09g

HTML

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

CSS

#map {
  height: 500px;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [-97.554882, 35.542201],
  zoom: 5
});

map.on('load', function() {

  var geojson = {
    "type": "geojson",
    "data": {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [-97.554882, 35.542201],
            [-97.617270, 35.482703]
          ]
        },
        "properties": {
          "title": 'aaaaaa' // this is a field we can reference in the addLayer with '{title}'
        }
      }, {
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [-97.617270, 35.482703],
            [-97.535206, 35.427500]
          ]
        },
        "properties": {
          "title": 'bbbbbb'
        }
      }, {
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [-97.617270, 35.482703],
            [-97.491217, 35.476099]
          ]
        },
        "properties": {
          "title": 'cccccc'
        }
      }]
    }
  };

  map.addSource("route", geojson);

  map.addLayer({
    "id": "route",
    "type": "line",
    "source": "route",
    "layout": {
      "line-join": "round",
      "line-cap": "round"
    },
    "paint": {
      "line-color": "lightgreen",
      "line-width": 8
    }
  });

  map.addLayer({
    "id": "symbols",
    "type": "symbol",
    "source": "route",
    "layout": {
      "symbol-placement": "line",
      "text-font": ["Open Sans Regular"],
      "text-field": '{title}', // part 2 of this is how to do it
      "text-size": 16
    }
  });
});