Create account

DEV Community

Yasunori Kirimoto for MapLibre User Group Japan

Posted on Sep 21, 2023

Building a Map Application with MapLibre GL JS and Svelte

#maplibre #svelte #gis #foss4g

I built a development environment combining MapLibre GL JS and Svelte 🎉

The created environment is available on GitHub. Please use it!

mug-jp / maplibregljs-svelte-starter

Start MapLibre GL JS and Svelte easily. [MapLibre GL JS, Svelte, Vite]

maplibregljs-svelte-starter

Start MapLibre GL JS and Svelte easily.

MapLibre GL JS v3.3.1
Svelte v4.0.5
node v20.6.1
npm v9.8.1

blog

Building a Map Application with MapLibre GL JS and Svelte

Usage

Install package

npm install

code format

npm run format

build

npm run build

dev

npm run dev

Unit Tests

npm run test:unit

Lint

npm run lint

License

MIT

Japanese

MapLibre GL JS & Svelte スターター

MapLibre GL JSとSvelteを手軽に始める

MapLibre GL JS v3.3.1
Svelte v4.0.5
node v20.6.1
npm v9.8.1

blog

MapLibre GL JSとSvelteを組み合わせた開発環境を構築してみた

使用方法

パッケージインストール

npm install

コードフォーマット

npm run format

ビルド

npm run build

開発

npm run dev

Unitテスト

npm run test:unit

リント

npm run lint

ライセンス

MIT

View on GitHub

Advance Preparation

Creating a Svelte project

Svelte #001 – environment setup with create-svelte

Execution environment

node v20.6.1
npm v9.8.1

Install MapLibre GL JS

Install MapLibre GL JS into your Svelte project.



npm install maplibre-gl

Building the map application

Finally, let's build the actual map application. Change or delete some files from the template.

Overall composition

package.json



{
    "name": "maplibregljs-svelte-starter",
    "version": "1.0.0",
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "test": "npm run test:integration && npm run test:unit",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --plugin-search-dir . --check . && eslint .",
        "format": "prettier --plugin-search-dir . --write .",
        "test:integration": "playwright test",
        "test:unit": "vitest"
    },
    "keywords": [],
    "author": "MapLibre User Group Japan",
    "license": "ISC",
    "devDependencies": {
        "@fontsource/fira-mono": "^4.5.10",
        "@neoconfetti/svelte": "^1.0.0",
        "@playwright/test": "^1.28.1",
        "@sveltejs/adapter-auto": "^2.0.0",
        "@sveltejs/kit": "^1.20.4",
        "@types/cookie": "^0.5.1",
        "@typescript-eslint/eslint-plugin": "^6.0.0",
        "@typescript-eslint/parser": "^6.0.0",
        "eslint": "^8.28.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-svelte": "^2.30.0",
        "prettier": "^2.8.0",
        "prettier-plugin-svelte": "^2.10.1",
        "svelte": "^4.0.5",
        "svelte-check": "^3.4.3",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^4.4.2",
        "vitest": "^0.32.2"
    },
    "type": "module",
    "dependencies": {
        "maplibre-gl": "^3.3.1"
    }
}

/src/routes

+layout.svelte

Delete the existing page and leave the slot tag.



<script lang="ts">
    import './styles.css';
</script>

<slot />

<style></style>

/src/routes

+page.svelte

Change to load the map component.



<script lang="ts">
    import Map from '$lib/components/MapPane.svelte';
</script>

<svelte:head>
    <title>MapLibre GL JS & Svelte Starter</title>
    <meta name="description" content="MapLibre GL JS & Svelte Starter" />
</svelte:head>

<Map />

<style></style>

/src/lib/components

MapPane.svelte

Create a new MapLibre GL JS map component.



<script setup lang="ts">
    import 'maplibre-gl/dist/maplibre-gl.css';
    import { Map, NavigationControl } from 'maplibre-gl';
    import { onMount } from 'svelte';

    onMount(() => {
        const map = new Map({
            container: 'map',
            style: {
                version: 8,
                sources: {
                    MIERUNEMAP: {
                        type: 'raster',
                        tiles: ['https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png'],
                        tileSize: 256,
                        attribution:
                            "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
                    }
                },
                layers: [
                    {
                        id: 'MIERUNEMAP',
                        type: 'raster',
                        source: 'MIERUNEMAP',
                        minzoom: 0,
                        maxzoom: 18
                    }
                ]
            },
            center: [139.767, 35.681],
            zoom: 11
        });

        map.addControl(
            new NavigationControl({
                visualizePitch: true
            })
        );
    });
</script>

<div id="map" />

<style>
    #map {
        height: 100vh;
    }
</style>