JSFiddle - React, Tailwind, and code Playground

by Renan Gomes

HTML

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.css' rel='stylesheet' />
    
<div id='company-location'></div>

CSS

* { margin: 0; padding: 0 }

html, body, div {
  height: 100%;
  width: 100%
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoicmVlYnIiLCJhIjoiY2ltd3Z0NzN6MDNleXZxbHVvcGp5d2t0cCJ9.sedpGqvJ8iHtEuU4b7bI2A';

var map = new mapboxgl.Map({
    container: 'company-location', // container id
    style: 'mapbox://styles/mapbox/emerald-v8', //stylesheet location
    center: [-47.2318711,-23.1284243], // starting position
    zoom: 18 // starting zoom
});