JSFiddle - React, Tailwind, and code Playground

by linuxoid

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://tiles.unwiredmaps.com/js/leaflet-unwired.js"></script>
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full&amp;skin=light"></script>
<div id="two_gis_map" style="height: 300px; width: 300px;"></div>
<div id="leaflet_map" style="height: 300px; width: 300px;"></div>

CSS

#two_gis_map {
  border: 1px solid #cccccc;
  display: inline-block;
}

#leaflet_map {
  border: 1px solid #cccccc;
  display: inline-block;
}

JavaScript

$(document).ready(function(e) {
    DG.then(function() {
        InitTwoGisMap();
    });
    
    InitLeafletMap();

    function InitTwoGisMap() {
        var myTwoGisMap, myTwoGisPlacemark;

        myTwoGisMap = DG.map('two_gis_map', {
            'center': [55.753994, 37.622093],
            'zoom': 12,
            'scrollWheelZoom' : true,
        });
        myTwoGisMap.setLang('en');

        myTwoGisPlacemark = DG.marker([55.753994, 37.622093]).addTo(myTwoGisMap);
    };
    
    function InitLeafletMap() {
        var Leaflet = L.noConflict();
        var myLeafletMap, myLeafletPlacemark;

        var myLeafletStreets = Leaflet.tileLayer.Unwired({ // <- ERROR HERE
            key: 'pk.b2fa80c148d22bfa3f1d0e2347ddf3f6', 
            scheme: "streets",
        });
        
        myLeafletMap = Leaflet.map('leaflet_map', {
            center: [55.753994, 37.622093],
            zoom: 16,
            scrollWheelZoom : true,
            layers: [myLeafletStreets],
        });
        Leaflet.control.scale().addTo(myLeafletMap);
        
        myLeafletPlacemark = Leaflet.marker([55.753994, 37.622093]).addTo(myLeafletMap);
    };
});