JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>VectorMap test</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
    <script src="https://maps.api.sygic.com/Scripts/mapbox-gl-ex-zoom.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/Sygic/sygic.github.io@master/demo-api-key.js"></script>
    
    
</head>

<body>
    <div id='map'></div>
</body>

</html>

CSS

body {
    margin: 0;
    padding: 0;
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

JavaScript

window.onload = function() {
    var apiKey = getApiKey();
    var map = new mapboxgl.Map({
        container: 'map',                  
        style: 'https://maps.api.sygic.com/vstyle/' + apiKey,
        center: [17.12, 48.14],
        zoom: 13,
        minZoom: 4,
        hash: true
    });
    
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    map.addControl(new ZoomIndicatorControl(), 'top-left');	
}