JSFiddle - React, Tailwind, and code Playground

by Petar Pilipovic

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.0/ol.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.0/ol.min.js"></script>
 <ul class="navigation">
	<li class="nav-item"><a href="#">Home</a></li>
	<li class="nav-item"><a href="#">Portfolio</a></li>
	<li class="nav-item"><a href="#">About</a></li>
	<li class="nav-item"><a href="#">Blog</a></li>
	<li class="nav-item"><a href="#">Contact</a></li>
</ul>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>

<div class="site-wrap">
    <div id="map" class="map">
        
    </div>	
</div>

CSS

/* Navigation Menu - Background */
.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  
  /* non-critical appearance styles */
  list-style: none;
  background: #111;
}

/* Navigation Menu - List items */
.nav-item {
  /* non-critical appearance styles */
  width: 200px;
  border-top: 1px solid #111;
  border-bottom: 1px solid #000;
}

.nav-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 1em;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  color: white;
  font-size: 1.2em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}

.nav-item a:hover {
  color: #c74438;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
}

/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  background-color: white; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  
  /* non-critical apperance styles */
  padding: 4em;
  background-image: linear-gradient(135deg, rgb(254,255,255) 0%,rgb(221,241,249) 35%,rgb(160,216,239) 100%);
  background-size: 200%;
}

/* map css */
#map {
    width: 100%;
    height: 100%;
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 15px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30...

JavaScript

/* Create the map */
// setting up coordinates for map to display
var city = ol.proj.transform([-73.920935,40.780229], 'EPSG:4326', 'EPSG:3857');


// setting up openlayer3 view
var view = new ol.View({
    center: city,
    zoom: 13
});


// Create the map
var map = new ol.Map({
  target: 'map',
  renderer: 'canvas',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({
        crossOrigin: 'anonymous'
      })
    })
  ],
  view: view
});


// Setup markers
var markers = new ol.layer.Vector({
  tittle: 'City Apratments',
  source: new ol.source.Vector({
    features: [
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.927870, 40.763633])),
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.917356, 40.763958])),
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.915530, 40.779665])),
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.916045, 40.779372])),
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.919682, 40.777365])),
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.908980, 40.776013])),
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.917356, 40.763958])),
      })
    ]
  }),
  style: new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixel',
      opacity: 0.75,
      src: 'http://openlayers.org/en/v3.12.1/examples/data/icon.png',
    })
  })
});
map.addLayer(markers);