Leaflet Marker - Bootstrap Modal interaction

by askebos

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
  <div id="map"></div>

  <!-- Modal EMPTY-->
  <div aria-labelledby="myModalLabel" class="modal left fade" id="emptymodal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content"></div>
      <!-- modal-content -->
    </div>
    <!-- modal-dialog -->
  </div>
  <!-- modal -->
</body>

CSS

html,
body,
#container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.navbar {
  top: 0;
  position: absolute;
}

body {
  padding-top: 50px;
}

#map {
  width: auto;
  height: 100%;
}


/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/

.modal.left .modal-dialog,
.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 30%;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
  height: 100%;
  overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
  padding: 15px 15px 80px;
}


/*Left*/

.modal.left.fade .modal-dialog {
  left: -320px;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog {
  left: 0;
}


/*Right*/

.modal.right.fade .modal-dialog {
  right: -320px;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
  right: 0;
}


/* ----- MODAL STYLE ----- */

.modal-content {
  border-radius: 0;
  border: none;
}

.modal-header {
  border-bottom-color: #EEEEEE;
  background-color: #FAFAFA;
}

.modal-backdrop {
  background-color: transparent;
  display: none;
}

.modal {
  pointer-events: none;
  z-index: 10000000000000;
}

.modal-content {
  pointer-events: auto;
}

JavaScript

/*Custom marker */
PlaceMarker = L.CircleMarker.extend({
  options: {
    id: ''
  }
});
/*Include the marker data and create the layers */
var data = [
  ["layer1", "1", 51.7577, -1.26012],
  ["layer1", "2", 51.7498, -1.24043],
  ["layer2", "3", 51.7603, -1.26918],
  ["layer3", "4", 51.7538, -1.25609],
  ["layer3", "5", 51.752, -1.2577]
];
var layer1 = new L.LayerGroup();
for (var i = 0; i < data.length; i++) {
  if (data[i][0] == "layer1") {
    marker = new PlaceMarker([data[i][2], data[i][3]], {
      color: "#808000",
      id: data[i][1]
    }).addTo(layer1).on('click', markerOnClick);
  }
}
var layer2 = new L.LayerGroup();
for (var i = 0; i < data.length; i++) {
  if (data[i][0] == "layer2") {
    marker = new PlaceMarker([data[i][2], data[i][3]], {
      color: "#00FFFF",
      id: data[i][1]
    }).addTo(layer2).on('click', markerOnClick);
  }
}
var layer3 = new L.LayerGroup();
for (var i = 0; i < data.length; i++) {
  if (data[i][0] == "layer3") {
    marker = new PlaceMarker([data[i][2], data[i][3]], {
      color: "#008000",
      id: data[i][1]
    }).addTo(layer3).on('click', markerOnClick);
  }
}
/* Some handy variables*/
var booklayers = [layer1, layer2, layer3]
  /*Initialise map; change zoom control position*/
var map = L.map('map', {
  layers: booklayers
}).setView([51.7520, -1.2577], 13);
map.zoomControl.setPosition('bottomright');
/*Add tileLayers*/
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap<\/a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; ' + mapLink + ' Contributors',
  maxZoom: 18,
}).addTo(map);
/* Open modal & center map on marker click 	*/
function markerOnClick(e) {
  var id = this.options.id;
  $(".modal-content").html('This is marker ' + id);
  $('#emptymodal').modal('show');
  map.setView(e.target.getLatLng());
  e.preventDefault();
}
/*Close modal on map click */
map.on('click', function(e) {
  $('.modal').modal('hide');
});