JSFiddle - React, Tailwind, and code Playground

by nextstopsun

HTML

<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css">
<script src="http://leafletjs.com/dist/leaflet.js"></script>
<div id="map"></div>

CSS

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

JavaScript

var tileServDNS = 'http://www.basemap.ru';
    var tileServContext = 'madbase';
    var meteoServContext = 'madmeteo';
    var tileServURL = tileServDNS + '/' + tileServContext;
    var meteoServURL = tileServDNS + '/' + meteoServContext;

    var map = L.map('map').setView([55.72711, 37.60071], 8);

    var basemapLayer = L.tileLayer(tileServURL + '/tiles/avto/{z}/{x}/{y}.png', {
        maxZoom: 20,
        attribution: 'Картооснова Московской области'
    });
    
   var testMeteoLayer = L.tileLayer(meteoServURL + '/tiles/ait_00_sfln_EPSG900913/{z}/{x}/{y}.png', {
        maxZoom: 20,
        attribution: 'Тестовый метеослой',
       opacity: 0.7
    });

/*
var testMeteoLayer = L.tileLayer.wms("http://www.basemap.ru/madmeteo/service", {
    layers: 'ait_00_sfln',
    format: 'image/png',
    transparent: true,
    attribution: "Тестовый метеослой WMS",
    opacity:0.5
});
*/
    map.addLayer(basemapLayer);
    map.addLayer(testMeteoLayer);