Create cmp.html

barionleg · Dec 17, 2024 · 15bdcf6 · 15bdcf6
1 parent a465b6c
commit 15bdcf6
Showing 1 changed file with 78 additions and 0 deletions.
diff --git a/docs/cmp.html b/docs/cmp.html
@@ -0,0 +1,78 @@
+
+<!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" />
+        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+        <link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" />
+
+	<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('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
+			attribution: '&copy; <a href="http://mierune.co.jp/">MEIRUNE</a> contributors, &copy; <a href="http://osm.org/copyright">OSM</a>',
+			maxNativeZoom: 18,
+			maxZoom:24
+		}).addTo(map);
+
+		var point1 = L.latLng(48.94028549073798, 2.174218750000008),
+		    point2 = L.latLng(48.94028549073798, 2.52578125000000761),
+		    point3 = L.latLng(48.75955141507244, 2.174218750000008);
+
+
+		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>