Geopackage not rendering in leaflet

Question

Having trouble geting a geopackage file to show up in leaflet-geopackage, I'm running Ubuntu 16.04, Vue 2.6.14, and Chrome Version 95.0.4638.54.

I have a mapbox image which will render, using this code block.

     var mapDiv = L.map("mapContainer", {zoomControl: false}).setView([36.7783, -119.4179], 5);
     L.tileLayer(
       "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
       {
         attribution:
           'Map data (c) <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery (c) <a href="https://www.mapbox.com/">Mapbox</a>',
         maxZoom: 18,
         id:'mapbox/light-v9',
         accessToken:"XXXXX",
       }
     ).addTo(mapDiv);

And then using geopackage-js (leaflet-geopackage) I try and put county level information on the map, using this block.

    var stater = L.geoPackageFeatureLayer([], {
    geoPackageUrl: "@/assets/geo/gadm36_USA.gpkg",
    layerName: "gadm36_USA_2",
    style: {color: "black"}
    }).addTo(mapDiv);

It fails with this console message

Loading GeoPackage @/assets/geo/: 248.341064453125 ms
sql-asm-memory-growth.js?77f5:82 Uncaught (in promise) Error: file is not a database
    at a.handleError (sql-asm-memory-growth.js?77f5:82)
    at a.prepare (sql-asm-memory-growth.js?77f5:80)
    at SqljsAdapter.each (sqljsAdapter.js?732b:265)
    at SqljsAdapter.all (sqljsAdapter.js?732b:241)
    at GeoPackageConnection.all (geoPackageConnection.js?c43a:197)
    at GeometryColumnsDao.Dao.queryForAllEq (dao.js?4966:357)
    at GeometryColumnsDao.queryForTableName (geometryColumnsDao.js?5899:78)
    at GeoPackage.getFeatureDao (geoPackage.js?07f8:530)
    at GeoPackage.iterateGeoJSONFeatures (geoPackage.js?07f8:1516)
    at eval (leaflet-geopackage.js?865f:183)
a.handleError @ sql-asm-memory-growth.js?77f5:82
a.prepare @ sql-asm-memory-growth.js?77f5:80
SqljsAdapter.each @ sqljsAdapter.js?732b:265
SqljsAdapter.all @ sqljsAdapter.js?732b:241
GeoPackageConnection.all @ geoPackageConnection.js?c43a:197
Dao.queryForAllEq @ dao.js?4966:357
GeometryColumnsDao.queryForTableName @ geometryColumnsDao.js?5899:78
GeoPackage.getFeatureDao @ geoPackage.js?07f8:530
GeoPackage.iterateGeoJSONFeatures @ geoPackage.js?07f8:1516
eval @ leaflet-geopackage.js?865f:183
Promise.then (async)
xhr.onload @ leaflet-geopackage.js?865f:178
load (async)
onAdd @ leaflet-geopackage.js?865f:176
_layerAdd @ leaflet-src.js?e11e:6567
whenReady @ leaflet-src.js?e11e:4428
addLayer @ leaflet-src.js?e11e:6629
addTo @ leaflet-src.js?e11e:6505
setupLeafletMap @ ReportChoroplethCounties.vue?a461:36
mounted @ ReportChoroplethCounties.vue?a461:44
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
callHook @ vue.runtime.esm.js?2b0e:4235
insert @ vue.runtime.esm.js?2b0e:3158
invokeInsertHook @ vue.runtime.esm.js?2b0e:6390
patch @ vue.runtime.esm.js?2b0e:6609
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:3984
eval @ index.js?6435:244
eval @ index.js?6435:242
eval @ index.js?6435:119
eval @ VM251619 ReportChoroplethCounties.vue:34
./src/components/ReportChoroplethCounties.vue @ 68.8ada1ba8.0.3.1.js:269
__webpack_require__ @ app~._m.8ada1ba8.0.3.1.js:871
hotApplyInternal @ app~._m.8ada1ba8.0.3.1.js:767
hotApply @ app~._m.8ada1ba8.0.3.1.js:429
(anonymous) @ app~._m.8ada1ba8.0.3.1.js:404
Promise.then (async)
hotUpdateDownloaded @ app~._m.8ada1ba8.0.3.1.js:403
hotAddUpdateChunk @ app~._m.8ada1ba8.0.3.1.js:379
webpackHotUpdateCallback @ app~._m.8ada1ba8.0.3.1.js:75
(anonymous) @ 68.8ada1ba804fbefbb0671.hot-update.js:1
leaflet-geopackage.js?865f:179 Loading GeoPackage @/assets/geo/gadm36_USA.gpkg: 13.707275390625 ms
sql-asm-memory-growth.js?77f5:82 Uncaught (in promise) Error: file is not a database
    at a.handleError (sql-asm-memory-growth.js?77f5:82)
    at a.prepare (sql-asm-memory-growth.js?77f5:80)
    at SqljsAdapter.each (sqljsAdapter.js?732b:265)
    at SqljsAdapter.all (sqljsAdapter.js?732b:241)
    at GeoPackageConnection.all (geoPackageConnection.js?c43a:197)
    at GeometryColumnsDao.Dao.queryForAllEq (dao.js?4966:357)
    at GeometryColumnsDao.queryForTableName (geometryColumnsDao.js?5899:78)
    at GeoPackage.getFeatureDao (geoPackage.js?07f8:530)
    at GeoPackage.iterateGeoJSONFeatures (geoPackage.js?07f8:1516)
    at eval (leaflet-geopackage.js?865f:183)
a.handleError @ sql-asm-memory-growth.js?77f5:82
a.prepare @ sql-asm-memory-growth.js?77f5:80
SqljsAdapter.each @ sqljsAdapter.js?732b:265
SqljsAdapter.all @ sqljsAdapter.js?732b:241
GeoPackageConnection.all @ geoPackageConnection.js?c43a:197
Dao.queryForAllEq @ dao.js?4966:357
GeometryColumnsDao.queryForTableName @ geometryColumnsDao.js?5899:78
GeoPackage.getFeatureDao @ geoPackage.js?07f8:530
GeoPackage.iterateGeoJSONFeatures @ geoPackage.js?07f8:1516
eval @ leaflet-geopackage.js?865f:183
Promise.then (async)
xhr.onload @ leaflet-geopackage.js?865f:178
load (async)
onAdd @ leaflet-geopackage.js?865f:176
_layerAdd @ leaflet-src.js?e11e:6567
whenReady @ leaflet-src.js?e11e:4428
addLayer @ leaflet-src.js?e11e:6629
addTo @ leaflet-src.js?e11e:6505
setupLeafletMap @ ReportChoroplethCounties.vue?a461:36
mounted @ ReportChoroplethCounties.vue?a461:44
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
callHook @ vue.runtime.esm.js?2b0e:4235
insert @ vue.runtime.esm.js?2b0e:3158
invokeInsertHook @ vue.runtime.esm.js?2b0e:6390
patch @ vue.runtime.esm.js?2b0e:6609
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:3984
eval @ index.js?6435:244
eval @ index.js?6435:242
eval @ index.js?6435:119
eval @ ReportChoroplethCounties.vue?a2da:29
./src/components/ReportChoroplethCounties.vue @ 68.8ada1ba8.0.3.1.js:269
__webpack_require__ @ app~._m.8ada1ba8.0.3.1.js:871
hotApplyInternal @ app~._m.8ada1ba8.0.3.1.js:767
hotApply @ app~._m.8ada1ba8.0.3.1.js:429
(anonymous) @ app~._m.8ada1ba8.0.3.1.js:404
Promise.then (async)
hotUpdateDownloaded @ app~._m.8ada1ba8.0.3.1.js:403
hotAddUpdateChunk @ app~._m.8ada1ba8.0.3.1.js:379
webpackHotUpdateCallback @ app~._m.8ada1ba8.0.3.1.js:75
(anonymous) @ 68.1e98547e0c527424230d.hot-update.js:1

The rivers example from the repo geopackage-js as seen below works fine.

L.geoPackageTileLayer({
    geoPackageUrl: 'http://ngageoint.github.io/GeoPackage/examples/rivers.gpkg',
    layerName: 'rivers_tiles'
}).addTo(map);

Unlike the person who posted this question: Geopackage not rendering polygons to map

I do actually have the layer name correct, and I still can't visualize the county level information. Why is it that an internal .gpkg doesn't work but something downloadable via an http link (like the rivers example) does? How can I get around this to use local .gpkg files?

What happens if you download the example file and use it locally? — ghybs, Nov 03 '21 at 02:06
It fails with the same message when I download and use the example file locally — caceves, Nov 03 '21 at 16:53
Probably the path to the local file does not resolve correctly. In this case, I suspect Vue build tool to not replace your "@" by the appropriate location. — ghybs, Nov 04 '21 at 17:30
I tried using the absolute path too and it didn't work. Also the vue app uses @ correctly in other locations in the code — caceves, Nov 04 '21 at 17:38
"_the vue app uses @ correctly in other locations in the code_" I suspect you refer to import paths, whereas I doubt the build tool looks for @ within the code like here. — ghybs, Nov 04 '21 at 19:01
that doesn't explain why the absolute path doesn't work either though, and gives the exact same error — caceves, Nov 05 '21 at 21:21
"_that doesn't explain why the absolute path doesn't work either though_" without information on how you set up that path, it is impossible telling what could have been wrong. — ghybs, Nov 06 '21 at 03:16

Geopackage not rendering in leaflet

0 Answers0