JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebar">

  <div class="filtter form-horizontal">

    <div class="form-group">
      <label class="col-sm-2 control-label">Country</label>
      <div class="col-sm-10">
        <select class="form-control">
          <option>USA</option>
        </select>
      </div>
    </div>

  </div>


  <div class="list">

    <div class="item" *ngFor="let item of items | async">
      <h3 (click)="userDetails(item.uid, item.lat, item.lng, item.status, item.notes)">{{item.lat}} | {{item.lng}}</h3>
      <span>{{item.status}}</span>
    </div>

  </div>

  <div class="user-data" *ngIf="showUserData">
    <div class="close" (click)="closeUserData()">Close</div>
    <div *ngFor="let item of userData | async">
      <p>First Name: {{item.fname}}</p>
      <p>Last Name: {{item.lname}}</p>
      <p>Age: {{item.age}}</p>
      <p>Health: {{item.helth}}</p>
      <p>Phone {{item.phone}}</p>
      <p>Status: {{userMarkData.status}}</p>
      <p>Note: {{userMarkData.note}}</p>
    </div>
  </div>

</div>

<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map: -->

<ngui-map (mapClick)="onMapClick($event)" center="new york, usa" >

  <kml-layer url="{{KMLurl}}" [suppressInfoWindows]="false" [screenOverlays]="true"></kml-layer>

  <directions-renderer
    [suppressMarkers]="true"
    [draggable]="true"
    (directions_changed)="directionsChanged()"
    [directions-request]="directions">
  </directions-renderer>

  <traffic-layer *ngIf="showTraffic"></traffic-layer>

  <marker *ngFor="let item of items | async" [position]="{lat: item.lat, lng: item.lng}"></marker>

</ngui-map>


<div class="map-type">
  <button (click)="changeMapTypeToMODIS()" type="button" class="btn btn-default" value="MODIS">MODIS</button>
  <button (click)="changeMapTypeToVIIRS()" type="button" class="btn btn-default" value="VIIRS">VIIRS</button>
</div>

<div class="options">

  <ul>
    <li (click)="showBox('weather')"><a...

CSS

ngui-map {
  position: absolute;
  left: 25%;
  top: 0;
  right: 0;
  bottom: 0;
  width: 75%;
  height: 100%;
  z-index: 9;
}


.sidebar{
  position: fixed;
  padding: 15px;
  width: 25%;
  height: 100%;
  left: 0;
  top: 0;
  background: #263238;
  color: #ffffff;
  overflow: scroll;
}

.filtter{
  margin: 10px 0;
}

.filtter label{
  color: #ffffff;
}

.filtter select{
  border-radius: 0;
  box-shadow: 0 0 0 #263238;
  background-color: #263238;
  border: 0px;
  border-bottom: 2px #ffc107 solid;
  color: #ffffff;
}

.map-type {
  position: fixed;
  top: 1%;
  right: 1%;
  z-index: 999;
}

.map-type button {
  background: #78909c;
  border-radius: 0px;
  border-width: 0px;
  color: #ffffff;
  font-weight: 600;
}

.map-type button.active {
  background: #37474f;
}


.options {
  position: fixed;
  width: 75%;
  right: 0;
  bottom: 0;
  z-index: 99;
  color: #ffffff;
}

.options ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.options ul li{
  display: inline-block;
  padding: 0;
  margin: 0;
}

.options ul li a{
  display: block;
  padding: 10px 15px;
  margin: 0 10px 0;
  background: rgba(55, 71, 79, 0.8);
  color: #ffffff;
}

.options .weather,
.options .directions,
.options .evacuate{
  display: block;
  background: rgba(55, 71, 79, 0.8);
  padding: 15px;
  overflow: hidden;
}

.weather.content .main-data{
  float: left;
  text-align: left;
  margin-right: 3%;
  width: 30%;
}

.weather.content .main-data .weather-status span,
.weather.content .main-data .weather-status i{
  display: block;
}

.weather.content .main-data .weather-status span{
  font-size: 1.6em;
}

.weather.content .main-data .weather-temp span{
  display: block;
  font-size: 1.6em;
}

.weather.content .main-data .weather-temp i{
  font-size: 0.4em;
  vertical-align: top;
}

.weather.content .main-data .weather-temp span.min,
.weather.content .main-data .weather-temp span.max{
  display: inline-block;
  font-size: 1em;
}

.weather.content ul{
  float: left;
  width: 30%;
  margin-right:...

JavaScript

import { Component, Input } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import { NguiMapModule, NguiMap, DirectionsRenderer} from '@ngui/map';

//Weather
import { WeahterService } from './weahter.service';

//Google Places
import { GooglePlacesService } from './google-places.service';
import {promise} from "selenium-webdriver";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  // Map Atributes
  VIIRSUrl: any = "https://www.google.com/maps/d/kml?mid=1qewtj6IBhyDM5VUJv5Ou4BmeUCc&nl=1&lid=DU9kzrQurs4&cid=mp&cv=3lPnMNwizdY.en_GB.";
  MODISUrl: any = "https://www.google.com/maps/d/kml?authuser=0&mid=1YTv5sXQ0Dec__t7KEgeKDw3saG4&nl=1&cid=mp&cv=3lPnMNwizdY.en_GB.";
  MapTypeActive: any = this.MODISUrl;

  KMLurl: any = this.MapTypeActive;

  // Info Boxes Show
  weatherBox: boolean = false;
  directionsBox: boolean = false;
  evacuationBox: boolean = false;

  // Weather Atributs
  weatherDataMain: any;
  weatherDataDescription: any;

  weatherMainTemp: any;
  weatherMainPressure: any;
  weatherMainHumidity: any;
  weatherMainTemp_min: any;
  weatherMainTemp_max: any;

  weatherWindSpeed: any;
  weatherWindDeg: any;

  weatherClouds: any;

  rain: any;

  snow: any;

  dt: any;

  // Directions
  directions: any = {
    origin: '260 Broadway New York NY 10007',
    destination: 'grand central station, new york, ny',
    travelMode: 'DRIVING',
  };
  roadType: any = "DRIVING";
  curaentLocation: any;
  radius: any = 10000;
  nearbyResults:any = '';
  keys: String[];
  showResult: boolean = false;

  // Trafice
  showTraffic: boolean = false;

  items: FirebaseListObservable<any[]>;

  constructor(public af: AngularFire, public weatherData: WeahterService, public googlePlaces: GooglePlacesService) {
    this.items = af.database.list('/marks');
  }

  //ShowBoxes
  showBox(type){
    if(type == 'weather'){
     ...