smat

svelte-mapbox-ts (SMAT)

SMAT is a really minimal svelte implementation of mapbox-gl, written in Typescript. Based on https://gitlab.com/jailbreak/svelte-mapbox-gl/-/tree/master.

Usage

Install SMAT: yarn add smat.

Example:

<script lang="ts">
	import { LngLat } from 'mapbox-gl';
	import { Map, Marker } from 'smat';

	const startingLocation = new LngLat(-79.347015, 43.6532);
</script>

<div>
	<Map accessToken="YOUR_ACCESS_TOKEN" options={{ center: startingLocation, zoom: 10 }}>
		<Marker coordinates={startingLocation} />
	</Map>
</div>

<style>
	div {
		width: 1000px;
		height: 500px;
	}
</style>

Result:

Note: you must wrap the map in something with a width and height, since it's defaulting to 100% for both.

Development

Once you've created a project and installed dependencies with yarn, start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

Just run:

yarn package

This will build the contents of the src/lib folder.