245 lines
7.9 KiB
HTML
245 lines
7.9 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<meta name="description" content="">
|
||
|
|
<meta name="author" content="AcuGIS">
|
||
|
|
<meta name="generator" content="">
|
||
|
|
<title>AcuGIS Leaflet Choropleth Demo</title>
|
||
|
|
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css">
|
||
|
|
<style type="text/css">
|
||
|
|
.legend {
|
||
|
|
color: #555;
|
||
|
|
padding: 6px 8px;
|
||
|
|
font: 12px Arial, Helvetica, sans-serif;
|
||
|
|
font-weight: bold;
|
||
|
|
background: white;
|
||
|
|
background: rgba(255,255,255,0.8);
|
||
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.2);
|
||
|
|
border-radius: 5px;
|
||
|
|
max-width: 500px;
|
||
|
|
}
|
||
|
|
.legend .labels {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.legend ul {
|
||
|
|
list-style-type: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
clear: both;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.legend li {
|
||
|
|
display: inline-block;
|
||
|
|
width: 800px;
|
||
|
|
height: 7px;
|
||
|
|
}
|
||
|
|
.legend .quarter1 {
|
||
|
|
/*float: left;*/
|
||
|
|
padding-bottom: 5px;
|
||
|
|
}
|
||
|
|
.legend .quarter2 {
|
||
|
|
/*float: left;*/
|
||
|
|
padding-bottom: 5px;
|
||
|
|
}
|
||
|
|
.legend .quarter3 {
|
||
|
|
/*float: left;*/
|
||
|
|
padding-bottom: 5px;
|
||
|
|
}
|
||
|
|
.legend .quarter4 {
|
||
|
|
/*float: right;*/
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.js"></script>
|
||
|
|
<script src="leaflet.browser.print.min.js"></script>
|
||
|
|
<script src="choropleth.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
html, body, #map {
|
||
|
|
margin: 0px;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar {
|
||
|
|
max-width: 300px;
|
||
|
|
background: white;
|
||
|
|
max-height: 400px;
|
||
|
|
overflow-x: hidden;
|
||
|
|
overflow-y: auto;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.sidebar .close {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<header>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</header>
|
||
|
|
<div id="map" style="height: 100%; width: 100%;"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function humanize(str) {
|
||
|
|
var i, frags = str.split('_');
|
||
|
|
for (i=0; i<frags.length; i++) {
|
||
|
|
frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1);
|
||
|
|
}
|
||
|
|
return frags.join(' ');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
|
||
|
|
$(document).ready(function() {
|
||
|
|
var map = L.map('map').setView([51.8196, 10.6298], 3);
|
||
|
|
|
||
|
|
L.control.browserPrint({
|
||
|
|
closePopupsOnPrint: false,
|
||
|
|
manualMode: false
|
||
|
|
}).addTo(map);
|
||
|
|
|
||
|
|
|
||
|
|
var customControl = L.Control.extend({
|
||
|
|
options: {
|
||
|
|
position: 'topleft' // set the position of the control
|
||
|
|
},
|
||
|
|
|
||
|
|
onAdd: function (map) {
|
||
|
|
// Create a container div for the control
|
||
|
|
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
|
||
|
|
|
||
|
|
// Add content to the container
|
||
|
|
container.innerHTML = `
|
||
|
|
<div class="sidebar">
|
||
|
|
<a href="#" class="btn btn-sm mt-1 mx-3 close" id="fg-close-it" onclick="$(this).closest('.sidebar').hide()">X</a>
|
||
|
|
<div class="table-container px-3 py-4"></div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
// Add an event listener to the container
|
||
|
|
/*container.querySelector('#fg-close-it').addEventListener('click', function () {
|
||
|
|
|
||
|
|
});*/
|
||
|
|
// Return the container
|
||
|
|
return container;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
map.addControl(new customControl());
|
||
|
|
// Add basemap
|
||
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
|
|
maxZoom: 15,
|
||
|
|
attribution: ''
|
||
|
|
}).addTo(map);
|
||
|
|
|
||
|
|
|
||
|
|
var full_url = "https://MYLOCALHOST:9001/collections/public.countries/items.json?limit=100&continent=Europe";
|
||
|
|
|
||
|
|
// Add GeoJSON
|
||
|
|
$.getJSON(full_url, function (geojson) {
|
||
|
|
var choroplethLayer = L.choropleth(geojson, {
|
||
|
|
valueProperty: 'gdp_md',
|
||
|
|
scale: ['#fbfad4', 'green'],
|
||
|
|
steps: 5,
|
||
|
|
mode: 'q',
|
||
|
|
style: {
|
||
|
|
color: '#fff',
|
||
|
|
weight: 2,
|
||
|
|
fillOpacity: 0.8
|
||
|
|
},
|
||
|
|
onEachFeature: function (feature, layer) {
|
||
|
|
|
||
|
|
layer.on('click', function(event) {
|
||
|
|
var properties = feature.properties;
|
||
|
|
|
||
|
|
var html = '<table style="text-align: left; font-size: 100%;">';
|
||
|
|
for (const key in properties) {
|
||
|
|
html += '<tr><th>'+ key +"</th> <td>"+ properties[key] + "</td></tr>";
|
||
|
|
}
|
||
|
|
html += '</table>';
|
||
|
|
|
||
|
|
$('.sidebar').show();
|
||
|
|
$('.sidebar .table-container').html(html);
|
||
|
|
});
|
||
|
|
|
||
|
|
//layer.bindPopup(html)
|
||
|
|
}
|
||
|
|
}).addTo(map)
|
||
|
|
|
||
|
|
// Add legend (don't forget to add the CSS from index.html)
|
||
|
|
var legend = L.control({ position: 'topright' })
|
||
|
|
legend.onAdd = function (map) {
|
||
|
|
var div = L.DomUtil.create('div', 'info legend')
|
||
|
|
var limits = choroplethLayer.options.limits
|
||
|
|
var colors = choroplethLayer.options.colors
|
||
|
|
var labels = []
|
||
|
|
|
||
|
|
// Add min & max
|
||
|
|
div.innerHTML = `
|
||
|
|
<div class="labels">
|
||
|
|
<div class="quarter1">` + limits[0] + `</div>
|
||
|
|
<div class="quarter2">` + Math.round(((limits[limits.length - 1]-limits[0])*.25)+limits[0]) + `</div>
|
||
|
|
<div class="quarter3">` + Math.round(((limits[limits.length - 1]-limits[0])*.75)+limits[0]) + `</div>
|
||
|
|
<div class="quarter4">` + limits[limits.length - 1] + `</div>
|
||
|
|
</div>`
|
||
|
|
|
||
|
|
limits.forEach(function (limit, index) {
|
||
|
|
labels.push('<li style="background-color: ' + colors[index] + '"></li>')
|
||
|
|
})
|
||
|
|
|
||
|
|
div.innerHTML += '<ul>' + labels.join('') + '</ul> <span>'+humanize('Median GDP')+'</span>'
|
||
|
|
|
||
|
|
return div
|
||
|
|
}
|
||
|
|
legend.addTo(map);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/*map.on('load', function() {
|
||
|
|
alert('loaded');
|
||
|
|
var html = `
|
||
|
|
<div class="sidebar">
|
||
|
|
<a href="#" class="btn btn-sm pull-right mt-3 mx-3 close" onclick="$('.sidebar').removeClass('slide-in')">X</a>
|
||
|
|
<div class="clearfix"></div>
|
||
|
|
<div class="table-container px-3 py-3"></div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
$('.leaflet-control-container .leaflet-top.leaflet-left').append(html);
|
||
|
|
});*/
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<footer class="text-muted py-5">
|
||
|
|
<div class="container">
|
||
|
|
<p class="float-end mb-1">
|
||
|
|
<a href="#">Back to top</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p class="mb-0"> <a href="sign-in/">Login</a> </p>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|