Replies: 7 comments
-
|
How do you compile an html file as typescript? This is strange... |
Beta Was this translation helpful? Give feedback.
-
I compile the mymap.ts file to mymap.min.js and have that javascript file loaded by the html page. |
Beta Was this translation helpful? Give feedback.
-
|
I think most folks also use some sort of bundler, but it seems like this should work. I've never used an importmap though. It might be somewhat complicated by "Map" already existing though. Have you tried aliasing the import?
|
Beta Was this translation helpful? Give feedback.
-
|
importmap is needed to be able to use a CDN, otherwise the import always looks for a local file. I've simplified the problem, because it looks like it has nothing to do with typescript. <html>
<head>
<script type="importmap">
{
"imports": {
"maplibre-gl": "https://unpkg.com/maplibre-gl@4.1.1/dist/maplibre-gl.js"
}
}
</script>
<script type="module">
import { Map } from 'maplibre-gl';
new Map({
container: 'map',
style: 'https://demotiles.maplibre.org/style.json',
center: [-74.5, 40],
zoom: 9
});
</script>
</head>
<body>
<section id="map">
</section>
</body>
</html>This should work, but doesn't as it cannot find 'Map'. An alias doesn't solve it either. results in a module M that exists, but that module does not contain M.Map() or M.default.Map(). I think something is going wrong with exports in the maplibre-gl library. |
Beta Was this translation helpful? Give feedback.
-
|
The following will work due to how maplibre package is built: <html>
<head>
<script type="importmap">
{
"imports": {
"maplibre-gl": "https://unpkg.com/maplibre-gl@4.1.1/dist/maplibre-gl.js"
}
}
</script>
<script type="module">
import 'maplibre-gl';
new maplibregl.Map({
container: 'map',
style: 'https://demotiles.maplibre.org/style.json',
center: [-74.5, 40],
zoom: 9
});
</script>
</head>
<body>
<section id="map">
</section>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
See also: |
Beta Was this translation helpful? Give feedback.
-
|
For anyone else struggling to get this to work I had to do: |
Beta Was this translation helpful? Give feedback.
-
Software:
I'm trying to reproduce this example in Typescript using this import example.
mymap.ts:
index.htm:
Typescript compiles, but the browser gives the error import not found: Map
I've also tried (while using
new maplibregl.Map()instead ofnew Map()):Is something going wrong with the exports?
Beta Was this translation helpful? Give feedback.
All reactions