JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<div id = 'map-cont'></div>
<button id = 'height-changer'> 1) Change Height </button>
<button id = 'pos-changer'> 2) Change Position </button>
CSS
#map-cont {
width: 750px;
height: 500px;
border: 1px solid black;
margin: 30px;
}
.leaflet-popup-content{
height: 200px;
}
.inner-wrapper{
background: red;
width: 300px;
height: 100px;
}
.inner-wrapper.full{
height: 200px;
}
JavaScript
var map = L.map('map-cont').setView([51.505, -0.09], 13);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// add a marker in the given location, attach some popup content to it and open the popup
var marker = L.marker([51.5, -0.09]).addTo(map)
.bindPopup('<div class = "inner-wrapper"></div>')
.openPopup();
document.getElementById('height-changer').addEventListener('click',function(e){
document.getElementsByClassName('inner-wrapper')[0].className += ' full';
});
document.getElementById('pos-changer').addEventListener('click',function(e){
marker.setLatLng([51.45, -0.086]);
});