JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
    <link rel="stylesheet" href="https://maps.api.sygic.com/js/sygic/1.3.0/leaflet.sygic.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
    <script src="https://maps.api.sygic.com/js/sygic/1.3.0/leaflet.sygic.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></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

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

JavaScript

window.onload = function () {
    var apiKey = getApiKey();

    if (apiKey == null || apiKey == "") {
        return location.reload();
    }

    var reverseGeocodingUrl = "https://geocoding.api.sygic.com/v1/api/batch/reversegeocode?key=" + apiKey;

    var map = L.map("map",{
        center: [51.50055501480524, -0.12676656246185306],
        zoom: 18
    });

    var sygicTileLayer = L.TileLayer.sygic(apiKey);
    L.layerGroup([sygicTileLayer]).addTo(map);


    var resultsLayer;

    if (resultsLayer != null)
        map.removeLayer(resultsLayer);

    var request = [
        {
            lat: "51.50105925961465",
            lon: "-0.12856364250183108"
        },
        {
            lat: "51.50124960223127",
            lon: "-0.12593507766723636"
        }
    ];


    $.ajax({
        type: 'POST',
        url: reverseGeocodingUrl,
        dataType: 'json',
        contentType: "application/json; charset=UTF-8",
        data: JSON.stringify(request),
    }).done(function (data, textStatus, xhr) {
        // get url for result of reverse geocoding
        var location = xhr.getResponseHeader("location");
        getResults(location);
    }).fail(function (data, textStatus, xhr) {
        alert("FAILED!\r\n" + JSON.stringify(data, null, 2));
    });


    function getResults(url) {
        $.ajax({
            type: "GET",
            url: url,
            dataType: "json",
            contentType: "application/json; charset=UTF-8",
        }).done(function (data, textStatus, xhr) {
            // check state of reverse geocoding process
            if (isWaitingForResults(data.state)) {
                setTimeout(function () {
                    getResults(url);
                }, 1000);
            } else {
                displayResults(data);
            }
        }).fail(function (data, textStatus, xhr) {
            alert("FAILED!\r\n" + JSON.stringify(data, null, 2));
        });
    }

    function isWaitingForResults(state) {
        return...