@rodneylab/sveltekit-map-component

2.0.5 • Public • Published

Rodney Lab sveltekit-components Github banner

Rodney Lab logo

Sveltekit Map Component

sveltekit-map-component

Open in StackBlitz

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.

Package Sidebar

Install

npm i @rodneylab/sveltekit-map-component

Weekly Downloads

1

Version

2.0.5

License

BSD-3-Clause

Unpacked Size

83.7 kB

Total Files

49

Last publish

Collaborators

  • rodneylab