JSFiddle - React, Tailwind, and code Playground

by Nikolay Petrov

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" />

<div id="map"></div>

CSS

html, body, #map {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    .sharelink {
      border: none;
      border-bottom: 1px solid #ccc;
      width: 400px;
    }

JavaScript

var app = {};
	

var baselayersConf = [

  {
    "name"         : "yandex",
    "key"          : "yandex",
    "tileUrlTmpl"  : "http://vec0{s}.maps.yandex.net/tiles?l=map&x={x}&y={y}&z={z}",
    "isElliptical" : true,
    "subdomains"   : "1234",
    "minZoom"      : 0,
    "maxZoom"      : 18
  },

  {
    "name"         : "open street map",
    "key"          : "open_street_map",
    "tileUrlTmpl"  : "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    "isElliptical" : false,
    "subdomains"   : "abc",
    "minZoom"      : 0,
    "maxZoom"      : 19
  },
];
	
    var moscowAltuf = L.latLng(57.82198, 28.31318);
    var map = L.map('map', {
      center: moscowAltuf,
      zoom: 12
    });
    
	map.on('baselayerchange', function (e) {
      var center = map.getCenter();
      var zoom = map.getZoom();
      map.options.crs = e.layer.options.isElliptical ? L.CRS.EPSG3395 : L.CRS.EPSG3857;
      map._resetView(center, zoom, false, false);
    });
	
    // http://msdn.microsoft.com/en-us/library/bb259689.aspx
    function quadkey(zyx) {
      var result = '';
      for (var i = zyx.z; i > 0; i--) {
        var digit = 0;
        var mask = 1 << (i - 1);
        if ((zyx.x & mask) != 0) {
          digit++;
        }
        if ((zyx.y & mask) != 0) {
          digit++;
          digit++;
        }
        result += digit;
      }
      return result;
    }
	
    var basemapsLayers = baselayersConf.map(function (conf) {
      return L.tileLayer(
        conf.tileUrlTmpl,
        L.Util.extend({ quadkey: quadkey }, conf)
      );
    });
	
    var layersCtrl = L.control
      .layers(null, null, { collapsed: false })
      .addTo(map);
	  
    basemapsLayers.forEach(function (layer) {
      layersCtrl.addBaseLayer(layer, layer.options.name);
    });
	
    var mapMatch = location.search.match(/map=(\w+)/);
    var desiredBaselayer = (mapMatch && basemapsLayers.filter(function (layer){
      return layer.options.key === mapMatch[1];
    })[0]);
	
   ...