JSFiddle - React, Tailwind, and code Playground

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" />
    <link rel="stylesheet" href="https://maps.api.sygic.com/js/sygic/1.3.0/leaflet.sygic.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>
</html>

CSS

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

JavaScript

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

    if (apiKey == null || apiKey == "") {
        return location.reload();
    }

    var map;
    var popup;

    var lat = 51.50105925961465;
    var lon = -0.12856364250183108;

    map = L.map("map", {
        center: [lat, lon],
        zoom: 18
    });

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

    var contextMenu = L.popup();

    map.on('contextmenu',(e) => {
        contextMenu.setContent('<a href onclick="whatIsHere(' + e.latlng.lat + ',' + e.latlng.lng + '); return false;">What\'s here?</a>').setLatLng(e.latlng).openOn(map);
    });

    function whatIsHere (lat, lon) {

        if (popup != null)
            map.removeLayer(popup);

        $.get('https://geocoding.api.sygic.com/v1/api/reversegeocode?location=' + lat + ',' + lon + '&key=' + apiKey).done(function (response) {
            if (response.results.length > 0) {

                var results = response.results.filter(result => {
                    return result.type === "address"
                })

                if(results.length > 1){
                    results = results.filter(l => {
                        return l.location_type === "interpolated"
                    });
                }
                else {
                    if (results.length == 0) {
                        results = response.results.filter(result => {
                            return result.type === "road" && result.components[0].value != "(Unnamed Road)"
                        });
                        if (results.length == 0) {
                            results = response.results.filter(result => {
                                return result.type === "locality"
                            });
                        }
                    }
                }

                results.forEach(function(element){
                    var formattedResult =  element.formatted_result;

     ...