Leaflet with geoJSON and MarkerCluster Obs Data Navbar

by alfannas

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<script src="https://www.teknologiweb.com/obs_sites.js"></script>
<div id="wrapper">
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        
        <div class="navbar-brand">
          <a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
            <i class="fa fa-bars"></i>
          </a>
          <a href="#">Observatory in the World</a>
        </div>
      </div>
      
    </div>
  </nav>
  <!-- Sidebar -->
  <div id="sidebar-wrapper">
    <nav id="spy">
      <ul class="sidebar-nav nav">
        <li class="sidebar-brand">
          <a href="#home"><span class="fa fa-home solo">Home</span></a>
        </li>
        <li>
          <a href="#anch1">
            <span class="fa fa-anchor solo">Anchor 1</span>
          </a>
        </li>
        <li>
          <a href="#anch2">
            <span class="fa fa-anchor solo">Anchor 2</span>
          </a>
        </li>
        <li>
          <a href="#anch3">
            <span class="fa fa-anchor solo">Anchor 3</span>
          </a>
        </li>
        <li>
          <a href="#anch4">
            <span class="fa fa-anchor solo">Anchor 4</span>
         ...

CSS

#map {
  width: 100%;
  height: 100vh;
  z-index:0;
}
h3 {
  margin: 10px 0 0px 0;
}
/* css to customize Leaflet default styles  */

.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {
  border-radius: 4px;
  min-height: 20px;
}

.leaflet-popup-content {
  margin: 18px;
}

.leaflet-popup-scrolled {
  border: 1px solid #ccc;
  padding: 4px;
}

.leaflet-container a.leaflet-popup-close-button {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 4px;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 20px;
  border: 3px solid #cdcdcd;
}
.panel{min-height:300px;}
#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}

#sidebar-wrapper {
  margin-left: -250px;
  top: 51px;
  left: 250px;
  width: 250px;
  background: grey;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}

#wrapper.active {
  padding-left: 0;
}

#wrapper.active #sidebar-wrapper {
  left: 0;
}

#page-content-wrapper {
  width: 100%;
  padding-top: 50px;
  transition: all 0.4s ease 0s;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav li {
  line-height: 40px;
  text-indent: 20px;
}

.sidebar-nav li a {
  color: #999999;
  display: block;
  text-decoration: none;
  padding-left: 60px;
}

.sidebar-nav li a span:before {
  position: absolute;
  left: 0;
  color: #41484c;
  text-align: center;
  width: 20px;
  line-height: 18px;
}

.sidebar-nav li a:hover,
.sidebar-nav li.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  height: 65px;
  line-height: 60px;
  font-size: 18px;
}

.sidebar-nav > .sidebar-brand a {
  color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

#menu-toggle {
  text-decoration: none;
  float: left;
 ...

JavaScript

/*Menu-toggle*/
    $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#wrapper").toggleClass("active");
      //alert(1);
    });

var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
  '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  'Imagery &copy; <a href="http://mapbox.com">Mapbox</a>',
  mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYWxmYW5uYXMiLCJhIjoiY2o0dXUwNnluMGc4eTJ3b2U5OHV5d3JsOSJ9._dsyy0Y5s4k18yYQc_dQpw';
//pk.eyJ1IjoiYWxmYW5uYXMiLCJhIjoiY2o0dXUwNnluMGc4eTJ3b2U5OHV5d3JsOSJ9._dsyy0Y5s4k18yYQc_dQpw alfannas account
//pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw leafletjs account sample

var grayscale = L.tileLayer(mbUrl, {
    id: 'mapbox.light',
    attribution: mbAttr
  }),
  satellite = L.tileLayer(mbUrl, {
    id: 'mapbox.satellite',
    attribution: mbAttr
  }),
  streets = L.tileLayer(mbUrl, {
    id: 'mapbox.streets',
    attribution: mbAttr
  });

var map = L.map('map', {
  center: [13.7244426, 100.3529114],
  zoom: 1,
  layers: [grayscale],
  zoomControl: true,
  scrollWheelZoom: true,
});
var markers = L.markerClusterGroup({
  animateAddingMarkers: true,
  maxClusterRadius: 30,
  singleMarkerMode: false,
});

var customOptions = {
  'maxWidth': '180',
  'maxHeight': '300',
  'className': 'custom'
};

var baseLayers = {
		"Grayscale": grayscale,
		"Satellite": satellite,
		"Streets": streets
	};

L.control.layers(baseLayers).addTo(map);

var geoJsonObsLayer = L.geoJson(obs, {
  onEachFeature: function(feature, layer) {
    var popUpContent = "";
    popUpContent += "<h3>Name</h3>" + feature.properties.name + "<br/>";
    popUpContent += "<h3>Description</h3>" + feature.properties.description;
    layer.bindPopup(popUpContent, customOptions);
 ...