JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <!-- links and scipts here -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet-arc/bin/leaflet-arc.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <!-- date-time picker input -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.min.css">

</head>
<body>

<div id="mapid"></div>

<a id="site-menu-button" class="menu-toggle">
  <svg width="60" height="60">
    <use href="#menu-icon-svg"></use>
  </svg>
</a>

<a id="site-fullscreen-button" onclick="toggleFullScreen()">
  <svg width="60" height="60">
    <use href="#fullscreen-icon-svg"></use>
  </svg>
</a>

<a id="site-exit-fullscreen-button" onclick="toggleFullScreen()">
  <svg width="60" height="60">
    <use href="#exit-fullscreen-icon-svg"></use>
  </svg>
</a>

<div id="sidebar">
  <div id="sidebar-wrapper">

    <div id="site-controls">
    <form class="overflow-auto">
      <label for="origin">Origin</label>
      <div class='border rounded input-container'>
      <div class="form-check">
        <input class="form-check-input" type="radio"
         ...

CSS

#sidebar-wrapper {
  display:flex;
  flex-direction: column;

}
#site-controls {
  overflow-y: auto;  
  padding-bottom: 1em;
}

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
#mapid {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
svg, a {
  vertical-align: top;
  padding: 0;
  margin: 0;
}
#site-menu-button {
  z-index: 1100;
  position: absolute;
  top:10px;
  left:20px;
  padding: 0;
  margin: 0;
}
#site-fullscreen-button, #site-exit-fullscreen-button {
  z-index: 1100;
  position: absolute;
  bottom:0;
  right:0;
}
#site-exit-fullscreen-button {
  /* exit fullscreen should be invisible on page start
     then display is toggled in fullscreen handler function */
  display: none;
}

/* control menu items */
#site-controls {
  margin-top:80px;
  margin-left:10px;
  margin-right:10px;
  min-width: 200px; /* stops wrapping on menu collapse */
}
#origin-form-group {
  display: none;
}
#forecast-button {
  margin-top:20px;
  width: 100%;
  min-width: 200px;
}
.input-container {
  padding:5px;
   margin-bottom: 15px;
}
.form-group {
  padding:0;
  margin:0;
}
.form-group input, label {
  color: black;
}
.form-group input {
  background-color: #ddf;
}

/* Sidebar */
#sidebar-wrapper{
  z-index:1000;
  position: absolute;
  width:0;
  height:100%;
  overflow-y:hidden;
  background: white;
  opacity:0.7;
	transition:all .5s;
	align-items:center;
}

/* Change the width of the sidebar to display it*/
#sidebar.menuDisplayed #sidebar-wrapper{
  width:250px;
}

JavaScript

// init leaflet map
var mymap = L.map('mapid', {zoomControl: false, attributionControl: false}).setView([51.505, -0.09], 13);
mymap.setView(new L.LatLng(65, -19), 6);

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

// setup menu and forms
$(document).ready(function(){
  $(".menu-toggle").click(function(e){
    e.preventDefault();
    $("#sidebar").toggleClass("menuDisplayed");
  });
});

function toggleCustomOrigin() {
  if($('#radio-custom-origin').is(':checked')) {
    $("#origin-form-group").show();
  } else {
    $("#origin-form-group").hide();
  }
}

// request current geolocation
var currentLocation = null;
navigator.geolocation.getCurrentPosition( function (position) {
  //global currentLocation;
  currentLocation = position.coords;
  console.log(currentLocation);
  mymap.setView(new L.LatLng(currentLocation.latitude, currentLocation.longitude), 10);
});

// setup menu controls
$(function () {
  $('#datetimepicker1').datetimepicker({
    focusOnShow: false,
    icons: {
      time: 'far fa-clock',
      date: 'far fa-calendar',
      up: 'fas fa-arrow-up',
      down: 'fas fa-arrow-down',
      previous: 'fas fa-chevron-left',
      next: 'fas fa-chevron-right',
      today: 'fas fa-calendar-check',
      clear: 'far fa-trash-alt',
      close: 'far fa-times-circle'
    }});
  $('#start-time-input').val('now');
});

function isEmptyOrSpaces(str){
    return str === null || str.match(/^ *$/) !== null;
}