JSFiddle - React, Tailwind, and code Playground

by Gabor Farkas

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="https://rawgit.com/kartena/Proj4Leaflet/master/lib/proj4-compressed.js"></script>
<script src="https://rawgit.com/kartena/Proj4Leaflet/master/src/proj4leaflet.js"></script>
<div id="map" class="map"></div>

CSS

.map {
    width: 400px;
    height: 400px;
}

JavaScript

var wmsMap= L.tileLayer.wms('http://kaart.maaamet.ee/wms/alus', {
    layers: 'MA-ALUS',
    format: 'image/png',
    maxZoom: 14,
    minZoom: 3,
    continuousWorld: true,
    transparent:true
});

var crs = new L.Proj.CRS('EPSG:3301',
     '+proj=lcc +lat_1=59.33333333333334 +lat_2=58 +lat_0=57.51755393055556 +lon_0=24 +x_0=500000 +y_0=6375000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
                     {
                         resolutions: [
			1024, 512, 256, 128,
			64, 32, 16, 8, 4, 2, 1, 0.5
		],
                     transformation: new L.Transformation(1, -40500, -1, 7017000)
                     });

var map = L.map('map', {
        layers:[wmsMap],
        continuousWorld: true,
        maxZoom: 13,
        minZoom: 1,
        maxBounds: new L.latLngBounds([
            [56.42, 20.87],
            [60.9, 29.23]
        ]),
        crs: crs
    }
);
map.setView([58.66, 25.05], 3);