Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

geoPackageFeatureLayer is not a function #166

Closed
robbiegleeson opened this issue Oct 9, 2020 · 7 comments
Closed

geoPackageFeatureLayer is not a function #166

robbiegleeson opened this issue Oct 9, 2020 · 7 comments

Comments

@robbiegleeson
Copy link

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
Copy link

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

Thank you.

@danielbarela
Copy link
Member

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

@BLECUONA
Copy link

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
Copy link
Member

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

@BLECUONA
Copy link

Here is an example project with my issue.

Thank you for your help.

@danielbarela
Copy link
Member

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants