Confusion about how to load the maplibre-gl module with 'import' when using typescript

27 views Asked by At

I'm trying to use Maplibre-gl to create maps with Typescript.

I'm using Visual Studio 2022 (latest version) and Libman to load the latest version of Maplibre-gl (v4.1.1)

My typescript code to create the map is straight out of the examples on Maplibre website (with the exception of the import)

mymap.ts:

import <something> from 'maplibre-gl';

new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [-74.5, 40],
    zoom: 9
});

In my htm file I load the maplibre-gl library through importmap

    <script type="importmap" asp-append-version="true">
        {
          "imports": {
            "maplibre-gl": "https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"
          }
        }
    </script>
    <script src="~/js-test/mymap.min.js" type="module" asp-append-version="true"></script>

The question is, what do I import, i.e. what should <something be in import <something> from 'maplibre-gl';

The obvious answer import maplibregl from 'maplibre-gl; results in the error Uncaught SyntaxError: import not found: default which would suggest that there is no default export.

Neither import { maplibregl } from 'maplibre-gl'; nor import { Map } from 'maplibre-gl'; works (import not found).

Removing the import line in its entirety yields maplibregl is not defined. as an error

import * as maplibregl from 'maplibre-gl'; gives the error maplibregl.Map is not a constructor.

However import * as M from 'maplibre-gl'; works like a charm, even though I don't use M but maplibregl in my call to the Map constructor.

I do not understand why the latter works and all the other options do not. Is this a problem with the export of maplibre-gl (and should I post this as an issue on Github), or is this me not understanding import/export correctly?

0

There are 0 answers