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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://maps.api.sygic.com/js/sygic/1.3.0/leaflet.sygic.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
    

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <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://cdn.rawgit.com/Sygic/sygic.github.io/master/demo-api-key.js"></script>
    
</head>

<body>
    <div id="map">
    </div>
</body>
<script src="https://cdn.rawgit.com/Sygic/sygic.github.io/master/libs/Polyline.encoded.js"></script>

</html>

CSS

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

.leaflet-control-layers, .leaflet-popup-content-wrapper {
    border-radius: 0!important;
}

.leaflet-popup-content {
    margin: 0px 19px 0px 5px;
    line-height: 1.4;
}

.leaflet-popup .context-menu {
    background: #fff;
    padding: 6px 0!important;
    cursor: default;
    list-style-type: none;
    margin: 0!important;
    white-space: nowrap;
}

.leaflet-popup li {
    background-color: #fff;
}

.leaflet-popup .context-menu li a {
    text-decoration: none!important;
    cursor: pointer!important;
}

.leaflet-popup a {
    border-color: transparent;
    border-style: dotted;
    border-width: 1px 0;
    color: #676a6c;
    cursor: default;
    display: block;
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    padding: 4px 44px 4px 16px;
    position: relative;
}

.leaflet-popup li a:focus, .leaflet-popup li a:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}

JavaScript

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

    /* initialize map */
    let map = L.map("map");
    let latLngClicked;

    map.on('contextmenu', function(e,b) {
        L.popup().setLatLng(e.latlng)
        .setContent("<ul class='context-menu'>" + 
                        "<li><a id='from-here'><i class='fa fa-flag'></i> Directions from here</a></li>"+
                        "<li><a id='to-here'><i class='fa fa-flag-checkered'></i> Directions to here</a></li>"+
                    "</ul>").openOn(map);
        latLngClicked = e.latlng;         
        tempAlert(coordsToString(e.latlng));
    });

    let sygicTileLayer = L.TileLayer.sygic(apiKey);
    let incidentLayer = L.TileLayer.sygicIncident(apiKey);
    let restrictionLayer = L.TileLayer.sygicRestriction(apiKey);
    let sateliteLayer = L.TileLayer.sygicSatellite(apiKey, { detectRetina: false });
    let trafficLayer = new L.TileLayer.sygicTraffic(apiKey, {
        trafficControl: true
    });
    let poiLayer = L.TileLayer.sygicPoi(apiKey);
    let baseMaps = { 'Map': sygicTileLayer, 'Satelite': sateliteLayer };

    let overlayMaps = {
        'Poi': poiLayer,
        'Restriction': restrictionLayer,
        'Traffic': trafficLayer,
        'Incident': incidentLayer
    };

    L.control.layers(baseMaps, overlayMaps, { collapsed: false }).addTo(map);

    L.layerGroup([sygicTileLayer, incidentLayer, poiLayer, restrictionLayer]).addTo(map);

    let responseLayer;

    /* REQUEST BODY */
    let request = {
        origin: "48.1464,17.10687",
        destination: "49.00254,21.23971",
        compute_alternatives: true
    };
    
    /* call directions api, display on map */
    let compute = function (request) {
        //call sygic directions api
        $.post('https://routing.api.sygic.com/v0/api/directions?key=' + apiKey, request).done(function (response) {
            if (response.routes.length > 0) {
                let boundsCoords = [];
                //remove if map already...