JSFiddle - React, Tailwind, and code Playground

by Mitja Tomažič

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
		<body>
    <div id="map"></div>
		<div style="float: right; margin-top:6pt;">
		<button onclick="changeText();">Change text</button> 
		<button onclick="changeStyle();">Change style</button>
    </div>
    </body>

CSS

html, body {
    	height: 100%;
    	padding: 0;
    	margin: 0;
    	background-color: white;
    }
    #map {
    	width: 100%;
    	height: 90%;
    }
			.titleStyle1 {
			  color: #30608F;
			  font-weight: bold;
        background-color: rgba(245, 245, 245, 0.8);
      }
			.contentStyle1 {
        background-color: rgba(245, 245, 245, 0.8);
      }
			.titleStyle2 {
			  font-weight: bold;
        background-color: #F0FFF0;
      }
			.contentStyle2 {
        background-color: #FFFFE8;
      }

JavaScript

var map = L.map('map', {
    		center: [40, 0],
    		zoom: 4
    	});
    
    	L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    		attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>'
    	}).addTo(map);
    
      L.Control.Info = L.Control.extend({     

        options: {
          title: 'Info',
          titleTooltip: 'Click here for more info',
          content: '',
          maxWidth: '250px',
          titleClass: '',
          contentClass: ''
        },
        
        initialize: function(options) {        
          L.Util.setOptions(this, options);
          this._infoContainer = null;
          this._infoTitleContainer = null;
          this._infoBodyContainer = null;
          this._infoCloseButtonContainer = null;
          this._infoContentContainer = null;
          this._infoTitle = this.options.title;
          this._infoTitleTooltip = this.options.titleTooltip;
          this._infoContent = this.options.content;
          this._titleShown = false;
          this._titleClass = this.options.titleClass;
          this._contentClass = this.options.contentClass;
          this._infoTitleStyle = 'padding: 5px;';
          this._infoContainerClasses = 'leaflet-control-layers leaflet-control';
        },
        
        onAdd: function(map) {
          var infoContainer = L.DomUtil.create('div', 'leaflet-control-layers');

          var infoTitle = L.DomUtil.create('div');
          infoContainer.appendChild(infoTitle);
          infoTitle.setAttribute('style', this._infoTitleStyle);

          var infoBody = L.DomUtil.create('div', 'leaflet-popup-content-wraper');
          infoContainer.appendChild(infoBody);
          infoBody.setAttribute('style', 'max-width:' + this.options.maxWidth);

          var infoContent = L.DomUtil.create('div', 'leaflet-popup-content');
         ...