Skip to content

Instantly share code, notes, and snippets.

@iamtekson

iamtekson/zoomToLayerInLeaflet.html

Forked from SandhyaDhkl/zoomToLayerInLeaflet.html
Created January 14, 2020 10:42
Show Gist options
  • Save iamtekson/aea0129b5818b8fff59fbab6a7245a98 to your computer and use it in GitHub Desktop.
Save iamtekson/aea0129b5818b8fff59fbab6a7245a98 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
zoomToLayerInLeaflet.html
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>List of all Buildings</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<style>
h1{
font-size: 30px;
color: #fff;
text-transform: uppercase;
font-weight: 300;
text-align: center;
margin: 10px 0px 10px 0px;
}
table{
width:100%;
table-layout: fixed;
margin-left: 10px;
margin-right: 10px;
}
th{
padding: 20px 15px;
text-align: center;
font-weight: 500;
font-size: 20px;
color: #000000;
text-transform: uppercase;
border-left: solid 5px rgba(47, 66, 173, 0.1);
border-right: solid 5px rgba(47, 66, 173, 0.1);
}
td{
padding: 16px;
text-align: center;
vertical-align:middle;
font-weight: 300;
font-size: 17px;
color: #fff;
border-bottom: solid 5px rgba(24, 211, 49, 0.1);
border-left: solid 5px rgba(47, 66, 173, 0.1);
border-right: solid 5px rgba(47, 66, 173, 0.1);
}
tr{
cursor: pointer;
}
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
background: -webkit-linear-gradient(left, #25c481, #25b7c4);
background: linear-gradient(to right, #25c481, #25b7c4);
font-family: 'Times New Roman', sans-serif;
}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(64, 146, 115, 0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
#map{width: 100%; height: 800px; }
</style>
<body>
<div id="map" style="display: none"></div>
<div class= "container-fluid">
<div class="table-responsive">
<h1>Buildings are listed below!</h1>
</br>
<table class="table table-striped table-hover" id="building_table">
<tr>
<th> Id</th>
<th>Name</th>
<th>Category</th>
</tr>
</table>
</div>
</div>
</html>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script>
var hclass ='';
$.ajax({
url: 'building_data',
dataType: 'json',
type: 'get',
success: function (data){
var par = '';
$(data.features).each(function(index, value){
var name = value.properties.name
hclass = (name.split(' ', 1))
par += '<tr>';
par += '<td >' +value.properties.pk+ '</td>';
par += '<td class="'+hclass+'" >' +value.properties.name+ '</td>';
par += '<td>' +value.properties.category+ '</td>';
par += '</tr>';
});
$('#building_table').append(par);
},
})
var map = L.map('map').setView([14.0785, 100.6140], 17);
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// building_layer = $.getJSON("{% url 'building_json' %}", function(data) {
// var data = L.geoJSON(data).addTo(map);
// }
// )
// $('#building_table').on('click', function(){
// console.log(this)
// $('#map').css('display', 'block');
// $(this).hide();
// })
$('#building_table').on('click', 'td', function(){
var id = ($(this).text());
$.getJSON("{% url 'building_json' %}", function(data) {
selectedArea = L.geoJSON(data,{
filter: function(feature, layer){
if(feature.properties.pk==id){
return true;
}
}
}).addTo(map)
x1 = selectedArea.getBounds()._southWest.lng
x2 = selectedArea.getBounds()._northEast.lng
y1 = selectedArea.getBounds()._southWest.lat
y2 = selectedArea.getBounds()._northEast.lat
x = (x1+x2)/2
y = (y1+y2)/2
map.setView([y,x], 19)
console.log(selectedArea.getBounds()._southWest.lng, selectedArea.getBounds()._northEast.lng, selectedArea.getBounds()._southWest.lat, selectedArea.getBounds()._northEast.lat)
console.log(selectedArea.getBounds())
})
$('#map').css('display', 'block');
$("#building_table").hide();
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment