Mapbox gl playground

A mapbox gl js playground for quick tryouts

by knighteq

HTML

<script src="	https://npmcdn.com/@turf/turf/turf.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css">
<div id="map"></div>

CSS

#map {
  height: 500px;
}

JavaScript

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

 function handleKitten(e) {
   e.target.style.backgroundImage = 'url(http://placekitten.com/g/50/50)';
   e.stopPropagation();
 }

 function handleMapClick(e) {
   console.log('handleMapClick', e);
   map.off('click', handleMapClick.bind(this));
 }

 var styles = {
    "version": 8,
    "name": "Mapbox Streets",
    "sprite": "mapbox://sprites/mapbox/streets-v8",
    "layers": {
      "id": "water",
      "source": "mapbox-streets",
      "source-layer": "water",
      "type": "fill",
      "paint": {
        "fill-color": "#00ffff"
      }
    }
  };

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

 var el = document.createElement('div');
 el.style.backgroundImage = 'url(https://placekitten.com/g/40/40/)';
 el.style.width = 40 + 'px';
 el.style.height = 40 + 'px';

 new mapboxgl.Marker(el)
   .setLngLat([ -63.29223632812499, -18.28151823530889 ])
   .addTo(map);

 // el.addEventListener('click', handleKitten, false);
 map.on('click', handleMapClick.bind(el));