Mapbox gl playground

A mapbox gl js playground for quick tryouts

by askhflajsf

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';

 var map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://styles/mapbox/streets-v9'
   zoom: 9
 });

 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));