DEV Community

Cover image for Building a Map Application with MapLibre GL JS and Svelte
Yasunori Kirimoto for MapLibre User Group Japan

Posted on

Building a Map Application with MapLibre GL JS and Svelte

img

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

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

GitHub logo mug-jp / maplibregljs-svelte-starter

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

maplibregljs-svelte-starter

README02

Start MapLibre GL JS and Svelte easily.


blog

Building a Map Application with MapLibre GL JS and Svelte


Usage

README03


Install package

npm install
Enter fullscreen mode Exit fullscreen mode

code format

npm run format
Enter fullscreen mode Exit fullscreen mode

build

npm run build
Enter fullscreen mode Exit fullscreen mode

dev

npm run dev
Enter fullscreen mode Exit fullscreen mode

Unit Tests

npm run test:unit
Enter fullscreen mode Exit fullscreen mode

Lint

npm run lint
Enter fullscreen mode Exit fullscreen mode


README01


License

MIT

Copyright (c) 2023 MapLibre User Group Japan




Japanese


MapLibre GL JS & Svelte スターター

README02

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


blog

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


使用方法

README03


パッケージインストール

npm install
Enter fullscreen mode Exit fullscreen mode

コードフォーマット

npm run format
Enter fullscreen mode Exit fullscreen mode

ビルド

npm run build
Enter fullscreen mode Exit fullscreen mode

開発

npm run dev
Enter fullscreen mode Exit fullscreen mode

Unitテスト

npm run test:unit
Enter fullscreen mode Exit fullscreen mode

リント

npm run lint
Enter fullscreen mode Exit fullscreen mode


README01


ライセンス

MIT

Copyright (c) 2023 MapLibre User Group Japan





Advance Preparation

  • Creating a Svelte project

Svelte #001 – environment setup with create-svelte

img

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


Enter fullscreen mode Exit fullscreen mode

img

Building the map application

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

Overall composition
img

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"
    }
}


Enter fullscreen mode Exit fullscreen mode

/src/routes

+layout.svelte

Delete the existing page and leave the slot tag.



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

<slot />

<style></style>


Enter fullscreen mode Exit fullscreen mode

/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>


Enter fullscreen mode Exit fullscreen mode

/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>


Enter fullscreen mode Exit fullscreen mode

Let's check with a simple local server.



npm run dev


Enter fullscreen mode Exit fullscreen mode

You can display it using a combination of Svelte and MapLibre GL JS!
img

Related Articles

References
MapLibre GL JS
Svelte

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.