JSFiddle - React, Tailwind, and code Playground

by Pavlo

HTML

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

CSS

body{
	margin: 0;
	padding: 50px;
}
#map{
	background: #5A8CBD;
	min-height: 600px;
    height: 100%;
	width: 100%;
}
 
    .leaflet-control-zoom-in,
    .leaflet-control-zoom-out {
        float:right;
      font: bold 18px 'Lucida Console', Monaco, monospace;
      text-indent: 1px;
      }
    .leaflet-control-zoom-out {
      font-size: 20px;
      }
    
    .leaflet-touch .leaflet-control-zoom-in {
      font-size: 22px;
      }
    .leaflet-touch .leaflet-control-zoom-out {
      font-size: 24px;
      }

JavaScript

// инициализация карты (начальные точки, зуминг)
var map = L.map("map", {
	// основные настройки
	center: [-128, 256],
	zoom: 1,
	minZoom: 1,
	maxZoom: 10,
	crs: L.CRS.Simple,
    zoomControl: false,
	// элементы управления
	attributionControl: false
});

// элементы управления картой
L.control.scale({
    imperial: false   
}).addTo(map);

L.control.zoom({
     position:'topright'
}).addTo(map);

// добавляем слой с тайлами
L.tileLayer("somepath/{z}/{x}/{y}.png", {
	continuousWorld: true,
	noWrap: true
}).addTo(map);
$('#map')