JSFiddle - React, Tailwind, and code Playground

by mrrost

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
 <div id="map"></div>

CSS

* { font-family: arial; }

#map {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* hide default leaflet pin */
.leaflet-marker-icon {
	border: 0; margin: 0; padding: 0;
}


/* BY DISABLING THIS CSS CODE THE PROBLEM MANIFESTS ITSELF IN ALL ITS GLORY */ 
/*.leaflet-marker-icon:not(:hover) {
  z-index: 0 !important;
}*/

div.marker {
	font-size: 10px;
	font-weight: bold;
	border: 1px solid #000;
	padding: 1px 3px;
	background: #acf;
	border-radius: 7px;	
	border-top-left-radius: 0;
	width: 18px;
	height: 15px;  
}

div.popup {
  display: none;
  position: absolute;
  border: 1px solid #aaa;
  border-radius: 7px;
  background: #fff;
  padding: 5px;
 	width: 350px; 
  height: 150px;
  font-size: 12px;
}

div.marker:hover div.popup {
  display: block;
}

JavaScript

var map = L.map('map', {
	center: [ 37.7749295, -122.4194155 ],
	zoom: 13
});

L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: ['a','b','c']
}).addTo(map);

var layer = L.layerGroup();	
layer.addTo(map);

var pin = L.divIcon({ 
  html: `
  	<div class='marker'>
    	Pin
    	<div class='popup'>
      	Marker info. Other markers WILL BE on top of this div.
        This is BAD and a PROBLEM.
      </div>
    </div>
  `,
});

for(var i = -0.01; i <= 0.01; i+=0.005) {
  layer.addLayer(L.marker(
    [37.7749295 - i, -122.4194155 + i],
    { icon: pin }
  ));
}