How to import mapbox-gl-leaflet in ESM
Closed this issue · 4 comments
Anubarak commented
How can I actually use this plugin?
I tried many different things and searched around the internet, but nothing worked.
import * as Default from 'mapbox-gl-leaflet'
console.log(Default); --> undefined
is undefined
import MapboxGL as 'mapbox-gl-leaflet'
throws Cannot read properties of undefined (reading '__esModule')
.
I even tried things like
import {mapboxGL} from 'mapbox-gl-leaflet'
But nothing worked. Can you please explain me how to use the script?
Edit: or in other words: This is my code, how can I make this working
import {map, latLngBounds, latLng} from 'leaflet';
import { mapboxGL } from 'mapbox-gl-leaflet';
const myMap = map(mapContainer, {
zoom: 9,
maxZoom: 18,
minZoom: 7,
center: [
50.9787,
11.03283
],
maxBounds: latLngBounds(latLng(47.3024876979, 5.98865807458), latLng(54.983104153, 15.0169958839))
});
const gl = mapboxGL({
style: '// some url'
}).addTo(myMap);
jdevos360 commented
Try import 'mapbox-gl-leaflet'
Anubarak commented
Thank you - and how can I then use the function?
const gl = mapboxGL({
style: '// some url'
}).addTo(myMap);
throws an error obviously
jdevos360 commented
import * as L from 'leaflet';
L.mapboxGL({
style: '// some url'
}).addTo(myMap);
Anubarak commented
That will eliminate the ability to treeshake the ESM module - the bundle size will be much larger after my tests.
So I guess there is no way that supports a smaller bundle size?