Create cindex.html

barionleg · Dec 8, 2024 · 3f3abc7 · 3f3abc7
1 parent e401dc5
commit 3f3abc7
Showing 1 changed file with 81 additions and 0 deletions.
diff --git a/cindex.html b/cindex.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet dibm pÅÄgæ</title>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="style.css" />
+	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
+  integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
+  crossorigin=""/>
+	<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
+  integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
+  crossorigin=""></script>
+
+	<script src="./Leaflet.ImageOverlay.Rotated.js"></script>
+
+</head>
+<body>
+	<div id="map"></div>
+
+	<script type="text/javascript">
+
+		var map = new L.Map('map');
+
+		var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
+			maxNativeZoom: 18,
+			maxZoom:24
+		}).addTo(map);
+
+		var point1 = L.latLng(48.879393, 2.167783),
+		    point2 = L.latLng(48.940881, 2.405920),
+		    point3 = L.latLng(48.750077, 2.220955);
+
+
+		var	bounds = new L.LatLngBounds(point1, point2).extend(point3);
+
+		map.fitBounds(bounds);
+
+		var overlay = L.imageOverlay.rotated("./dibm.png", point1, point2, point3, {
+			opacity: 0.4,
+			interactive: true,
+			attribution: "нიsтОЯRµ©Å₾ d'building plan &copy; <a href='https://ecohomica.rf.gd'>finstituto Geogdráficor н²ОтыonнaluRი de EиspañA</a>"
+		});
+
+
+// 		var c = overlay.getCanvas2DContext()
+
+		map.addLayer(overlay);
+
+		overlay.on('dblclick',function (e) {
+			console.log('Double click on image.');
+			e.stop();
+		});
+
+		overlay.on('click',function (e) {
+			console.log('Click on image.');
+		});
+
+		function setOverlayOpacity(opacity) {
+			overlay.setOpacity(opacity);
+		}
+
+	</script>
+
+	<div>
+	Overlay opacity:
+	<button onclick='setOverlayOpacity(0.1)'>10%</button>
+	<button onclick='setOverlayOpacity(0.2)'>20%</button>
+	<button onclick='setOverlayOpacity(0.3)'>30%</button>
+	<button onclick='setOverlayOpacity(0.4)'>40%</button>
+	<button onclick='setOverlayOpacity(0.5)'>50%</button>
+	<button onclick='setOverlayOpacity(0.6)'>60%</button>
+	<button onclick='setOverlayOpacity(0.7)'>70%</button>
+	<button onclick='setOverlayOpacity(0.8)'>80%</button>
+	<button onclick='setOverlayOpacity(0.9)'>90%</button>
+	</div>
+
+
+</body>
+</html>