Map Leaflet with List Reference

by pertrai1

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet-src.js"></script>
<script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css">
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css">
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div>Total Data = <b><span style="font-size:larger;" id="totalData">0</span></b></div>
      <div></div>
      <div id="list"></div>
    </div>
    <div class="col-md-8">
      <div id="map" style="max-width:640px; max-height:480px;"></div>
    </div>
  </div>
</div>

CSS

#map {
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
}

#progress {
  display: none;
  position: absolute;
  z-index: 1000;
  left: 400px;
  top: 300px;
  width: 200px;
  height: 20px;
  margin-top: -20px;
  margin-left: -100px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  padding: 2px;
}

#progress-bar {
  width: 0;
  height: 100%;
  background-color: #76A6FC;
  border-radius: 4px;
}

.prop-div-icon {
  border-radius: 5px;
  background-color: #3a87ad;
  min-width: 50px;
  min-height: 20px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.prop-div-icon-shadow {
  top: -3px;
  left: -3px;
  border-radius: 5px;
  background-color: #5bc0de;
  border-color: #3a87ad;
  border: 1px solid;
  min-width: 50px;
  min-height: 20px;
  font-weight: bold;
  color: white;
  text-align: center;
  box-shadow: 3px 3px 3px 0px rgba(125, 125, 125, 0.8);
}

.prop-li-item {
  cursor: pointer;
}

JavaScript

var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 13
});
var latlng = L.latLng(-16.2000651, 116.7991297);
var map = L.map('map', {
  center: latlng,
  layers: [tiles]
});
var markers = L.markerClusterGroup();
var markersRef = {};

var theDatax = [{
  "LocId": 2,
  "Description": "P",
  "Name": "Palmerah",
  "Longitude": "106.789816",
  "Latitude": "-6.201802"
}, {
  "LocId": 3,
  "Description": "TB",
  "Name": "Tomang Barat",
  "Longitude": "106.793547",
  "Latitude": "-6.161361"
}, {
  "LocId": 4,
  "Description": "GI",
  "Name": "Grand Indonesia",
  "Longitude": "106.821949",
  "Latitude": "-6.193060"
}, {
  "LocId": 6,
  "Description": "MTA",
  "Name": "Mall Taman Anggrek",
  "Longitude": "106.792098",
  "Latitude": "-6.178768"
}, {
  "LocId": 16,
  "Description": "GST",
  "Name": "Grand Slipi Tower",
  "Longitude": "106.798522",
  "Latitude": "-6.200823"
}, {
  "LocId": 17,
  "Description": "T2 WA",
  "Name": "Tenant 2 Wisma Asia",
  "Longitude": "106.799212",
  "Latitude": "-6.185266"
}, {
  "LocId": 18,
  "Description": "T3 WA",
  "Name": "Tenant 3 Wisma Asia",
  "Longitude": "106.799212",
  "Latitude": "-6.185266"
}, {
  "LocId": 19,
  "Description": "T4 WA",
  "Name": "Tenant 4 Wisma Asia",
  "Longitude": "106.799212",
  "Latitude": "-6.185266"
}, {
  "LocId": 20,
  "Description": "T5 WA",
  "Name": "Tenant 5 Wisma Asia",
  "Longitude": "106.793098",
  "Latitude": "-6.181768"
}]

mapReload();

function mapReload() {
  // **Clear List**
  var ul = document.getElementById("list");
  ul.innerHTML = '';
  updateMapMarkerResult(theDatax);
  map.fitBounds(markers.getBounds());
}

function updateMapMarkerResult(data) {
  markers.clearLayers();
  for (var i = 0; i < data.length; i++) {
    var a = data[i];
    var myIcon = L.divIcon({
      className: 'prop-div-icon',
      html: a.Description
    });
    var marker = L.marker(new L.LatLng(a.Latitude, a.Longitude), {
      icon: myIcon
    }, {
      title: a.Name
    });
...