Mapbox-gl-js-template

by fxi

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>

CSS

html, body{
    height: 100%;
}

#map {
  display:none;
  height: 61%;
  width: 100%;
}

JavaScript

var elImg = new Image();
document.body.appendChild(elImg);

var elMap = document.createElement("div");
elMap.id = 'map';


mapboxgl.accessToken = 'pk.eyJ1IjoiaGVsc2lua2kiLCJhIjoia1lFZVlNZyJ9.dVxyXwMZWRmnrXnmOuWAMQ';

// init the map
mapboxgl.accessToken = 'pk.eyJ1IjoiaGVsc2lua2kiLCJhIjoia1lFZVlNZyJ9.dVxyXwMZWRmnrXnmOuWAMQ';
var map = new mapboxgl.Map({
    container: elMap,
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-98, 38.88],
    maxZoom: 5,
    minZoom: 1,
    zoom: 3
});

map.on('load', function() {
 map.once("render", function() {
      setTimeout(e => {
      
      
 
      elImg.src = map.getCanvas().toDataURL();
           },100)
    });
});