JSFiddle - React, Tailwind, and code Playground

by Nicolas

HTML

<script src="http://www.vegactu.com/m1/nitrate2/js/chepteldep.json"></script>
<script src="http://www.vegactu.com/m1/nitrate2/js/secteurhydro.json"></script>
<script src="http://www.vegactu.com/m1/nitrate2/js/etabelevage.json"></script>
<script src="http://cdn.jsdelivr.net/leaflet.esri/latest/esri-leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css">
<script src="http://cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<script src="http://www.vegactu.com/m1/nitrate2/dist/leaflet.markercluster-src.js"></script>
<link rel="stylesheet" href="http://www.vegactu.com/m1/nitrate2/dist/MarkerCluster.Default.css">
<div id="map"></div>

CSS

.map_legend table, th, td {
  width: 60px;
  height: 20px;
  text-align: center;
 
}
	html, body, #map {
    height: 100%;
     padding: 0;
    margin: 0;
}
	.info {
			padding: 6px 8px;
			font: 14px/16px Arial, Helvetica, sans-serif;
			background: white;
			/* background: rgba(255,255,255,0.8);*/
			background: rgba(255,255,255);
			box-shadow: 0 0 15px rgba(0,0,0,0.2);
			/* border-radius: 5px; */
			width:300px;
		}
		.info h3 {
			margin: 0 0 5px;
		}
		.info h4 {
			margin: 0 0 5px;
			color: #777;
		}

		.legend {
			text-align: left;
			line-height: 10px;
			font-size:11px;
			width:180px;
			color: #555;
			
		}
		.legend i {
			width: 18px;
			height: 18px;
			float: left;
			margin-right: 8px;
			/* opacity: 0.9; */
		}
.leaflet-control-layers {
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  background: #fff;
  border-radius: 0px;
}

JavaScript

map = L.map('map', {
    center: [46.96526,2.21924],
		zoom:6,
		minZoom:6,
		maxZoom:13,
		
		});

L.esri.basemapLayer('Topographic').addTo(map);}