geoPackageFeatureLayer is not a function

[robbiegleeson]

Package Version

"@ngageoint/leaflet-geopackage": "^3.0.3"

React Version

"react": "^16.13.1",

Error Details

TypeError: leaflet__WEBPACK_IMPORTED_MODULE_1___default.a.geoPackageFeatureLayer is not a function

Details

I am looking to use leaflet-geopackage within my React.js project. When trying to load a .gpkg file once the titleLayer is loaded I get the above error.

Code

import L from 'leaflet';

useEffect(() => {
    var map = L.map('map').setView([lat, lng], 6);
    setMap(map)

    const titleLayer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      id: 'mapbox/light-v9',
      tileSize: 512,
      zoomOffset: -1,
    }).addTo(map);

      titleLayer.on('load', () => {
        L.geoPackageFeatureLayer([], {
        geoPackageUrl: 'path-to-my-local-file/data.gpkg',
        layerName: 'rivers'
      }).addTo(map);
    })
  ....
})

I've installed the package but I can't seem to figure out why it's throwing this error

[BLECUONA]

I am facing the same issue. Have you found a solution @robbiegleeson ?

Thank you.

[danielbarela]

How did you import the leaflet-geopackage library? Do you have a complete example I can look at?

[BLECUONA]

Thanks for your reply.

I am trying to use it in a react js project. After npm install @ngageoint/leaflet-geopackage I tried many ways to import leaflet-geopackage library without success :

• (in .tsx file) require('@ngageoint/leaflet-geopackage') OR require('@ngageoint/leaflet-geopackage/dist/leaflet-geopackage.min.js') throw this error

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF6E5EB285F napi_wrap+119263
 2: 00007FF6E5E59526 v8::internal::OrderedHashTable<v8::internal::OrderedHashSet,1>::NextTableOffset+38102
 3: 00007FF6E5E5A326 node::OnFatalError+438
 4: 00007FF6E6697AAE v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF6E667FC61 v8::SharedArrayBuffer::Externalize+833
 6: 00007FF6E653143C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436
 7: 00007FF6E653C680 v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312
 8: 00007FF6E6539194 v8::internal::Heap::PageFlagsAreConsistent+3204
 9: 00007FF6E652E993 v8::internal::Heap::CollectGarbage+1283
10: 00007FF6E652D004 v8::internal::Heap::AddRetainedMap+2500
11: 00007FF6E654E34D v8::internal::Factory::NewFillerObject+61
12: 00007FF6E62B177F v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+1295
13: 00007FF6E6AECC5D v8::internal::SetupIsolateDelegate::SetupHeap+546925
14: 000003EE58F8AF5D
error Command failed with exit code 134.

• (in index.html header) <script src="https://unpkg.com/@ngageoint/[email protected]/dist/leaflet-geopackage.min.js"></script> returns "geoPackageFeatureLayer is not a function"

Am I doing something wrong?

NB : I use Node 12 to avoid #172

[danielbarela]

If you can provide an example project, I can take a look and determine what is wrong.

[BLECUONA]

Here is an example project with my issue.

Thank you for your help.

[danielbarela]

It appears you need to allocate more space to your build so I modified your package.json scripts to this

...
  "scripts": {
    "start": "react-scripts --max_old_space_size=4096 start",
    "build": "react-scripts --max_old_space_size=4096 build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
...

I updated your Geopackage.js file to this

import React, { useEffect } from 'react';
import { useMap } from 'react-leaflet';

/* Both of these import throw "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" */
require('@ngageoint/leaflet-geopackage/dist/leaflet-geopackage.min.js');
// require('@ngageoint/leaflet-geopackage');

export function Geopackage() {
	const map = useMap();

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

		geopackageTileLayer.on('load', () => {
			window.L.geoPackageFeatureLayer([], {
			geoPackageUrl: 'http://ngageoint.github.io/GeoPackage/examples/rivers.gpkg',
			layerName: 'rivers'
		}).addTo(map);
	});
	}, []);

	return null;
};

Once that was done, it all loaded just fine for me.

[BLECUONA]

--max_old_space_size=4096 is insufficient for me. I needed to increase it to 8192 and that perfectly loaded, thanks!