<!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>