create examples folder

Raruto · Feb 12, 2021 · a047c2e · a047c2e
1 parent 63e221b
commit a047c2e
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 120 deletions.
diff --git a/README.md b/README.md
@@ -2,10 +2,10 @@
 
 A Leaflet plugin that allows to add rotation functionality to map tiles
 
-_For a working example see the following [demo](https://raruto.github.io/leaflet-rotate/index.html)_
+_For a working example see the following [demo](https://raruto.github.io/leaflet-rotate/examples/leaflet-rotate.html)_
 
 <p align="center">
-    <a href="https://raruto.github.io/leaflet-rotate/index.html"><img src="https://raruto.github.io/img/leaflet-rotate.png" alt="Leaflet rotate viewer" /></a>
+    <a href="https://raruto.github.io/leaflet-rotate/examples/leaflet-rotate.html"><img src="https://raruto.github.io/img/leaflet-rotate.png" alt="Leaflet rotate viewer" /></a>
 </p>
 
 ---

diff --git a/index.html → examples/leaflet-rotate.html b/index.html → examples/leaflet-rotate.html
@@ -1,118 +1,118 @@
-<!DOCTYPE html>
-<html>
-
-	<head>
-		<title>leaflet-rotate.js</title>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-		<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
-		<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
-
-		<script src="leaflet-rotate.js"></script>
-
-		<script src="misc/route.js"></script>
-		<script src="misc/places.js"></script>
-		<script src="misc/loremIpsum.js"></script>
-		<script src="lib/debug.js"></script>
-
-		<style>
-			#map {
-				width: 100%;
-				height: 600px;
-				border: 1px solid #ccc;
-				max-height: 50vh;
-			}
-		</style>
-	</head>
-
-	<body>
-
-		<div id="map"></div>
-
-		<hr>
-
-		<div>
-			<p>
-				<strong>Fly to bounds: </strong>
-				<button onclick="map.flyToBounds(circle.getBounds());">CIRCLE</button>
-				<button onclick="map.flyToBounds(polygon.getBounds());"> POLYGON</button>
-				<button onclick="map.flyToBounds(path.getBounds());">PATH</button>
-			</p>
-			<p>
-				<strong>Fly to: </strong>
-				<button onclick="map.flyTo(places['Kyiv'], 10);">Kyiv</button>
-				<button onclick="map.flyTo(places['London'], 10);">London</button>
-				<button onclick="map.flyTo(places['San Francisco'], 10);">San Francisco</button>
-				<button onclick="map.flyTo(places['Washington'], 10);">Washington</button>
-				<button onclick="map.flyTo(places['Trondheim'], 10);">Trondheim</button>
-			</p>
-		</div>
-
-		<script>
-			var esri = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
-				id: 'mapbox.streets',
-				maxZoom: 24,
-				maxNativeZoom: 18,
-				attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
-			});
-
-			var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-				maxZoom: 24,
-				maxNativeZoom: 19,
-				attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-			});
-
-			var map = L.map('map', {
-				center: [55, 10],
-				zoom: 2,
-				layers: [esri],
-				// worldCopyJump: true,
-				rotate: true,
-				touchRotate: true,
-				rotateControl: {
-					closeOnZeroBearing: false
-				},
-			});
-
-			// map.touchRotate.enable();
-
-			var layers = L.control.layers({
-				'Empty': L.tileLayer(''),
-				'Streets': osm,
-				'Satellite': esri,
-			}, null, {
-				collapsed: false
-			}).addTo(map);
-
-			var markers = [];
-			for (var i in places) {
-				markers.push(L.marker(places[i], {
-						draggable: true
-					})
-					.bindPopup('<b>' + i + '</b><br>' + loremIpsum)
-					.bindTooltip('<b>' + i + '</b>')
-					.addTo(map));
-			}
-
-			var path = L.polyline(route, {
-				renderer: L.canvas()
-			}).addTo(map);
-
-			var circle = L.circle([53, 4], 111111)
-				.addTo(map);
-
-			var polygon = L.polygon([
-				[48, -3],
-				[50, -4],
-				[52, 4]
-			]).addTo(map);
-
-			L.Rotate.debug(map);
-		</script>
-
-		<a href="https://github.com/Raruto/leaflet-rotate" class="view-on-github" style="position: fixed;bottom: 10px;left: calc(50% - 60px);z-index: 9999;"> <img alt="View on Github" src="https://raruto.github.io/img/view-on-github.png" title="View on Github"
-			  width="163"> </a>
-
-	</body>
-
-</html>
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<title>leaflet-rotate.js</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+		<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
+		<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
+
+		<script src="../leaflet-rotate.js"></script>
+
+		<script src="../misc/route.js"></script>
+		<script src="../misc/places.js"></script>
+		<script src="../misc/loremIpsum.js"></script>
+		<script src="../lib/debug.js"></script>
+
+		<style>
+			#map {
+				width: 100%;
+				height: 600px;
+				border: 1px solid #ccc;
+				max-height: 50vh;
+			}
+		</style>
+	</head>
+
+	<body>
+
+		<div id="map"></div>
+
+		<hr>
+
+		<div>
+			<p>
+				<strong>Fly to bounds: </strong>
+				<button onclick="map.flyToBounds(circle.getBounds());">CIRCLE</button>
+				<button onclick="map.flyToBounds(polygon.getBounds());"> POLYGON</button>
+				<button onclick="map.flyToBounds(path.getBounds());">PATH</button>
+			</p>
+			<p>
+				<strong>Fly to: </strong>
+				<button onclick="map.flyTo(places['Kyiv'], 10);">Kyiv</button>
+				<button onclick="map.flyTo(places['London'], 10);">London</button>
+				<button onclick="map.flyTo(places['San Francisco'], 10);">San Francisco</button>
+				<button onclick="map.flyTo(places['Washington'], 10);">Washington</button>
+				<button onclick="map.flyTo(places['Trondheim'], 10);">Trondheim</button>
+			</p>
+		</div>
+
+		<script>
+			var esri = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+				id: 'mapbox.streets',
+				maxZoom: 24,
+				maxNativeZoom: 18,
+				attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
+			});
+
+			var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+				maxZoom: 24,
+				maxNativeZoom: 19,
+				attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			});
+
+			var map = L.map('map', {
+				center: [55, 10],
+				zoom: 2,
+				layers: [esri],
+				// worldCopyJump: true,
+				rotate: true,
+				touchRotate: true,
+				rotateControl: {
+					closeOnZeroBearing: false
+				},
+			});
+
+			// map.touchRotate.enable();
+
+			var layers = L.control.layers({
+				'Empty': L.tileLayer(''),
+				'Streets': osm,
+				'Satellite': esri,
+			}, null, {
+				collapsed: false
+			}).addTo(map);
+
+			var markers = [];
+			for (var i in places) {
+				markers.push(L.marker(places[i], {
+						draggable: true
+					})
+					.bindPopup('<b>' + i + '</b><br>' + loremIpsum)
+					.bindTooltip('<b>' + i + '</b>')
+					.addTo(map));
+			}
+
+			var path = L.polyline(route, {
+				renderer: L.canvas()
+			}).addTo(map);
+
+			var circle = L.circle([53, 4], 111111)
+				.addTo(map);
+
+			var polygon = L.polygon([
+				[48, -3],
+				[50, -4],
+				[52, 4]
+			]).addTo(map);
+
+			L.Rotate.debug(map);
+		</script>
+
+		<a href="https://github.com/Raruto/leaflet-rotate" class="view-on-github" style="position: fixed;bottom: 10px;left: calc(50% - 60px);z-index: 9999;"> <img alt="View on Github" src="https://raruto.github.io/img/view-on-github.png" title="View on Github"
+			  width="163"> </a>
+
+	</body>
+
+</html>