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?