externalize scaleGesture
This commit is contained in:
		
							parent
							
								
									0317b20f3a
								
							
						
					
					
						commit
						238b35288f
					
				
					 2 changed files with 28 additions and 31 deletions
				
			
		|  | @ -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: '© <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> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue