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/libs/numbered-icon.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>
<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;
}

.leaflet-marker-icon .number {
    position: relative;
    top: -5px;
    font-size: 12px;
    width: 85px;
    font-weight: bold; 
    text-align: center;
    color: black;
}

JavaScript

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

    var optimizationUrl = "https://optimization.api.sygic.com/v0/api/optimization?key=" + apiKey;
    var routingUrl = "https://directions.api.sygic.com/v0/api/directions?key=" + apiKey;

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

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

    //we start in one depot, want to deliver to different locations and then finish in another depot
    var problemDescription = {
        startDepot: "48.21287,17.17401", //we start and end in same location
        endDepot: "48.208310, 17.187978",
        waypointsToBeOptimized: ["48.14713,17.08430", "48.15349,17.08556", "48.14932,17.21944", "48.16555,17.13828", "48.15032,17.15797"]
    }

    var optimizationApiInput = {
        locations: [
            {
                location_id: "start",
                coordinates: problemDescription.startDepot
            },
            {
                location_id: "waypoint-0",
                coordinates: problemDescription.waypointsToBeOptimized[0]
            },
            {
                location_id: "waypoint-1",
                coordinates: problemDescription.waypointsToBeOptimized[1]
            },
            {
                location_id: "waypoint-2",
                coordinates: problemDescription.waypointsToBeOptimized[2]
            },
            {
                location_id: "waypoint-3",
                coordinates: problemDescription.waypointsToBeOptimized[3]
            },
            {
                location_id: "waypoint-4",
                coordinates: problemDescription.waypointsToBeOptimized[4]
            },
            {
                location_id: "end",
                coordinates: problemDescription.endDepot
            }
        ],
        tasks: [
            {
                task_id: "task-to-waypoint-0",
                priority: "critical", //we don't want to skip this at any cost
               ...