mapbox-gl-leaflet template

by fnicollet

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.14.3/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.14.3/mapbox-gl.js"></script>
<script src="https://cdn.rawgit.com/mapbox/mapbox-gl-leaflet/leaflet-master/leaflet-mapbox-gl.js"></script>
<div id="map"></div>

CSS

body, html {
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
		}
		#map { 
			width: 100%; 
			height: 100%; 
		
		}

JavaScript

var map = L.map('map').setView([38.912753, -77.032194], 15);
L.marker([38.912753, -77.032194])
    .bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
    .addTo(map)
    .openPopup();
var gl = L.mapboxGL({
    accessToken: "pk.eyJ1IjoiZm5pY29sbGV0IiwiYSI6Ilkxd1ItT1UifQ.emTQ9Yi7B49E8xIAMnZGOA",
    style: 'mapbox://styles/mapbox/bright-v8'
}).addTo(map);