added examples

Raruto · Feb 9, 2020 · f099449 · f099449
1 parent dca66e0
commit f099449
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 6 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,4 @@
+/examples export-ignore
+.jshintrc export-ignore
+.gitattributes export-ignore
+_config.yml export-ignore
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,4 @@
+/examples
+.jshintrc
+.gitattributes
+_config.yml
diff --git a/README.md b/README.md
@@ -3,8 +3,8 @@ A KMZ file loader for Leaflet Maps
 
 _For a working example see one of the following demos:_
 
-- [multiple kmz files](https://raruto.github.io/examples/leaflet-kmz/leaflet-kmz.html)
-- [mouse interactions](https://raruto.github.io/examples/leaflet-kmz/leaflet-kmz_mouse-interactions.html)
+- [multiple kmz files](https://raruto.github.io/leaflet-kmz/examples/leaflet-kmz.html)
+- [mouse interactions](https://raruto.github.io/leaflet-kmz/examples/leaflet-kmz_mouse-interactions.html)
 
 ---
 
@@ -52,9 +52,9 @@ _For a working example see one of the following demos:_
         }
       });
       // Add remote KMZ files as layers (NB if they are 3rd-party servers, they MUST have CORS enabled)
-      kmzParser.load('https://raruto.github.io/examples/leaflet-kmz/regions.kmz');
-      kmzParser.load('https://raruto.github.io/examples/leaflet-kmz/capitals.kmz');
-      kmzParser.load('https://raruto.github.io/examples/leaflet-kmz/globe.kmz');
+      kmzParser.load('https://raruto.github.io/leaflet-kmz/examples/regions.kmz');
+      kmzParser.load('https://raruto.github.io/leaflet-kmz/examples/capitals.kmz');
+      kmzParser.load('https://raruto.github.io/leaflet-kmz/examples/globe.kmz');
 
       var control = L.control.layers(null, null, { collapsed:false }).addTo(map);
     </script>

diff --git a/examples/capitals.kmz b/examples/capitals.kmz
diff --git a/examples/globe.kmz b/examples/globe.kmz
diff --git a/examples/leaflet-kmz.html b/examples/leaflet-kmz.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>leaflet-kmz</title>
+	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<!-- Leaflet (JS/CSS) -->
+	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
+	<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
+
+	<!-- JSZIP -->
+	<!-- <script src="https://unpkg.com/jszip@3.1.5/dist/jszip.min.js"></script> -->
+
+	<!-- @tmcw/togeojson -->
+	<!-- <script src="https://unpkg.com/@tmcw/togeojson@3.0.1/dist/togeojsons.min.js"></script> -->
+
+	<!-- geojson-vt -->
+	<!-- <script src="https://unpkg.com/geojson-vt@3.0.0/geojson-vt.js"></script> -->
+
+	<!-- Leaflet-KMZ -->
+	<script src="https://unpkg.com/leaflet-kmz@0.3.0/dist/leaflet-kmz.js"></script>
+
+	<style>
+		html,
+		body,
+		.map {
+			margin: 0;
+			padding: 0;
+			width: 100%;
+			height: 100%;
+		}
+	</style>
+</head>
+
+<body>
+
+	<div id="map" class="map"></div>
+
+	<script>
+	  var map = L.map('map');
+	  map.setView(new L.LatLng(43.5978, 12.7059), 5);
+
+	  var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
+	    maxZoom: 17,
+	    attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
+	    opacity: 0.90
+	  });
+	  OpenTopoMap.addTo(map);
+
+		// Instantiate KMZ parser (async)
+		var kmzParser = new L.KMZParser({
+			onKMZLoaded: function(layer, name) {
+				control.addOverlay(layer, name);
+				layer.addTo(map);
+			}
+		});
+		// Add remote KMZ files as layers (NB if they are 3rd-party servers, they MUST have CORS enabled)
+		kmzParser.load('regions.kmz');
+		kmzParser.load('capitals.kmz');
+		kmzParser.load('globe.kmz');
+		kmzParser.load('multigeometry.kmz');
+
+	  var control = L.control.layers(null, null, { collapsed:false }).addTo(map);
+	</script>
+
+	<a href="https://github.com/Raruto/leaflet-kmz" class="view-on-github" style="position: fixed;top: 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>
diff --git a/examples/leaflet-kmz_mouse-interactions.html b/examples/leaflet-kmz_mouse-interactions.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>leaflet-kmz</title>
+	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<!-- Leaflet (JS/CSS) -->
+	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
+	<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
+
+	<!-- Leaflet-Pointable -->
+	<script src="https://unpkg.com/leaflet-pointable@0.0.3/leaflet-pointable.js"></script>
+
+	<!-- JSZIP -->
+	<!-- <script src="https://unpkg.com/jszip@3.1.5/dist/jszip.min.js"></script> -->
+
+	<!-- @tmcw/togeojson -->
+	<!-- <script src="https://unpkg.com/@tmcw/togeojson@3.0.1/dist/togeojsons.min.js"></script> -->
+
+	<!-- geojson-vt -->
+	<!-- <script src="https://unpkg.com/geojson-vt@3.0.0/geojson-vt.js"></script> -->
+
+	<!-- Leaflet-KMZ -->
+	<script src="https://unpkg.com/leaflet-kmz@0.3.0/dist/leaflet-kmz.js"></script>
+
+	<style>
+		html,
+		body,
+		.map {
+			margin: 0;
+			padding: 0;
+			width: 100%;
+			height: 100%;
+		}
+	</style>
+</head>
+
+<body>
+
+	<div id="map" class="map"></div>
+
+	<script>
+		var map = L.map('map');
+		map.setView(new L.LatLng(43.5978, 12.7059), 5);
+
+		var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
+			maxZoom: 17,
+			attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
+			opacity: 0.90
+		});
+		OpenTopoMap.addTo(map);
+
+		// Instantiate KMZ parser (async)
+		var kmzParser = new L.KMZParser({
+			onKMZLoaded: function(layer, name) {
+				control.addOverlay(layer, name);
+				layer.addTo(map);
+			},
+			interactive: false, // Disable default "leaflet.js" mouse layer interactions.
+			pointable: true,    // Enable optimized "geojson-vt.js" mouse layer interactions.
+		});
+
+		// Here you can also override global KMZParser options
+		kmzParser.load('regions.kmz');
+		kmzParser.load('capitals.kmz', { interactive: true });
+		kmzParser.load('globe.kmz', { ballon: false });
+		kmzParser.load('multigeometry.kmz', { pointable: false });
+
+		var control = L.control.layers(null, null, { collapsed: false }).addTo(map);
+	</script>
+
+	<a href="https://github.com/Raruto/leaflet-kmz" class="view-on-github" style="position: fixed;top: 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>
diff --git a/examples/multigeometry.kmz b/examples/multigeometry.kmz
diff --git a/examples/regions.kmz b/examples/regions.kmz
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rollup -c build/rollup.config.js",
-    "watch": "rollup -c build/rollup.config.js --watch"
+    "watch": "rollup -c build/rollup.config.js --watch",
+    "version": "npm run build && git add -A dist"
   },
   "repository": {
     "type": "git",