Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
139 lines (115 sloc) 3.14 KB
<!DOCTYPE html>
<html>
<head>
<title>Mountain Forest - LeafLet Preview</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#basemapslidercontainer {
position: absolute;
top: 50px;
right: 10px;
z-index: 1000;
}
#basemapslider{
font-size:62.5%;
margin: 14px;
height: 125px;
width:7px;
}
#map{
width: 800px;
height: 600px
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
$("#basemapslider").slider({
animate: true,
value: 1,
orientation: "vertical",
min: 0,
max: 1,
step: 0.1,
slide: function (event, ui) {
mytile.setOpacity(ui.value);
}
});
$('#basemapslider').mousedown(function(){
map.dragging.disable();
})
$('#basemapslider').mouseup(function(){
map.dragging.enable();
})
var map = L.map('map').setView([45, 10], 6);
var baselayer = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
maxZoom: 8,
minZoom: 5,
subdomains:['mt0']}).addTo(map);
var mytile =L.tileLayer('https://github.com/khufkens/mountain_forest_map/raw/master/tiles/{z}/{x}/{y}.png', {
maxZoom: 8,
minZoom: 5,
tms: false
}).addTo(map);
L.control.layers({'Basemap':baselayer},{'mf':mytile}).addTo(map);
function getColor(d) {
return d == 5 ? '#5E3C99' :
d == 4 ? '#B2ABD2' :
d == 3 ? '#F7F7F7' :
d == 2 ? '#FDB863' :
d == 1 ? '#E66101' :
'#E66101' ;
}
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [1, 2, 3, 4, 5],
labels = ['ENF','DNF','EBF','DBF','MIX'];
// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
'<i style="background:' + getColor(grades[i]) + '"></i> ' +
labels[i] + '<br>';
}
return div;
};
legend.addTo(map);
})
</script>
</head>
<body>
<div id="map">
<div id="basemapslidercontainer">
<div id="basemapslider">
</div>
</div>
</div>
</body>
</html>