JSFiddle - React, Tailwind, and code Playground

by amirali roshanaei

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<div id="map"></div>
<div id="panel">Panel, <a href="#">close it</a>!</div>

CSS

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

#panel {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    height: 50%;
    background: #fff;
    border: 1px solid #333;
    -webkit-transform: translate(0, 100%);
    -webkit-transition: -webkit-transform 500ms ease-in-out;
}

.frame-animate-in {
    -webkit-transform: translate(0, 0) !important;  
}

JavaScript

// Demo code from leafletjs.com
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map).bindPopup('Popup.');

marker.on('click', function(e) {
    console.log('click');
    $('#panel').addClass('frame-animate-in');
    setTimeout(function() {
        $('#map').css('height', '50%');
        //map.invalidateSize(true)
    }, 500);
});

$('#panel a').click(function(event) {
    event.preventDefault();
    $('#panel').removeClass('frame-animate-in');
    $('#map').css('height', 'auto');
    map.invalidateSize(true);
});