typescriptsveltesveltekitmapkit-js

How to import and use @types/apple-mapkit-js-browser in Sveltekit?

Newbie here. I have imported lots of other modules and used them successfully. But I am trying to important this type definition for Apple MapKit JS. It defines a namespace mapkit and then the BoundingRegion type inside of that. I know how to import the module into my project using npm cli. But I am stuck on the exact syntax to use in the ts block of my component so that I can import the BoundingRegion type and create an instance of it.

I have tried about 5 different permutations of the import, with braces, without braces, with a mapkit prefix and without, instantiating with and without prefix. But I always get errors. i.e. import BoundingRegion from "@types/apple-mapkit-js-browser"; let br = new BoundingRegion( 1.0, 2.0, 3.0, 4.0);

gives

TypeError: __vite_ssr_import_5__.default is not a constructor

Any ideas?

Solution

  • The official Mapkit is not a proper module at all. The types package only contains type information, not the implementation, so you cannot construct anything from it.

    Mapkit defines a global mapkit variable on import, you can e.g. import it in onMount, this also prevents SSR errors, as Mapkit will not work on the server.

    onMount(async () => {
    // can also be a local instance of the script file
    await import('https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js');

    // mapkit should be defined from here
});