import as node module fails #1668

geraldo · 2022-09-19T15:33:02Z

geraldo
Sep 19, 2022

I try to build the most basic maplibre example as node module, but without success. What am I doing wrong?

import * as maplibregl from "maplibre-gl";

var map = new maplibregl.Map({
    container: 'map', // container id
    style: 'https://demotiles.maplibre.org/style.json', // style URL
    center: [0, 0], // starting position [lng, lat]
    zoom: 1 // starting zoom
});

This throws this error:

TypeError: maplibregl.Map is not a constructor

Or is this not working yet, because related to #1595?

Answered by HarelM

Sep 20, 2022

maplibre-gl can't run as is on node environment as it uses a lot of things that are available only in the browser.
Having said that, we are able to mock some of the things when we run the jest unit tests and the render-tests which run on node.
Feel free to look at the code there and understand what is needed in order to run it on node environment.
Note that it's not an easy task :-)

View full answer

HarelM · 2022-09-19T17:22:59Z

HarelM
Sep 19, 2022
Maintainer

Have you tried import maplibre from "maplibre-gl"?
It probably depends on the packaging system and all kind of other javascript toolings...
You can take a look at the examples to see that this works as expected in plain javascript + html...

1 reply

geraldo Sep 20, 2022
Author

Have you tried import maplibre from "maplibre-gl"? It probably depends on the packaging system and all kind of other javascript toolings... You can take a look at the examples to see that this works as expected in plain javascript + html...

Ok, now the error message changed to:

ReferenceError: devicePixelRatio is not defined

I know that it works as expected in plain javascript + html, I regulary use it like that. But I'm curious how to make it work with node.

Here my package.json:

{
  "name": "maplibre-viewer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "author": "",
  "license": "",
  "dependencies": {
    "maplibre-gl": "^2.4.0"
  }
}

And my index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Maplibre Viewer</title>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>
  </body>
</html>

HarelM · 2022-09-19T17:23:27Z

HarelM
Sep 19, 2022
Maintainer

Since I don't think this is a real issue I'm converting it to a discussion.

0 replies

HarelM · 2022-09-20T09:03:29Z

HarelM
Sep 20, 2022
Maintainer

maplibre-gl can't run as is on node environment as it uses a lot of things that are available only in the browser.
Having said that, we are able to mock some of the things when we run the jest unit tests and the render-tests which run on node.
Feel free to look at the code there and understand what is needed in order to run it on node environment.
Note that it's not an easy task :-)

0 replies

acalcutt · 2022-09-20T11:48:04Z

acalcutt
Sep 20, 2022

Are you able to use maplibre-native or is there a reason you want maplibre-gl-js ? we just released our first node prerelease there.

1 reply

acalcutt Sep 20, 2022

For example, for testing I had made this small test application

https://github.com/acalcutt/maplibre-label-clipping-test/blob/main/index.js

Also, my version of tileserver-gl is using it as an import.
https://github.com/acalcutt/tileserver-gl/blob/main/src/serve_rendered.js

this should work with @maplibre/maplibre-gl-native now that we have released it

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

import as node module fails #1668

{{title}}

Replies: 4 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

import as node module fails #1668

geraldo Sep 19, 2022

Replies: 4 comments · 2 replies

HarelM Sep 19, 2022 Maintainer

geraldo Sep 20, 2022 Author

HarelM Sep 19, 2022 Maintainer

HarelM Sep 20, 2022 Maintainer

acalcutt Sep 20, 2022

acalcutt Sep 20, 2022

geraldo
Sep 19, 2022

Replies: 4 comments 2 replies

HarelM
Sep 19, 2022
Maintainer

geraldo Sep 20, 2022
Author

HarelM
Sep 19, 2022
Maintainer

HarelM
Sep 20, 2022
Maintainer

acalcutt
Sep 20, 2022