Sveltekit Map Component

sveltekit-map-component

Library of TypeScript friendly SvelteKit components for adding functionality to your SvelteKit apps.

Setup

To install the package run

pnpm add -D @rodneylab/sveltekit-components @rodneylab/sveltekit-map-component
pnpm add --save-peer leaflet

Components

Map

Add a map to your SvelteKit site using Mapbox with OpenStreetMap and LeafletJS. Requires a Mapbox access token, just add it your to the .env file in your project:

PUBLIC_MAPBOX_ACCESS_TOKEN=your.token

Add the component to a .svelte file in your project:

<script>
    import { Map } from '@rodneylab/sveltekit-map-component';
    const latitude = 51.50162;
    const longitude = -0.14115;
    const zoom = 16;
    const location = { latitude, longitude };
</script>

<Map
    id="my-map"
    {location}
    {zoom}
    importance="high"
    markerMarkup="<p>We are <strong>here</strong>!</p>"
/>

Further Info

To create your own SvelteKit component library see the video on creating a SvelteKit component library. Drop a comment on that page if you have a question.

Feel free to jump into the Rodney Lab matrix chat room.