Leaflet with external geoJSON.AJAX Multilayer

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/leaflet.ajax.min.js?v=1"></script>
<script src="https://www.teknologiweb.com/obs_sites.js"></script>
<script src="https://www.teknologiweb.com/obs_sites.geojson"></script>
<div id="wrapper">

  <!-- Page content -->
  <div id="page-content-wrapper">
    <div class="page-content">
      <div class="container-fluid">
        <div class="row">
          <div id="map">

          </div>

        </div>
      </div>
    </div>
  </div>
</div>

CSS

#map {
  width: 100%;
  height: 100%;
  position:absolute;
  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: 30px;
  height: 30px;
  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%;
  
  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;
 ...

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
      }),
      wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
    layers: 'nasa:bluemarble',
    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 markersObs = L.markerClusterGroup({
      animateAddingMarkers: true,
      maxClusterRadius: 30,
      singleMarkerMode: false,
    });

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

    var baseLayers = {
      "Grayscale": grayscale,
      "Satellite": satellite,
      "Streets": streets,
      "Blue...