Adding code example for lightening talk.

ngageoint · Sep 22, 2022 · 0d7a905 · 0d7a905
1 parent 30a1fa0
commit 0d7a905
Show file tree

Hide file tree

Showing 12 changed files with 938 additions and 0 deletions.
diff --git a/docs/examples/GoingOfflineWithGeoPackage/README.md b/docs/examples/GoingOfflineWithGeoPackage/README.md
@@ -0,0 +1,79 @@
+# Going Offline With GeoPackage: MAGE, MapCache, and More
+## Lightening talk September 26th, 2022
+
+Map tiles from [OpenStreetMap](https://www.openstreetmap.org/) and [Stamen](http://maps.stamen.com/#toner/12/37.7706/-122.3782).
+
+This example page opens a GeoPackage with local landmarks, and OpenStreetMap tiles from Washington DC and displays them on a Leaflet map using the NGA's GeoPackage Leaflet plugin.
+
+![GeoPackage-JS Example Screenshot](geopackage.png)
+
+### Run
+
+You can run this example using any web server. For simplicity, I prefer to use the Python module SimpleHTTPServer. If you have python installed, then you already have this module as well.
+
+From this directory, run:
+
+```
+$ python -m SimpleHTTPServer
+```
+
+Open a web browser and point it to http://localhost:8000.
+
+### Code Walkthrough
+
+We are using Leaflet with our [leaflet plugin](https://github.com/ngageoint/geopackage-js/tree/master/leaflet) which has convenience methods for quickly adding data from a GeoPackage to a Leaflet map. 
+
+Setup leaflet and add a map. We are using the Stamen Toner map, which is black and white so our color OSM tiles will show up nicely.
+```javascript
+const { GeoPackageAPI, setSqljsWasmLocateFile } = window.GeoPackage;
+const geoPackageMap = L.map('geopackage-map').setView([38.891033, -77.039604], 14);
+L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png', {
+  attribution:
+	 'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community. OpenStreetMap.',
+}).addTo(geoPackageMap);
+
+const sqljsWasmLocateFile = file => 'vendor/ngageoint/leaflet-geopackage/dist/' + file;
+setSqljsWasmLocateFile(sqljsWasmLocateFile);
+```
+
+### Tiles and features
+
+```javascript
+function loadData() {
+  // setup poi icon
+  const poiIcon = L.icon({
+	 iconUrl: 'public/images/poi.png',
+	 shadowUrl: 'public/images/shadow.png',
+	 iconSize: [32, 40],
+	 shadowSize: [32, 38],
+	 iconAnchor: [16, 40],
+	 shadowAnchor: [12, 32],
+	 popupAnchor: [0, -64],
+  });
+
+  // create Leaflet GeoPackage Tile Layer
+  const tileLayer = new L.geoPackageTileLayer({
+	 geoPackageUrl: 'public/DCTour.gpkg',
+	 layerName: 'OpenStreetMap',
+	 sqlJsWasmLocateFile: sqljsWasmLocateFile
+  })
+  geoPackageMap.addLayer(tileLayer);
+  tileLayer.bringToFront();
+
+
+  // create Leaflet GeoPackage Feature Layers
+  const layers = ['Buildings', 'Monuments', 'Museums'];
+  layers.forEach(layerName => {
+	 const featureLayer = L.geoPackageFeatureLayer([], {
+		geoPackageUrl: 'public/DCTour.gpkg',
+		layerName: layerName,
+		sqlJsWasmLocateFile: sqljsWasmLocateFile,
+		style: { color: '#00F', weight: 2, opacity: 1, fillColor: '#093', fillOpacity: 0.25 },
+		pointToLayer: (feature, latlng) => L.marker(latlng, { icon: poiIcon }),
+	 });
+	 geoPackageMap.addLayer(featureLayer);
+  });
+}
+
+loadData();
+```
diff --git a/docs/examples/GoingOfflineWithGeoPackage/geopackage.png b/docs/examples/GoingOfflineWithGeoPackage/geopackage.png
diff --git a/docs/examples/GoingOfflineWithGeoPackage/index.html b/docs/examples/GoingOfflineWithGeoPackage/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>DC Tour using GeoPackage</title>
+    <link rel="stylesheet" type="text/css" href="vendor/leaflet/dist/leaflet.css">
+    <style type="text/css">
+      html body {
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+      }
+
+      #geopackage-map {
+        height: 100vh;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="geopackage-map"></div>
+  </body>
+
+  <script type="text/javascript" src="vendor/leaflet/dist/leaflet-src.js"></script>
+  <script type="text/javascript" src="vendor/ngageoint/geopackage/dist/geopackage.min.js"></script>
+  <script type="text/javascript" src="vendor/ngageoint/leaflet-geopackage/dist/leaflet-geopackage.js"></script>
+  <script type="text/javascript" src="index.js"></script>
+</html>
diff --git a/docs/examples/GoingOfflineWithGeoPackage/index.js b/docs/examples/GoingOfflineWithGeoPackage/index.js
@@ -0,0 +1,47 @@
+const { GeoPackageAPI, setSqljsWasmLocateFile } = window.GeoPackage;
+const geoPackageMap = L.map('geopackage-map').setView([38.891033, -77.039604], 14);
+L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
+  attribution:
+    'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.',
+}).addTo(geoPackageMap);
+
+const sqljsWasmLocateFile = file => 'vendor/ngageoint/leaflet-geopackage/dist/' + file;
+setSqljsWasmLocateFile(sqljsWasmLocateFile);
+
+function loadData() {
+  // setup poi icon
+  const poiIcon = L.icon({
+    iconUrl: 'public/images/poi.png',
+    shadowUrl: 'public/images/shadow.png',
+    iconSize: [32, 40],
+    shadowSize: [32, 38],
+    iconAnchor: [16, 40],
+    shadowAnchor: [12, 32],
+    popupAnchor: [0, -64],
+  });
+
+  // create Leaflet GeoPackage Tile Layer
+  const tileLayer = new L.geoPackageTileLayer({
+    geoPackageUrl: 'public/DCTour.gpkg',
+    layerName: 'OpenStreetMap',
+    sqlJsWasmLocateFile: sqljsWasmLocateFile
+  })
+  geoPackageMap.addLayer(tileLayer);
+  tileLayer.bringToFront();
+
+
+  // create Leaflet GeoPackage Feature Layers
+  const layers = ['Buildings', 'Monuments', 'Museums'];
+  layers.forEach(layerName => {
+    const featureLayer = L.geoPackageFeatureLayer([], {
+      geoPackageUrl: 'public/DCTour.gpkg',
+      layerName: layerName,
+      sqlJsWasmLocateFile: sqljsWasmLocateFile,
+      style: { color: '#00F', weight: 2, opacity: 1, fillColor: '#093', fillOpacity: 0.25 },
+      pointToLayer: (feature, latlng) => L.marker(latlng, { icon: poiIcon }),
+    });
+    geoPackageMap.addLayer(featureLayer);
+  });
+}
+
+loadData();
diff --git a/docs/examples/GoingOfflineWithGeoPackage/public/DCTour.gpkg b/docs/examples/GoingOfflineWithGeoPackage/public/DCTour.gpkg
diff --git a/docs/examples/GoingOfflineWithGeoPackage/public/Monuments.gpkg b/docs/examples/GoingOfflineWithGeoPackage/public/Monuments.gpkg
diff --git a/docs/examples/GoingOfflineWithGeoPackage/public/images/poi.png b/docs/examples/GoingOfflineWithGeoPackage/public/images/poi.png
diff --git a/docs/examples/GoingOfflineWithGeoPackage/public/images/shadow.png b/docs/examples/GoingOfflineWithGeoPackage/public/images/shadow.png
diff --git a/docs/examples/GoingOfflineWithGeoPackage/vendor/ngageoint/geopackage/LICENSE b/docs/examples/GoingOfflineWithGeoPackage/vendor/ngageoint/geopackage/LICENSE
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 National Geospatial-Intelligence Agency
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+