JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE 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" />
    <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>
<script src="https://cdn.jsdelivr.net/gh/Sygic/sygic.github.io@master/libs/Polyline.encoded.js"></script>

</html>

CSS

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

JavaScript

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

    var map = L.map("map");

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

    var request = {
        "destination": "44.67646564865964,10.625152587890625",
        "origin": "44.65529852148082,10.880284309387207"
    };

    //call sygic directions api
    $.ajax({
        url: "https://routing.api.sygic.com/v0/api/directions?key=" + apiKey,
        method: "POST",
        dataType: "json",
        contentType: "application/json; charset=UTF-8",
        data: JSON.stringify(request)
    }).done(function (response) {
        if (response.routes.length > 0) {
            var route = response.routes[0];

            //create leaflet polyline object from api response
            var polyline = L.Polyline.fromEncoded(route.route, {
                color: 'blue',
                weight: 3,
                smoothFactor: 1
            });
            var coords = polyline.getLatLngs();

            var startMarker = L.marker(coords[0], { title: "Start" });
            var endMarker = L.marker(coords[coords.length - 1], { title: "End" });
            L.layerGroup([polyline, startMarker, endMarker]).addTo(map);

            var bounds = new L.LatLngBounds(coords);
            map.fitBounds(bounds);
        } else {
            alert("NO_RESULTS");
        }
    });
}