Svelte local gpx viewer(0.1.2-1738168678815)

A small local-first GPX / geoJSON routes viewer

Demo

Locally saved routes: (0)
  • No routes

Documentation

This lib exposes

Svelte Components:

  • load GPX/GeoJson routes files (local first, persisted in browser’s indexedDB)
  • list the loaded routes (and hide/show, delete them)
  • display the routes on a map (using svelte-maplibre)

Lib:

  • a runes-based shared state, exposing reactive values and methods to interact with the state
  • a TS type for the routes

See the demo above for a quick overview.

This can be handy for hikers, bikepackers, travellers, outdoor enthusiasts or if you want to build an app for these users.

Components and Dataflow

dataflow of the components

Installation

Npm install the package

# via npm registry
npm install svelte-local-gpx-viewer

# via github repo (no build artifacts, you'll have to build the lib yourself)
npm install 0gust1/svelte-local-gpx-viewer

Usage with Svelte/Sveltekit

All the components:

<script lang="ts">
	import { GpxLoad, LocalRoutesList, MapLibreWrapper } from 'svelte-local-gpx-viewer';
</script>

<div>
	<div>
		<GpxLoad />
	</div>
	<div>
		<LocalRoutesList />
	</div>
</div>

<div>
	<MapLibreWrapper />
</div>

If you don’t want to use the MapLibreWrapper component, you can use the store exposed by the lib to get the routes and display them on your own map component.

<script lang="ts">
	// import the store, it will be populated with the routes
	import { liveGeoJSONRoutes } from 'svelte-local-gpx-viewer';
</script>

<!-- Use the store in your app -->
<ul>
	{#each ($liveGeoJSONRoutes || []) as route (route.id)}
	<li>
		<p>{route.name}</p>
		<details>
			<summary>Route GeoJSON</summary>
			<pre>{JSON.stringify(route.data, null, 2)}</pre>
		</details>
	</li>
	{/each}
</ul>

Usage with Vanilla JS

TODO: test case to write and document