@watergis/svelte-maplibre-valhalla
v3.0.1
Published
This is a svelte component to add valhalla control plugin to maplibre.
Downloads
318
Maintainers
Readme
svelte-maplibre-valhalla
This is a svelte component to add valhalla control for maplibre-gl
Install
npm i @watergis/svelte-maplibre-valhalla
or
yarn add @watergis/svelte-maplibre-valhalla
Usage
See Example.
<script lang="ts">
import {
ValhallaIsochronePanel,
ValhallaRoutingPanel,
type ValhallaIsochroneOptions,
type ValhallaRoutingOptions
} from '$lib';
// create maplibre.Map object
let map = new Map();
let valhallaUrl = 'https://valhalla.water-gis.com';
let valhallaIsochroneOptions: ValhallaIsochroneOptions = {
Contours: [
{
time: 3,
distance: 1,
color: 'ff0000'
},
{
time: 5,
distance: 2,
color: 'ffff00'
},
{
time: 10,
distance: 3,
color: '0000ff'
},
{
time: 15,
distance: 4,
color: 'ff00ff'
}
],
isochrone: {
font: ['Roboto Bold'],
fontSize: 16,
fontHalo: 1,
fontColor: '#000000',
fontHaloColor: '#fff'
}
}
let valhallaRoutingOptions: ValhallaRoutingOptions = {
font: ['Roboto Medium'],
fontSize: 14,
fontHalo: 3,
fontColor: '#263238',
fontHaloColor: '#fff',
iconImage: 'marker',
iconSize: 1
};
</script>
<ValhallaIsochronePanel
bind:map={$map}
bind:url={valhallaUrl}
bind:options={valhallaIsochroneOptions}
/>
<ValhallaRoutingPanel
bind:map={$map}
bind:url={valhallaUrl}
bind:options={valhallaRoutingOptions}
/>
create-svelte
Everything you need to build a Svelte project, powered by create-svelte
.
Creating a project
If you're seeing this, you've probably already done this step. Congrats!
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
Developing
Once you've created a project and installed dependencies with npm install
(or pnpm install
or 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
To create a production version of your app:
npm run build
You can preview the production build with npm run preview
.
To deploy your app, you may need to install an adapter for your target environment.