JSFiddle - React, Tailwind, and code Playground

by Vignesh Gopalakrishnan

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map">&nbsp;</div>

SCSS

body {
    height:100%;
}
#map {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:black;
}

JavaScript

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map', {
    layers: [
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        noWrap: true
    })],
    zoom: 10,
    center: [51.5, -0.09],
    //        maxBounds: [[-90.0,-180.0],[90.0,180.0]]
    maxBounds: [
        [-85.0, -180.0],
        [85.0, 180.0]
    ]

});
L.marker([51.5, -0.09]).on('click', markerOnClick).on('mouseover',markerOnHover).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();
var LeafIcon = L.Icon.extend({
    options: {
        iconSize:     [48, 48],
        iconAnchor:   [24, 48]
    }
});
var greenIcon = new LeafIcon({iconUrl: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/Green_pin.png'}),
    redIcon = new LeafIcon({iconUrl: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/Red_pin.png'}),
    blueIcon = new LeafIcon({iconUrl: 'https://cdn4.iconfinder.com/data/icons/48x48-free-object-icons/48/Blue_pin.png'});    

function markerOnHover(e){
	e.target.setIcon(blueIcon);
}
function markerOnClick(e){
	e.target.setIcon(greenIcon);
}