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>

CSS

#map {
  height: 500px;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiY3MwOWciLCJhIjoiY2pkOWlycmVpNm1mNjJ5bnNhbHZkbThhYiJ9.cKAp-Qr4tju7fZxU9jT4JQ';
var geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "message": "Foo",
        "iconSize": [60, 60]
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -66.324462890625,
          -16.024695711685304
        ]
      }
    }
  ]
};

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

// add markers to map
geojson.features.forEach(function(marker) {
  // create a DOM element for the marker
  var el = document.createElement('div');
  el.innerText = "abc123";
  el.style.fontSize = "15px";
  el.style.color = "red";
  // add marker to map
  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
});