diff --git a/WMS-choose.htm b/WMS-choose.htm deleted file mode 100644 index 79eb28d..0000000 --- a/WMS-choose.htm +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - Layers Control Tutorial - Leaflet - - - - - - - - - -
- - -
-
- -
- - - - - diff --git a/index.html b/index.html new file mode 100644 index 0000000..5b61457 --- /dev/null +++ b/index.html @@ -0,0 +1,49 @@ + + + + + + + + Layers Control Tutorial - Leaflet + + + + + + + + + +
+ + +
+
+ +
+ + + + + + diff --git a/layerControl.js b/layerControl.js new file mode 100644 index 0000000..9055be9 --- /dev/null +++ b/layerControl.js @@ -0,0 +1,18 @@ +const baseLayers = { + 'OpenStreetMap': osm, + 'OpenStreetMap.HOT': osmHOT +}; + +const overlays = { + 'IGNOrtho': IGNOrtho, +}; +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); +} \ No newline at end of file diff --git a/layers.js b/layers.js new file mode 100644 index 0000000..707b7d5 --- /dev/null +++ b/layers.js @@ -0,0 +1,25 @@ +const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: '© OpenStreetMap' +}); +const osmHOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France' +}); +const IGNOrtho = L.tileLayer("https://wxs.ign.fr/essentiels/geoportail/wmts?" + + "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" + + "&STYLE=normal" + + "&TILEMATRIXSET=PM" + + "&FORMAT=image/jpeg"+ + "&LAYER=ORTHOIMAGERY.ORTHOPHOTOS"+ + "&TILEMATRIX={z}" + + "&TILEROW={y}" + + "&TILECOL={x}", + { + minZoom : 0, + maxZoom : 24, + opacity : 0.5, + attribution : "IGN-F/Geoportail", + tileSize : 256 // les tuiles du GĂ©ooportail font 256x256px + } +); \ No newline at end of file diff --git a/scaleGesture.js b/scaleGesture.js index 7eb2356..efc64b6 100644 --- a/scaleGesture.js +++ b/scaleGesture.js @@ -23,4 +23,6 @@ var scaleOutput = document.getElementById("scaleOutput"); scaleOutput.innerHTML = widthInMeter; map.on('moveend', function(){ scaleOutput.innerHTML = widthInMeter; -}); \ No newline at end of file + console.log(widthInMeter); + console.log(scaleManage()); +});