From 238b35288f3b26753b9f5d2c4360f54ad043a675 Mon Sep 17 00:00:00 2001
From: JS <zanettajs@hotmail.fr>
Date: Sat, 28 Oct 2023 17:35:06 +0200
Subject: [PATCH] externalize scaleGesture

---
 WMS-choose.htm  | 33 ++-------------------------------
 scaleGesture.js | 26 ++++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 31 deletions(-)
 create mode 100644 scaleGesture.js

diff --git a/WMS-choose.htm b/WMS-choose.htm
index 3028021..79eb28d 100644
--- a/WMS-choose.htm
+++ b/WMS-choose.htm
@@ -10,7 +10,7 @@
 		<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
 		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
 		<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
-
+		
 		<style>
 		html, body {
 			height: 100%;
@@ -35,26 +35,9 @@
 		</div>
 
 		<div id='map'></div>
+		<script scr="scaleGesture.js"></script>
 
 		<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>'
@@ -87,9 +70,7 @@
 			};
 
 			const overlays = {
-				'Cities': cities,
 				'IGNOrtho': IGNOrtho,
-				'Parks': parks
 			};
 
 			const map = L.map('map', {
@@ -109,16 +90,6 @@
 				output.innerHTML = this.value;
 				IGNOrtho.setOpacity(this.value/100);
 			}
-			// gestion de l'échelle
-			L.control.scale().addTo(map);
-
-			//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>
diff --git a/scaleGesture.js b/scaleGesture.js
new file mode 100644
index 0000000..7eb2356
--- /dev/null
+++ b/scaleGesture.js
@@ -0,0 +1,26 @@
+L.control.scale().addTo(map);
+function pixelsInOneMeterWidth() {
+    var div = document.createElement('div');
+    div.id="mesure";
+    div.style.cssText = 'position: absolute;  left: -100%;  top: -100%;  width: 100cm';
+    document.body.appendChild(div);
+    var px = div.offsetWidth;
+    document.body.removeChild(div);
+    return px;
+}
+
+function scaleManage(){
+    var pos = map.getCenter();
+    var screenWidth = screen.width;
+    var wFrameInPx = document.getElementById("map").clientWidth;
+    var mapSpan = map.containerPointToLatLng([0, 0]).distanceTo(map.containerPointToLatLng([0, wFrameInPx]));
+    var frameInMeter = wFrameInPx/pixelsInOneMeterWidth();
+    return [pos,screenWidth,wFrameInPx,mapSpan, pixelsInOneMeterWidth(), frameInMeter, mapSpan/frameInMeter];
+}
+
+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;
+});
\ No newline at end of file