DEV Community: MapLibre User Group Japan

We’ve revived MUG-JP Space, which we held monthly in 2023. After writing the 2024 summary, we held seven sessions in total, one each month. Previously, it was only live, but starting this year, we’re archiving episodes as podcasts. Please give them a listen. We’ll be taking a break again starting in August…

MUG-JP Space

MapLibre User Group Japan Space #008

Date: December 26, 2024
MUG-JP 2024 Year in Review

MapLibre User Group Japan Space #009

Date: January 21, 2025
MapLibre Updates & Geospatial Chat for January 2025

MapLibre User Group Japan Space #010

Date: February 25, 2025
MapLibre Updates & Geospatial Chat for February 2025

MapLibre User Group Japan Space #011

Date: March 27, 2025
MapLibre Updates & Geospatial Chat for March 2025

MapLibre User Group Japan Space #012

Date: April 21, 2025
MapLibre Updates & Geospatial Chat for April 2025

MapLibre User Group Japan Space #013

Date: May 27, 2025
MapLibre Updates & Geospatial Chat for April 2025

MapLibre User Group Japan Space #014

Date: June 28, 2025
MapLibre Updates & Geospatial Chat for May 2025

MapLibre User Group Japan Space #015

Date: July 20, 2025
MapLibre Updates & Geospatial Chat for June 2025

Online meetup

We held an online meetup again this year to share trends and technologies related to MapLibre, FOSS4G, and web maps. This was the second time we held the meetup, and we were able to share a variety of knowledge by having more people participate remotely.

MapLibre Meetup Japan #04

Date: March 18, 2025
Participants: 76
Hands-On Session on Svelte MapLibre GL at FOSS4G Hokkaido 2024 | Norihiro Narayama
Prototyping a Web App to Assist OpenStreetMap Receipt Mapping (MUG-JP ver) | Tom Konda
Deep Dive into MapLibre's Japanese Fonts | Kanahiro Iguchi
How to Integrate MapLibre GL JS and deck.gl? [Review Edition] | ALT9800

MapLibre Meetup Japan #05

Date: July 15, 2024
Participants: 88
I wrote a shader to use GeoArrow with MapLibre | Hiroaki Yutani
What I've done and want to do next with Flutter×MapLibre | Ryutaro Iseki
Reviewing DEM RGB Encoding Methods (TerrainRGB/Terrarium/GSI Elevation Tiles) | Kanahiro Iguchi
The Open Data and Backstory Supporting the Expo Maniac Map | K.Sakanoshita

Presenters will receive a MUG-JP pin badge and be added to the MUG-JP Contributors Map!

Other activities

As for other activities, we also gave a talk at related events.

Speaker at "FOSS4G 2024 Hokkaido"

Summary

We looked back on the MapLibre User Group Japan activities in 2025.

We hope that this article has sparked some interest in MUG-JP. Please try using MapLibre products for yourself. We also welcome you to participate in our events.

MUG-JP is a community that works at its own pace, but we will continue our activities relaxedly. We are thinking of holding events online and offline again next year, so if you would like to give a presentation, please get in touch.

Official Web Site
https://mug-jp.org

GitHub
https://github.com/mug-jp

dev.to
https://dev.to/mug-jp

Yasunori Kirimoto for MapLibre User Group Japan

Dec 30 '24

Summary of MapLibre User Group Japan Activities in 2024

#maplibre #foss4g #gis

Comments

4 min read

Yasunori Kirimoto for MapLibre User Group Japan

Dec 29 '23

Summary of MapLibre User Group Japan Activities in 2023

#maplibre #foss4g #gis

Comments

4 min read

Kanahiro Iguchi for MapLibre User Group Japan

Nov 3 '24

Introduction to chiitiler: Serverless Raster Tile Server

Comments

3 min read

Yasunori Kirimoto for MapLibre User Group Japan

Sep 21 '23

Building a Map Application with MapLibre GL JS and Svelte

#maplibre #svelte #gis #foss4g

Comments 1

3 min read

Yasunori Kirimoto for MapLibre User Group Japan

Sep 18 '23

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

#maplibre #vue #vite #foss4g

Comments

3 min read

Summary of MapLibre User Group Japan Activities in 2024

Yasunori Kirimoto — Mon, 30 Dec 2024 13:26:08 +0000

Hello, I’m Yasunori Kirimoto of MapLibre User Group Japan (MUG-JP). In this article, we will introduce the main activities of MUG-JP in 2024.

About MapLibre User Group Japan (MUG-JP)

Please see this article for information about MUG-JP activities up to last year.

Summary of MapLibre User Group Japan Activities in 2023

Yasunori Kirimoto for MapLibre User Group Japan ・ Dec 29 '23

#maplibre #foss4g #gis

Summary of activities in 2024

Official website released

https://mug-jp.org

Until last year, we operated a website on the Notion page, but this year, we acquired a domain and built our own website. On the new website, we are publishing a "MUG-JP Contributors Map" that lists the presenters and management members who have contributed to MUG-JP so far.

Online meetup

MapLibre Meetup Japan #02

Date: April 22, 2024
Participants: 110
MapLibreとAmazon Location Service / Yasunori Kirimoto
Raster Tile Server Created with MapLibre Native / Kanahiro Iguchi
How I Became Friends with Point Cloud Data Using FOSS4G / Yohei Shiwaku(shi-works)
Visualizing Shinjuku Dungeon / Satoshi Komatsu

Offline Meetup

We held our first offline meetup in Tokyo. We have considered this goal since the start of MUG-JP, and it has finally come to fruition.

Another big thing that happened at this meetup was that we negotiated with MapLibre and received support (venue and novelty expenses) as a sponsor.

To continue and expand community activities in each country in the future, it was very important to receive support from the main body. The fact that the claim processing using Open Collective was smooth and that overseas remittance was easy was also a new discovery.

https://bsky.app/profile/nyurik.bsky.social/post/3ldgnsr3bnk26

MapLibre Meetup Japan # 03 @ Tokyo

At this offline event, we filmed a video for the first time. Please take a look.

Digest video of "MapLibre Meetup Japan # 03 @ Tokyo"

Session video of "State of Open Source Web Mapping Libraries / Yasunori Kirimoto"

Other activities

As for other activities, we also gave a talk at related events.

Speaker at "FOSS4G 2024 Japan"

youtube.com

Summary

We looked back on the MapLibre User Group Japan activities in 2024.

We hope that this article has sparked some interest in MUG-JP. Please try using MapLibre products for yourself. We also welcome you to participate in our events.

Official Web Site
https://mug-jp.org

GitHub
https://github.com/mug-jp

dev.to
https://dev.to/mug-jp

Yasunori Kirimoto for MapLibre User Group Japan ・ Dec 29 '23

#maplibre #foss4g #gis

Introduction to chiitiler: Serverless Raster Tile Server

Kanahiro Iguchi for MapLibre User Group Japan ・ Nov 3 '24

Building a Map Application with MapLibre GL JS and Svelte

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

#maplibre #svelte #gis #foss4g

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

Building a Map Application with MapLibre GL JS and Amazon Location Service API key functionality

Yasunori Kirimoto for AWS Heroes ・ Sep 26 '23

#maplibre #amazonlocationservice #aws #foss4g

Introduction to chiitiler: Serverless Raster Tile Server

Kanahiro Iguchi — Sun, 03 Nov 2024 03:28:37 +0000

Raster Tile Server needs server!

There are some implementations for raster tile server - MapServer, TileserverGL...
To launch, those servers need persisted server instance like AWS EC2 or Fargate.

These runtimes are great but have limitation on scaling and need more manual settings, comparing to AWS Lambda. In tile server, many requests occur at simultaneously and it is better to run on runtime more scalable like Lambda.

chiitiler: Serverless Tile Server

https://github.com/Kanahiro/chiitiler

My implementation "chiitiler" is designed to be able to run on AWS Lambda. Lambda Web Adapter enables for container images to run on Lambda and chiitiler utilizes it. Following is demo on AWS Lambda.

https://spatialty-io.github.io/chiitiler-demo/

Usage

You can use container image.

# most simple settings
docker run -p 3000:3000 -d \
-e CHIITILER_CACHE_METHOD=memory \
-e CHIITILER_DEBUG=true \
ghcr.io/kanahiro/chiitiler
# running server: http://localhost:3000

# example: use s3cache
docker run -p 3000:3000 -d \
-e CHIITILER_CACHE_METHOD=s3 \
-e CHIITILER_S3CACHE_BUCKET=bucketname \
-e CHIITILER_S3_REGION=ap-northeast-1 \
ghcr.io/kanahiro/chiitiler
# running server: http://localhost:3000
# debug page: http://localhost:3000/debug

Key concept of chiitiler

The key concept of chiitiler is "input: MapLibre Style, output: Raster Tile".

Traditional raster tile servers like TileserverGL define map styles at launching and defnitions like MapFile or style.json are stored in the server.

On the otherhand, I have used TiTiler for serving Cloud Optimized GeoTIFF(COG).

https://developmentseed.org/titiler/

This server accepts "url of COG" and respond raster tiles. This interface that content of tile is defined on request time has much flexibility than servers with pre-defined styles.

Referencing this, I defined interface of chiitiler like this:

http://localhost:3000/tiles/0/0/0.png?url=https://tile.openstreetmap.jp/styles/osm-bright/style.json
# you can pass stylejson via request-body in POST-method

On each request, chiitiler loads style.json and retrieve assets like tiles, sprites, glyphs. This interface provides great flexibilty for clients! Besides, this means chiitiler doesn't depends on file system and then it is easy to run on serverless runtimes.

Of course, this implementation has "penalty" in performance because data fetching is needed before rendering tile but have mecahnism to compensate this.

Protocols

Protocols chiitiler supports:

http://
https://
s3://
file://
mbtiles://
pmtiles://
cog:// (experimental)

These can be used in source in style.json. There are no other expansion to Style Specification. You can write stylejson like following, this is cool.

{
  "version": "8",
  "sources": {
    "dir": {
      "type": "vector",
      "tiles": [
        "file://localdata/tiles/{z}/{x}/{y}.pbf"
      ],
      "maxzoom": 6
    },
    "mbtiles": {
      "type": "vector",
      "tiles": [
        "mbtiles://localdata/school.mbtiles/{z}/{x}/{y}"
      ],
      "maxzoom": 10
    },
    "pmtiles": {
      "type": "vector",
      "tiles": [
        "pmtiles://localdata/school.pmtiles/{z}/{x}/{y}"
      ],
      "maxzoom": 10
    },
    "s3": {
      "type": "vector",
      "tiles": [
        "s3://tiles/{z}/{x}/{y}.pbf"
      ],
      "maxzoom": 6
    },
    "cog": {
      "type": "raster",
      "tiles": [
        "cog://https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/54/T/WN/2024/9/S2A_54TWN_20240908_0_L2A/TCI.tif/{z}/{x}/{y}"
      ],
      "tileSize": 256
    }
  },
  "layers": []
}

Architecture and features

Architecture of chiitiler

Support AWS S3

chiitiler designed to nicely run on AWS Lambda with supporting AWS S3 as datasource. The latency between Lambda and S3 is so small that the "penalty" to retrieve assets on each request become reasonable. This is more useful by combining PMTiles with S3.

File Caching

When retrieve assets not from AWS S3, you can cache them in the method you defined: Filesystem, Memory, AWS S3 and None. I strongly recommend AWS S3 with the reason I've already explaned above.

This caching is very important on performance because many assets are needed to render one tile and many of them are repeatedly needed to render another. The demo retrieves assets from japan.openstreetmap.jp and cache them to AWS S3.

only few hundred milliseconds are needed to dynamically render tiles

On the otherhand, rendered tile cache is not implemented and there is no plan to do because it is better that rendered tiles are cached by CDN.

Conclusion

chiitiler enables you launch raster tile server on AWS Lambda - serverless runtime. Lambda has great scalability and it is very important in tileserver which accepts many requests. Please use chiitiler and feedback me your thoughts!

Summary of MapLibre User Group Japan Activities in 2023

Yasunori Kirimoto — Fri, 29 Dec 2023 17:26:28 +0000

Hello, I’m Yasunori Kirimoto of MapLibre User Group Japan.

Here is a summary of MapLibre User Group Japan activities in 2023!

The Beginning of MapLibre User Group Japan (MUG-JP)

In August 2022, at FOSS4G 2022 Firenze, I met MapLibre members in person, with whom I had previously only connected online. This meeting gave me a strong desire to promote MapLibre more widely.

In December 2022, coordinator Oliver asked me, "Can I send you MapLibre SWAG? And can you become a MapLibre Ambassador?" I replied that I would like to create a MapLibre user group.

During the discussion with Oliver, I invited Kanahiro Iguchi, and we decided to start a community together. In January 2023, we launched "MapLibre User Group Japan." This user group aims to be a worldwide MapLibre community.

We named our user group "MapLibre User Group …" in the hope that we can expand it to various countries and regions around the world. As a result of this initiative, we now receive inquiries from abroad about establishing user groups.

About MapLibre User Group Japan (MUG-JP)

MapLibre User Group Japan (MUG-JP) is a user community by developers of MapLibre products. We promote MapLibre by sharing knowledge and organizing events. We are "MUG-JP" for short! Please use the hashtag "#mugjp" on X (Twitter)!

Management Members

MUG-JP is run by geospatial enthusiasts at their own pace! Also, members can vote for the main body as MapLibre Voting Member.

Yasunori Kirimoto
Geospatial Architect
MapLibre Voting Member
X: @dayjournal_
GitHub: @dayjournal
LinkedIn: @yasunori-kirimoto

Kanahiro Iguchi
GIS/OSS Enthusiast
MapLibre Voting Member
X: @kanahiro_iguchi
GitHub: @Kanahiro
LinkedIn: @kanahiro-iguchi

X(Twitter) Space Held Monthly

So far, we have held seven regular events at X(Twitter)Space, and 210 people have attended! We mainly explained MapLibre products and introduced updates and planned activities. We invited guests as well.

MapLibre User Group Japan Space #001

Date: February 1, 2023
Participants: 47
MapLibre User Group Japan Introduction

MapLibre User Group Japan Space #002

Date: March 1, 2023
Participants: 21
Product introduction "MapLibre GL JS”

MapLibre User Group Japan Space #003

Date: April 5, 2023
Participants: 32
Guest talk by "Taro Matsuzawa”

MapLibre User Group Japan Space #004

Date: May 10, 2023
Participants: 32
Product introduction "MapLibre Native”

MapLibre User Group Japan Space #005

Date: June 14, 2023
Participants: 24
Product introduction: "Martin”

MapLibre User Group Japan Space #006

Date: July 05, 2023
Participants: 15
Product Introduction "maplibre-rs"

MapLibre User Group Japan Space #007

Date: August 02, 2023
Participants: 39
Guest talk by "Naoki Ohashi"

Online Meetup

MUG-JP hosted its first online meetup to share trends and technologies related to MapLibre, FOSS4G, and web maps!

MapLibre Meetup Japan #01

Date: November 9, 2023
Participants: 102
Easy Vector Tile Distribution Starting with GitHub Actions
MapLibre GL JS Promotion Activities and Tips for Beginners
Introduction to Martin Tile Server
Using Terrain Tiles from Amazon with MapLibre GL JS

Other Activities

Other activities included MTG with MapLibre and speaking at related events!

Official Website

Please check out our Official Website to see the daily activities of MUG-JP!

https://bit.ly/mug--jp

Connpass

You can check the MUG-JP event information on Connpass! Up to now, 111 people have registered on Connpass.

https://mug-jp.connpass.com

GitHub

Please check out the organization on GitHub for various MapLibre plugins, libraries, and starters!

https://github.com/mug-jp

Plugins

maplibre-gl-temporal-control

maplibre-gl-opacity

Libraries

maplibre-gl-gsi-terrain

Starter

maplibregljs-starter

maplibregljs-turf-starter

maplibregljs-svelte-starter

maplibregljs-vue-starter

martin-starter

maplibregljs-amazon-location-service-starter

maplibregljs-amazon-location-service-place-indexes-starter

Qiita

Qiita has a MapLibre use case blog in Japanese, so please check it out! It introduces the GitHub repository and posts articles about use cases.

https://qiita.com/organizations/mug-jp

dev.to

dev.to has a MapLibre use case blog in English, so please check it out! It introduces the GitHub repository and posts articles about use cases.

https://dev.to/mug-jp

SWAG

We are distributing official SWAG stickers and magnet sheets. We also made T-shirts for members.

We hope this article will make you interested in MUG-JP. Please try to touch MapLibre products. And we hope you will join us at our events!

We have just started this community but hope to continue it.

Lastly, we would like to hold an offline event in Tokyo next year!!

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

#maplibre #svelte #gis #foss4g

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

Building a Map Application with MapLibre GL JS and Amazon Location Service API key functionality

Yasunori Kirimoto for AWS Heroes ・ Sep 26 '23

#maplibre #amazonlocationservice #aws #foss4g

Building a Map Application with MapLibre GL JS and Svelte

Yasunori Kirimoto — Thu, 21 Sep 2023 10:56:21 +0000

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>

Let's check with a simple local server.

npm run dev

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

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

#maplibre #vue #vite #foss4g

Vite Support for Various Map Library Starters

Yasunori Kirimoto for AWS Heroes ・ Jun 29 '22

#amazonlocationservice #maplibre #leaflet #vite

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

Yasunori Kirimoto for MIERUNE ・ Dec 23 '22

#watercooler

Trying Out Various Turf.js

Yasunori Kirimoto for MIERUNE ・ Jul 19 '23

#turf #turfjs #foss4g #gis

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

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

Yasunori Kirimoto — Mon, 18 Sep 2023 10:02:02 +0000

I built a development environment combining MapLibre GL JS and Vue.js (script setup) 🎉

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

mug-jp / maplibregljs-vue-starter

Start MapLibre GL JS and Vue.js easily. [MapLibre GL JS, Vue.js, Vite]

maplibregljs-vue-starter

Start MapLibre GL JS and Vue.js easily.

MapLibre GL JS v3.3.1
Vue.js v3.3.4
node v20.6.1
npm v9.8.1

blog

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

Usage

Install package

npm install

code format

npm run format

build

npm run build

dev

npm run dev

Unit Tests

npm run test:unit

End-to-End Tests

npm run test:e2e:dev

Lint

npm run lint

License

MIT

Japanese

MapLibre GL JS & Vue.js スターター

MapLibre GL JSとVue.jsを手軽に始める

MapLibre GL JS v3.3.1
Vue.js v3.3.4
node v20.6.1
npm v9.8.1

blog

MapLibre GL JSとVue.js(script setup)を組み合わせた開発環境を構築してみた

使用方法

パッケージインストール

npm install

コードフォーマット

npm run format

ビルド

npm run build

開発

npm run dev

Unitテスト

npm run test:unit

E2Eテスト

npm run test:e2e:dev

リント

npm run lint

ライセンス

MIT

View on GitHub

Advance Preparation

Creating a Vue.js project

Vue.js #006 - environment setup with create-vue

Execution environment

node v20.6.1
npm v9.8.1

Install MapLibre GL JS

Install MapLibre GL JS into your Vue.js 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-vue-starter",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "test:unit": "vitest",
    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "keywords": [],
  "author": "MapLibre User Group Japan",
  "license": "ISC",
  "dependencies": {
    "maplibre-gl": "^3.3.1",
    "pinia": "^2.1.6",
    "vue": "^3.3.4",
    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@tsconfig/node18": "^18.2.2",
    "@types/jsdom": "^21.1.2",
    "@types/node": "^18.17.15",
    "@vitejs/plugin-vue": "^4.3.4",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/test-utils": "^2.4.1",
    "@vue/tsconfig": "^0.4.0",
    "cypress": "^13.2.0",
    "eslint": "^8.49.0",
    "eslint-plugin-cypress": "^2.14.0",
    "eslint-plugin-vue": "^9.17.0",
    "jsdom": "^22.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^3.0.3",
    "start-server-and-test": "^2.0.0",
    "typescript": "~5.1.6",
    "vite": "^4.4.9",
    "vitest": "^0.34.4",
    "vue-tsc": "^1.8.11"
  }
}

/src

App.vue

Remove the existing page and use only the router.

<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>

<template>
  <RouterView />
</template>

<style scoped></style>

/src/assets

main.css

Reset existing CSS in App.vue.

@import './base.css';

html,
body,
#app {
  color: black;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

/src/router

index.ts

Change the existing router to HomeView only.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    }
  ]
})

export default router

/src/views

HomeView.vue

Change to load the map component.

<script setup lang="ts">
import MapPane from '../components/MapPane.vue'
</script>

<template>
  <main>
    <MapPane />
  </main>
</template>

/src/components

MapPane.vue

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 { onMounted } from 'vue'

onMounted(() => {
  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>

<template>
  <div id="map"></div>
</template>

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