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/leaflet-geopackage@3.0.3/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!