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://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
    
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
    <script src="https://maps.api.sygic.com/js/leaflet.sygic-1.1.0.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.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>
<!-- Taken from https://github.com/jieter/Leaflet.encoded -->
<script type="text/javascript" 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 mapApiKey = getApiKey();
    var map = L.map("map").setView([44.67646564865964, 10.625152587890625], 13);

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

    L.easyButton('fa-send-o',
        function(btn, map){
            sendToNavigation()
        },
        'Send route to navigation'
    ).addTo(map);

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

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

            //create leaflet polyline object from api response
            var polyline = L.Polyline.fromEncoded(resultRoute.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");
        }
    });

    function sendToNavigation() {
        var apiKey = prompt("Please enter ApiKey for Send route to navigation API");

        if (apiKey) {
            var sendToNaviUrl = "https://directions.api.sygic.com/v0/api/sendtonavi?key=" + apiKey;

            var tag = prompt("Please enter login or IMEI of the device in format \"login_YourLogin@email.com\" or...