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://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 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 encodedPolylineString =...