v1.1.4

adding support for 4326 leaflet maps
ngageoint · Sep 5, 2018 · 146ec80 · 146ec80
1 parent fb1137a
commit 146ec80
Show file tree

Hide file tree

Showing 8 changed files with 9,699 additions and 2,292 deletions.
diff --git a/README.md b/README.md
@@ -34,6 +34,10 @@ The GeoPackage JavaScript library currently provides the ability to read GeoPack
 
 ### Changelog
 
+##### 1.1.4
+
+- Adds a method to retrieve tiles in EPSG:4326
+
 ##### 1.1.3
 
 - Fixes issue #115

diff --git a/docs/common.js b/docs/common.js
@@ -41,6 +41,7 @@ var map = L.map('map', {
   center: [45,0],
   zoom: 3,
   worldCopyJump: true,
+  crs: L.CRS.EPSG4326,
   // maxBounds: [
   //   [-85, -180],
   //   [85, 180]
@@ -50,7 +51,7 @@ var map = L.map('map', {
 
 map.addControl(new L.Control.ZoomIndicator());
 
-var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+var osm = L.tileLayer('https://osm.geointservices.io/tiles/default_pc/{z}/{x}/{y}.png', {
   attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>'
 });
 var arcworldmap = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png', {
@@ -454,12 +455,25 @@ window.toggleLayer = function(layerType, table) {
         var size = this.getTileSize();
         canvas.width = size.x;
         canvas.height = size.y;
+        var tableLayer = this;
         setTimeout(function() {
           console.time('Draw tile ' + tilePoint.x + ', ' + tilePoint.y + ' zoom: ' + tilePoint.z);
-          GeoPackageAPI.drawXYZTileInCanvas(geoPackage, table, tilePoint.x, tilePoint.y, tilePoint.z, size.x, size.y, canvas, function(err) {
-            console.timeEnd('Draw tile ' + tilePoint.x + ', ' + tilePoint.y + ' zoom: ' + tilePoint.z);
-            done(err, canvas);
-          });
+          if (map.options.crs === L.CRS.EPSG4326) {
+            var tileSize = tableLayer.getTileSize(),
+    		    nwPoint = tilePoint.scaleBy(tileSize),
+    		    sePoint = nwPoint.add(tileSize),
+    		    nw = map.unproject(nwPoint, tilePoint.z),
+    		    se = map.unproject(sePoint, tilePoint.z);
+            GeoPackageAPI.draw4326TileInCanvas(geoPackage, table, se.lat, nw.lng, nw.lat, se.lng, tilePoint.z, size.x, size.y, canvas, function(err) {
+              console.timeEnd('Draw tile ' + tilePoint.x + ', ' + tilePoint.y + ' zoom: ' + tilePoint.z);
+              done(err, canvas);
+            });
+          } else {
+            GeoPackageAPI.drawXYZTileInCanvas(geoPackage, table, tilePoint.x, tilePoint.y, tilePoint.z, size.x, size.y, canvas, function(err) {
+              console.timeEnd('Draw tile ' + tilePoint.x + ', ' + tilePoint.y + ' zoom: ' + tilePoint.z);
+              done(err, canvas);
+            });
+          }
         }, 0);
         return canvas;
       }

diff --git a/docs/gp.js b/docs/gp.js
diff --git a/index.js b/index.js
@@ -725,3 +725,14 @@ module.exports.drawXYZTileInCanvas = function(geopackage, table, x, y, z, width,
     retriever.drawTileIn(x, y, z, canvas, callback);
   });
 };
+
+module.exports.draw4326TileInCanvas = function(geopackage, table, minLat, minLon, maxLat, maxLon, z, width, height, canvas, callback) {
+  z = Number(z);
+  width = Number(width);
+  height = Number(height);
+  geopackage.getTileDaoWithTableName(table, function(err, tileDao) {
+    var retriever = new GeoPackageTileRetriever(tileDao, width, height);
+    var bounds = new BoundingBox(minLon, maxLon, minLat, maxLat);
+    retriever.drawTileWithWgs84BoundsInProjection(bounds, z, 'EPSG:4326', canvas, callback);
+  });
+}
diff --git a/leaflet/leaflet-geopackage.js b/leaflet/leaflet-geopackage.js
@@ -58,17 +58,32 @@ L.GeoPackageTileLayer = L.GridLayer.extend({
 function maybeDrawTile(gridLayer, tilePoint, canvas, callback) {
   var geoPackage = gridLayer.geoPackage;
   var layerName = gridLayer.options.layerName;
+  var map = gridLayer._map;
   if (!geoPackage) {
     // not loaded yet, just wait
     setTimeout(maybeDrawTile, 250, gridLayer, tilePoint, canvas, callback);
     return;
   }
   setTimeout(function() {
     console.time('Draw tile ' + tilePoint.x + ', ' + tilePoint.y + ' zoom: ' + tilePoint.z);
-    GeoPackageAPI.drawXYZTileInCanvas(geoPackage, layerName, tilePoint.x, tilePoint.y, tilePoint.z, canvas.width, canvas.height, canvas, function(err) {
-      console.timeEnd('Draw tile ' + tilePoint.x + ', ' + tilePoint.y + ' zoom: ' + tilePoint.z);
-      callback(err, canvas);
-    });
+
+    if (map.options.crs === L.CRS.EPSG4326) {
+      var tileSize = gridLayer.getTileSize(),
+      nwPoint = tilePoint.scaleBy(tileSize),
+      sePoint = nwPoint.add(tileSize),
+      nw = map.unproject(nwPoint, tilePoint.z),
+      se = map.unproject(sePoint, tilePoint.z);
+      console.log('Draw 4326 tile');
+      GeoPackageAPI.draw4326TileInCanvas(geoPackage, layerName, se.lat, nw.lng, nw.lat, se.lng, tilePoint.z, canvas.width, canvas.height, canvas, function(err) {
+        console.timeEnd('Draw tile ' + tilePoint.x + ', ' + tilePoint.y + ' zoom: ' + tilePoint.z);
+        callback(err, canvas);
+      });
+    } else {
+      GeoPackageAPI.drawXYZTileInCanvas(geoPackage, layerName, tilePoint.x, tilePoint.y, tilePoint.z, canvas.width, canvas.height, canvas, function(err) {
+        console.timeEnd('Draw tile ' + tilePoint.x + ', ' + tilePoint.y + ' zoom: ' + tilePoint.z);
+        callback(err, canvas);
+      });
+    }
   }, 0);
 }
 

diff --git a/lib/tiles/retriever/index.js b/lib/tiles/retriever/index.js
@@ -64,6 +64,14 @@ GeoPackageTileRetriever.prototype.drawTileIn = function (x, y, zoom, canvas, cal
   this.getTileWithBounds(webMercatorBoundingBox, gpZoom, 'EPSG:3857', canvas, callback);
 };
 
+GeoPackageTileRetriever.prototype.drawTileWithWgs84BoundsInProjection = function (wgs84BoundingBox, zoom, targetProjection, canvas, callback) {
+  var targetBoundingBox = wgs84BoundingBox;
+  if (targetProjection !== 'EPSG:4326') {
+    targetBoundingBox = wgs84BoundingBox.projectBoundingBox('EPSG:4326', targetProjection);
+  }
+  this.getTileWithBounds(targetBoundingBox, zoom, targetProjection, canvas, callback);
+};
+
 GeoPackageTileRetriever.prototype.getTileWithWgs84Bounds = function (wgs84BoundingBox, zoom, callback) {
   var webMercatorBoundingBox = wgs84BoundingBox.projectBoundingBox('EPSG:4326', 'EPSG:3857');
   var gpZoom = this.determineGeoPackageZoomLevel(webMercatorBoundingBox, zoom);
@@ -113,7 +121,6 @@ GeoPackageTileRetriever.prototype.getTileWithBounds = function (targetBoundingBo
     callback = canvas;
     canvas = undefined;
   }
-
   var tiles = [];
   var tileMatrix = this.tileDao.getTileMatrixWithZoomLevel(zoom);
   if (!tileMatrix) return callback();

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngageoint/geopackage",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "GeoPackage JavaScript Library",
   "keywords": [
     "NGA",