Zaterna/OpenDiachronicMaps
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor code without change to features

Browse source 
make code generally more readable by placing some things closer together
and better indent code
This commit is contained in:
stev 2023-10-26 20:24:55 +02:00
parent b706df45e3
commit e7e26665d9
1 changed files with 101 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
WMS choose.htm
View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -13,10 +13,10 @@
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<style>
html, body {
html, body {
height: 100%;
margin: 0;
}
}
.leaflet-container {
height: 400px;
width: 600px;
@ -26,58 +26,45 @@
outline:auto;
}
</style>
</head>
</head>
<body>
<body>
<div class="sliderBox">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<span id ="sliderOutput"></span>
<div id="scaleOutput"></div>
</div>
<div id='map'></div>
<div id='map'></div>
<script>
const cities = L.layerGroup();
const mLittleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities);
const mDenver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities);
const mAurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities);
const mGolden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
<script>
const mLittleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.');
const mDenver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.');
const mAurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.');
const mGolden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');
const crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.');
const rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');
const cities = L.layerGroup([
mLittleton,
mDenver,
mAurora,
mGolden
]);
const parks = L.layerGroup([
crownHill,
rubyHill
]);
const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
const osmHOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
});
const osmHOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</a> hosted by <a href="https://openstreetmap.fr/" target="_blank">OpenStreetMap France</a>'
});
const map = L.map('map', {
center: [48.1214044, -1.7109459],
zoom: 17,
layers: [osm, cities]
});
const baseLayers = {
'OpenStreetMap': osm,
'OpenStreetMap.HOT': osmHOT
};
const overlays = {
'Cities': cities
};
const layerControl = L.control.layers(baseLayers, overlays).addTo(map);
const crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.');
const rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');
const parks = L.layerGroup([crownHill, rubyHill]);
const IGNOrtho = L.tileLayer("https://wxs.ign.fr/essentiels/geoportail/wmts?" +
});
const IGNOrtho = L.tileLayer("https://wxs.ign.fr/essentiels/geoportail/wmts?" +
"&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
"&STYLE=normal" +
"&TILEMATRIXSET=PM" +
@ -92,33 +79,47 @@ const IGNOrtho = L.tileLayer("https://wxs.ign.fr/essentiels/geoportail/wmts?" +
opacity : 0.5,
attribution : "IGN-F/Geoportail",
tileSize : 256 // les tuiles du Géooportail font 256x256px
});
layerControl.addOverlay(IGNOrtho, 'IGNORtho');
layerControl.addOverlay(parks, 'Parks');
}
);
const baseLayers = {
'OpenStreetMap': osm,
'OpenStreetMap.HOT': osmHOT
};
var slider = document.getElementById("myRange");
var output = document.getElementById("sliderOutput");
output.innerHTML = slider.value;
const overlays = {
'Cities': cities,
'IGNOrtho': IGNOrtho,
'Parks': parks
};
slider.oninput = function() {
const map = L.map('map', {
center: [48.1214044, -1.7109459],
zoom: 17,
layers: [
osm
]
});
const layerControl = L.control.layers(baseLayers, overlays).addTo(map);
var slider = document.getElementById("myRange");
var output = document.getElementById("sliderOutput");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
IGNOrtho.setOpacity(this.value/100);
}
// gestion de l'échelle
L.control.scale().addTo(map);
}
// gestion de l'échelle
L.control.scale().addTo(map);
//var y = map.getSize().y / 2;
var position = map.getCenter();
var widthInMeter = 6378137 * 2 * Math.PI * Math.cos(map.getCenter().lat * Math.PI / 180);
var scaleOutput = document.getElementById("scaleOutput");
scaleOutput.innerHTML = widthInMeter;
map.on('moveend', function(){
scaleOutput.innerHTML = 6378137 * 2 * Math.PI * Math.cos(map.getCenter().lat * Math.PI / 180);
});
</script>
</body>
//var y = map.getSize().y / 2;
const widthInMeter = 6378137 * 2 * Math.PI * Math.cos(map.getCenter().lat * Math.PI / 180);
var scaleOutput = document.getElementById("scaleOutput");
scaleOutput.innerHTML = widthInMeter;
map.on('moveend', function(){
scaleOutput.innerHTML = widthInMeter;
});
</script>
</body>
</html>