JSFiddle - React, Tailwind, and code Playground

by Dooweet

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="dist/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="dist/leaflet.ie.css" />
<![endif]-->
<script src="dist/leaflet.js"></script>
<script type="text/javascript">
var LeafIcon = L.Icon.extend({
    iconUrl: 'dist/images/leaf-green.png',
});
</script>
</head>

<body>

<div id="map" style="height: 100%"></div>
<script  type="text/javascript">
// initialize the map on the "map" div
var map = new L.Map('map');

// create a CloudMade tile layer with style #997 (or use other provider of your choice)
var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/67110edb3c914a35b14fc11d8d32dc26/44909/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
});

// add the layer to the map, set the view to a given place and zoom
map.addLayer(cloudmade).setView(new L.LatLng(48.856614, 2.3522219), 13);
</script>

<script  type="text/javascript">
var greenIcon = new LeafIcon(),
    marker = new L.Marker(new L.LatLng(51.5, -0.09), {icon: greenIcon});
    
var greenIcon = new LeafIcon(),
    redIcon = new LeafIcon('dist/images/leaf-red.png'),
    blueIcon = new LeafIcon('dist/images/leaf-blue.png');
    studioIcon = new LeafIcon('dist/images/leaf-studio.png');    


map.addLayer(marker1).addLayer(marker2).addLayer(marker3).addLayer(marker4);
    
    
</script>


<script src="data/adresse_lieux.js"></script>
<script src="data/description_lieux.js"></script>

</body>
</html>

CSS

/* required styles */

.leaflet-map-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-pane,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane,
.leaflet-popup-pane,
.leaflet-overlay-pane svg,
.leaflet-zoom-box,
.leaflet-image-layer { /* TODO optimize classes */
    position: absolute;
    }
.leaflet-container {
    overflow: hidden;
    }
.leaflet-tile-pane, .leaflet-container {
    -webkit-transform: translate3d(0,0,0);
    }
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    }
.leaflet-marker-icon,
.leaflet-marker-shadow {
    display: block;
    }
.leaflet-clickable {
    cursor: pointer;
    }
.leaflet-container img {
    max-width: none !important;
    }

.leaflet-tile-pane { z-index: 2; }

.leaflet-objects-pane { z-index: 3; }
.leaflet-overlay-pane { z-index: 4; }
.leaflet-shadow-pane { z-index: 5; }
.leaflet-marker-pane { z-index: 6; }
.leaflet-popup-pane { z-index: 7; }

.leaflet-zoom-box {
    width: 0;
    height: 0;
    }

.leaflet-tile {
    visibility: hidden;
    }
.leaflet-tile-loaded {
    visibility: inherit;
    }

a.leaflet-active {
    outline: 2px solid orange;
    }


/* Leaflet controls */

.leaflet-control {
    position: relative;
    z-index: 7;
    }
.leaflet-top,
.leaflet-bottom {
    position: absolute;
    }
.leaflet-top {
    top: 0;
    }
.leaflet-right {
    right: 0;
    }
.leaflet-bottom {
    bottom: 0;
    }
.leaflet-left {
    left: 0;
    }
.leaflet-control {
    float: left;
    clear: both;
    }
.leaflet-right .leaflet-control {
    float: right;
    }
.leaflet-top .leaflet-control {
    margin-top: 10px;
    }
.leaflet-bottom .leaflet-control {
    margin-bottom: 10px;
    }
.leaflet-left .leaflet-control {
    margin-left: 10px;
    }
.leaflet-right .leaflet-control {
    margin-right: 10px;
    }

.leaflet-control-zoom, .leaflet-control-layers {
    -moz-border-radius: 7px;
   ...

JavaScript

/*
 Copyright (c) 2010-2011, CloudMade, Vladimir Agafonkin
 Leaflet is a modern open-source JavaScript library for interactive maps.
 http://leaflet.cloudmade.com
*/
(function(a){a.L={VERSION:"0.3",ROOT_URL:a.L_ROOT_URL||function(){var a=document.getElementsByTagName("script"),b=/\/?leaflet[\-\._]?([\w\-\._]*)\.js\??/,c,d,e,f;for(c=0,d=a.length;c<d;c++){e=a[c].src,f=e.match(b);if(f)return f[1]==="include"?"../../dist/":e.split(b)[0]+"/"}return""}(),noConflict:function(){return a.L=this._originalL,this},_originalL:a.L}})(this),L.Util={extend:function(a){var b=Array.prototype.slice.call(arguments,1);for(var c=0,d=b.length,e;c<d;c++){e=b[c]||{};for(var f in e)e.hasOwnProperty(f)&&(a[f]=e[f])}return a},bind:function(a,b){return function(){return a.apply(b,arguments)}},stamp:function(){var a=0,b="_leaflet_id";return function(c){return c[b]=c[b]||++a,c[b]}}(),requestAnimFrame:function(){function a(a){window.setTimeout(a,1e3/60)}var b=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||a;return function(c,d,e,f){c=d?L.Util.bind(c,d):c,e&&b===a?c():b(c,f)}}(),limitExecByInterval:function(a,b,c){function g(){d=!1,e&&(f.callee.apply(c,f),e=!1)}var d,e,f;return function(){f=arguments,d?e=!0:(d=!0,setTimeout(g,b),a.apply(c,f))}},falseFn:function(){return!1},formatNum:function(a,b){var c=Math.pow(10,b||5);return Math.round(a*c)/c},setOptions:function(a,b){a.options=L.Util.extend({},a.options,b)},getParamString:function(a){var b=[];for(var c in a)a.hasOwnProperty(c)&&b.push(c+"="+a[c]);return"?"+b.join("&")},template:function(a,b){return a.replace(/\{ *([\w_]+) *\}/g,function(a,c){var d=b[c];if(!b.hasOwnProperty(c))throw Error("No value provided for variable "+a);return d})}},L.Class=function(){},L.Class.extend=function(a){var b=function(){this.initialize&&this.initialize.apply(this,arguments)},c=function(){};c.prototype=this.prototype;var d=new...