DEV Community

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

Posted on

Building a Map Application with MapLibre GL JS and Svelte

#maplibre #svelte #gis #foss4g

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



View on GitHub


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

MapLibre User Group Japan

Building a Map Application with MapLibre GL JS and Vue.js (script setup)

Yasunori Kirimoto for MapLibre User Group Japan ・ Sep 18 '23

#maplibre #vue #vite #foss4g
AWS Heroes

Vite Support for Various Map Library Starters

Yasunori Kirimoto for AWS Heroes ・ Jun 29 '22

#amazonlocationservice #maplibre #leaflet #vite
MIERUNE

COMTiles (Cloud Optimized Map Tiles) hosted on Amazon S3 and Visualized with MapLibre GL JS

Yasunori Kirimoto for MIERUNE ・ Dec 23 '22

#foss4g #maplibre #s3 #cloudoptimized
MIERUNE

Trying Out Various Turf.js

Yasunori Kirimoto for MIERUNE ・ Jul 19 '23

#turf #turfjs #foss4g #gis
AWS Heroes

Amazon Location Service and AWS Amplify to Use Various Map Library

Yasunori Kirimoto for AWS Heroes ・ Jan 5 '23

#amazonlocationservice #amplify #aws #foss4g

References
MapLibre GL JS
Svelte

Top comments (1)

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

Read next

saumyashah40 profile image

How Pod Creation Happens in Kubernetes? Understand Full K8s Workflow

Saumya Shah -

tak089 profile image

The different types of neural networks

Taki089.Dang -

talonx profile image

How to Configure a Remote Data Store for Prometheus

Hrish B -

doxa_dev profile image

QR Code Generator Using HTML, CSS, and JavaScript

Doxa Social -