DEV Community: MIERUNE

Building the Yamaokaya Map (Unofficial)

Yasunori Kirimoto — Tue, 10 Feb 2026 12:35:42 +0000

About Yamaokaya Map (Unofficial)

Do you know about the wonderful ramen chain “Ramen Yamaokaya” in Japan?

Ramen Yamaokaya is a nationwide ramen chain founded in 1988 in Ushiku City, Ibaraki Prefecture, Japan. It's known for its rich tonkotsu broth and for allowing you to freely customize noodle firmness, flavor intensity, and fat content. Many locations are open 24 hours, making it beloved by truck drivers and night shift workers. I myself have been a fan for over 20 years. My home store is the legendary “Minami 2-jo Store” in Sapporo. I always order the shoyu ramen with less fat.

Last year's AWS Summit Japan 2025 inspired me to think about how I could support Yamaokaya within my area of expertise.

// Detect dark theme var iframe = document.getElementById('tweet-1937737622954381592-60'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1937737622954381592&theme=dark" }

So, I built an unofficial web application called “Yamaokaya Map.” This map lets you view store information for Ramen Yamaokaya locations nationwide.

https://yama.dayjournal.dev

This app supports PWA, so you can add it to your smartphone's home screen.

How to add:

iOS (Safari): Share button → “Add to Home Screen.”
Android (Chrome): Menu → “Add to Home Screen.”

Ramen Yamaokaya Store Types

Ramen Yamaokaya has four store types.

1. Ramen Yamaokaya
The standard Yamaokaya. Offers classic tonkotsu-based menu items. There are over 150 locations nationwide. I always order the Shoyu Ramen.

2. Niboshi Ramen Yamaokaya
A specialty shop serving niboshi (dried sardine) broth ramen. You can enjoy a different flavor profile from the standard Yamaokaya. I'm not a fan of niboshi, so I've actually never been.

3. Miso Ramen Yamaokaya
A shop specializing in miso ramen, known for its rich miso soup. Here, I recommend ordering the Shoyu Ramen deliberately. There are only 3 locations, all in Hokkaido.

4. Gyoza no Yamaokaya
A new concept store focusing on gyoza. There's only one location in all of Japan, located in Sapporo.

The map released this time uses icons to distinguish these four store types, and you can toggle their display on or off via layer switching.

Advance Preparation

Contacting the Official Website

Since I was going to perform scraping this time, I checked with the official website beforehand. They gave me a very warm response. Thanks to that, I immediately wanted to go eat there again.

Data Acquisition and Processing

This time, I'll use Python for scraping. I'll combine Playwright, pandas, and geopy to acquire and process the data.

Scraping: Playwright
Data Processing: pandas
DMS→DD Conversion: geopy

yamaokaya-data
└── script
    ├── scrape_yamaokaya.py
    ├── latlon_yamaokaya.py
    ├── column_yamaokaya.py
    ├── csv2geojson.py

Map Application

First, fork the Amazon Location Service v2 starter template. Then, add the files and code needed for the Yamaokaya Map.

MapLibre GL JS & Amazon Location Service Starter

Execution environment

node v24.4.1
npm v11.4.2

yamaokaya-map
├── LICENSE
├── README.md
├── dist
│   └── index.html
├── img
│   ├── README01.gif
│   ├── README02.png
│   └── README03.png
├── index.html
├── package-lock.json
├── package.json
├── public
│   ├── manifest.json
│   ├── data
│   │   ├── yama.geojson
│   │   ├── niboshi.geojson
│   │   ├── miso.geojson
│   │   └── gyouza.geojson
│   └── icons
│       ├── yama.png
│       ├── niboshi.png
│       ├── miso.png
│       └── gyouza.png
├── src
│   ├── main.ts
│   ├── style.css
│   └── vite-env.d.ts
├── tsconfig.json
└── vite.config.ts

Install the package

npm install

Publishing Settings in Amplify Gen2

Using the starter repository I forked, I’ll publish it on GitHub in the Amplify Console (Gen2), referencing an article I wrote previously.

https://memo.dayjournal.dev/memo/aws-amplify-016

Data Acquisition and Processing

Scraping

The script scrapes store information from the official website. Since the official site dynamically generates content, I use Playwright to control the browser and retrieve the data. From each store's detail page, I extract the store name, address, phone number, business hours, parking information, seat types, shower room availability, the detail page URL, and the store's location information.

Example of retrieving the store name

from playwright.sync_api import sync_playwright
import pandas as pd

def scrape_yamaokaya_shops():
    shops = []
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=True)
        context = browser.new_context(
            user_agent='Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
        )
        context.set_default_timeout(10000)
        context.set_default_navigation_timeout(10000) 
        page = context.new_page()
        main_url = "https://www.yamaokaya.com/shops/"
        page.goto(main_url, wait_until='networkidle', timeout=10000)
        page.wait_for_timeout(5000)
        shop_links = page.eval_on_selector_all(
            'a[href*="/shops/"]',
            'els => [...new Set(els.map(el => el.href).filter(href => /shops\\/\\d+/.test(href)))]'
        )
        for url in shop_links:
            try:
                page.goto(url, wait_until='domcontentloaded', timeout=10000)
                page.wait_for_timeout(5000)
                name = page.evaluate("""() => {
                    const h = document.querySelector('h2, h1, .shop-name');
                    return h?.innerText?.trim() || document.title.split('|')[0].trim();
                }""")
                shops.append({'url': url, 'name': name or '不明'})
            except Exception as e:
                shops.append({'url': url, 'name': 'エラー'})
        browser.close()    
    return pd.DataFrame(shops)

if __name__ == "__main__":
    df = scrape_yamaokaya_shops()
    df.to_csv('yamaokaya_shops.csv', index=False, encoding='utf-8-sig')

DMS→DD Conversion

The location data scraped is in DMS (degrees, minutes, seconds) format. To display it with the map library, I convert it to DD format (decimal degrees). I use geopy to handle multiple conversion patterns.

Example of DMS→DD conversion

from typing import Tuple
from geopy import Point
# 変換前 "43°03'28.6""N 141°21'22.2""E"
def _convert_with_geopy(dms_string: str) -> Tuple[float, float]:
    cleaned = dms_string.replace('""', '"')
    point = Point(cleaned)
    return point.latitude, point.longitude

Column Name Change

Before converting the data to GeoJSON, I change Japanese column names to English.

Example of column name change

column_mapping = {
    '店舗名': 'store_name',
    '住所': 'address',
    '電話番号': 'phone_number',
    '営業時間': 'business_hours',
    '駐車場': 'parking',
    '座席の種類': 'seating_types',
    'シャワー室': 'shower_room',
    'その他': 'other_info'
}
df_renamed = df.rename(columns=column_mapping)

CSV to GeoJSON Conversion

Finally, I convert the CSV to GeoJSON format. Files are output separately for each store type.

Example of CSV to GeoJSON conversion

import json
import pandas as pd
def create_geojson_features(df):
    features = []
    for _, row in df.iterrows():
        properties = {}
        for col in df.columns:
            if col not in ['lat', 'lon']:
                value = row[col]
                if pd.isna(value):
                    properties[col] = None
                else:
                    properties[col] = str(value)
        feature = {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [row['lon'], row['lat']]
            },
            "properties": properties
        }
        features.append(feature)
    return features

GeoJSON output result

{
    "type": "Feature",
    "geometry": {
    "type": "Point",
    "coordinates": [
        141.3561,
        43.0579
    ]},
    "properties": {
        "store_name": "ラーメン山岡家 南2条店",
        "details": "https://www.yamaokaya.com/shops/1102/",
        "address": "札幌市中央区南2条西１丁目6-1",
        "phone_number": "(011) 242-4636",
        "business_hours": "5:00－翌4:00",
        "parking": "なし",
        "seating_types": "カウンター席: 13",
        "shower_room": "なし",
        "other_info": "まちなかのちいさなお店です。"
    }
},

Creating the Map Application

Setting the Background Map

For this project, I use MapLibre GL JS as the map library and Amazon Location Service for the background map.

import './style.css';
import 'maplibre-gl/dist/maplibre-gl.css';
import 'maplibre-gl-opacity/dist/maplibre-gl-opacity.css';
import maplibregl from 'maplibre-gl';
import OpacityControl from 'maplibre-gl-opacity';

const region = import.meta.env.VITE_REGION;
const mapApiKey = import.meta.env.VITE_MAP_API_KEY;
const mapName = import.meta.env.VITE_MAP_NAME;

const map = new maplibregl.Map({
    container: 'map',
    style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${mapApiKey}`,
    center: [138.0000, 38.5000],
    zoom: baseZoom,
    maxZoom: 20
});

Layer Configuration

I set up layers for each store type and assign custom icons to them.

interface LayerConfig {
    name: string;
    iconPath: string;
    iconId: string;
    visible: boolean;
}
const layerConfigs: Record<string, LayerConfig> = {
    'gyouza': {
        name: '餃子の山岡家',
        iconPath: 'icons/gyouza.png',
        iconId: 'gyouza-icon',
        visible: true
    },
    'miso': {
        name: '味噌ラーメン山岡家',
        iconPath: 'icons/miso.png',
        iconId: 'miso-icon',
        visible: true
    },
    'niboshi': {
        name: '煮干しラーメン山岡家',
        iconPath: 'icons/niboshi.png',
        iconId: 'niboshi-icon',
        visible: true
    },
    'yama': {
        name: 'ラーメン山岡家',
        iconPath: 'icons/yama.png',
        iconId: 'yama-icon',
        visible: true
    }
};

Adding GeoJSON Layers

I add the GeoJSON data as layers. I configure the icon size to change based on the zoom level.

function addGeoJsonLayer(id: string, config: LayerConfig, data: GeoJSONData): void {
    map.addSource(id, {
        type: 'geojson',
        data: data
    });
    map.addLayer({
        id: id,
        type: 'symbol',
        source: id,
        layout: {
            'icon-image': config.iconId,
            'icon-size': [
                'interpolate',
                ['linear'],
                ['zoom'],
                6, baseIconSize * 0.5,
                10, baseIconSize * 0.6,
                14, baseIconSize * 0.7,
                18, baseIconSize * 0.8
            ],
            'icon-allow-overlap': true,
            'icon-ignore-placement': false,
        },
        paint: {
            'icon-opacity': 1.0,
        }
    });
}

Implementing Popups

Clicking a store icon displays the store information in a popup. It shows the address, phone number, business hours, parking information, seating types, etc.

function createPopupContent(props: StoreProperties): string {
    const contentParts: string[] = [];

    if (props.store_name) {
        contentParts.push(`<h3>${props.store_name}</h3>`);
    }

    const details: string[] = [];
    if (props.address) {
        details.push(`<strong>住所:</strong> ${props.address}`);
    }
    if (props.phone_number) {
        details.push(`<strong>電話:</strong> <a href="tel:${props.phone_number}">${props.phone_number}</a>`);
    }
    // ...
}

Layer Toggling

Implemented layer toggling (show/hide) using maplibre-gl-opacity.

const overLayers = {
    'yama': 'ラーメン山岡家',
    'niboshi': '煮干しラーメン山岡家',
    'miso': '味噌ラーメン山岡家',
    'gyouza': '餃子の山岡家',
};

const opacityControl = new OpacityControl({
    overLayers: overLayers,
    opacityControl: false
});
map.addControl(opacityControl, 'bottom-left');

Summary

This time, I built the "Yamaokaya Map (Unofficial)" using a structure that includes Playwright for scraping, geopy for DMS→DD conversion and CSV→GeoJSON conversion, and map display via MapLibre GL JS and Amazon Location Service. Visualizing this on a map reveals new insights. The northernmost store is in Wakkanai. Stores are located in surrounding areas rather than central Tokyo. While they have expanded into Kyushu, there are no stores in Shikoku. And there is only one Gyoza no Yamaokaya store nationwide. This way, Ramen Yamaokaya's store opening strategy becomes clear.

Please use this when searching for a nearby store or looking for Ramen Yamaokaya while traveling!

Building a 3D Map Application Using Mapterhorn Terrain Data

Yasunori Kirimoto — Sun, 11 Jan 2026 23:25:08 +0000

About Mapterhorn

Have you heard of the geospatial project Mapterhorn?

Mapterhorn is an open data project that publishes terrain data. It creates terrain tiles from various open data sources, such as ESA’s Copernicus DEM and Switzerland’s swissALTI3D, and distributes them in the PMTiles format. The project is led by Oliver (formerly at MapLibre).

I also introduced Mapterhorn as a project to watch in my presentations at FOSS4G Hokkaido 2025 and FOSS4G Japan 2025.

Geospatialの世界最前線を探る [2025年版] - Speaker Deck

FOSS4G 2025 Japan 発表資料 https://www.osgeo.jp/foss4g-2025-japan/

speakerdeck.com

Dataset Overview

Mapterhorn creates terrain tiles by combining multiple open data sources.

Global Data

Data Source	Resolution	Zoom Level	Notes
Copernicus GLO-30	30m	z0-z12	ESA Global DEM

The global data is based on ESA’s Copernicus GLO-30 model, covering the entire world up to z12.

High-Resolution Data

In addition to global data, Mapterhorn also provides high-resolution data primarily using open DEM/LiDAR from European countries. For Switzerland specifically, swisstopo's swissALTI3D is used, which offers terrain data at a resolution of 0.5m.

Japan Data

Update (Dec 2025)): High-resolution data for Japan has been added.
✅ Japan, country-wide, 1 m, 5 m, 10 m

Add sources jp*: Japan, 1m, 5m, and 10m

Advance Preparation

Execution environment

node v24.4.1
npm v11.4.2

MapLibre GL JS Starter

Fork or download the MapLibre GL JS starter to your local environment and run it.

https://github.com/mug-jp/maplibregljs-starter

maplibregljs-starter
├── dist
│   └── index.html
├── img
├── src
│   ├── main.ts
│   ├── style.css
│   └── vite-env.d.ts
├── README.md
├── LICENSE
├── index.html
├── package-lock.json
├── package.json
├── tsconfig.json
└── vite.config.ts

Install the package

npm install

Install PMTiles as well

npm install pmtiles

package.json

{
  "name": "maplibregljs-starter",
  "version": "4.5.0",
  "description": "",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "MapLibre User Group Japan",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.5.2",
    "vite": "^5.3.2"
  },
  "dependencies": {
    "maplibre-gl": "^4.5.0",
    "pmtiles": "^4.3.0"
  }
}

Creating the Map Application

Display the Mapterhorn terrain data. Modify src/main.ts.

import './style.css';
import 'maplibre-gl/dist/maplibre-gl.css';
import maplibregl from 'maplibre-gl';
import { Protocol } from 'pmtiles';

const protocol = new Protocol({ metadata: true });

maplibregl.addProtocol('mapterhorn', async (params, abortController) => {
    const [z, x, y] = params.url.replace('mapterhorn://', '').split('/').map(Number);
    const name = z <= 12 ? 'planet' : `6-${x >> (z - 6)}-${y >> (z - 6)}`;
    const url = `pmtiles://https://download.mapterhorn.com/${name}.pmtiles/${z}/${x}/${y}.webp`;
    const response = await protocol.tile({ ...params, url }, abortController);
    if (response['data'] === null) throw new Error(`Tile z=${z} x=${x} y=${y} not found.`);
    return response;
});

const map = new maplibregl.Map({
    container: 'map',
    hash: 'map',
    style: {
        version: 8,
        sources: {
            hillshadeSource: {
                type: 'raster-dem',
                tiles: ['mapterhorn://{z}/{x}/{y}'],
                encoding: 'terrarium',
                tileSize: 512,
                attribution: '<a href="https://mapterhorn.com/attribution">© Mapterhorn</a>'
            }
        },
        layers: [
            {
                id: 'hillshade',
                type: 'hillshade',
                source: 'hillshadeSource'
            }
        ]
    },
    center: [138.7782, 35.3019],
    zoom: 10
});

map.addControl(
    new maplibregl.NavigationControl({
        visualizePitch: true
    })
);

Start the local server

npm run dev

Finally, add 3D terrain rendering. Using MapLibre GL JS’s terrain feature enables 3D terrain visualization.

import './style.css';
import 'maplibre-gl/dist/maplibre-gl.css';
import maplibregl from 'maplibre-gl';
import { Protocol } from 'pmtiles';

const protocol = new Protocol({ metadata: true });

maplibregl.addProtocol('mapterhorn', async (params, abortController) => {
    const [z, x, y] = params.url.replace('mapterhorn://', '').split('/').map(Number);
    const name = z <= 12 ? 'planet' : `6-${x >> (z - 6)}-${y >> (z - 6)}`;
    const url = `pmtiles://https://download.mapterhorn.com/${name}.pmtiles/${z}/${x}/${y}.webp`;
    const response = await protocol.tile({ ...params, url }, abortController);
    if (response['data'] === null) throw new Error(`Tile z=${z} x=${x} y=${y} not found.`);
    return response;
});

const map = new maplibregl.Map({
    container: 'map',
    hash: 'map',
    style: {
        version: 8,
        sources: {
            MIERUNEMAP: {
                type: 'raster',
                tiles: ['https://tile.mierune.co.jp/mierune/{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.",
            },
            terrainSource: {
                type: 'raster-dem',
                tiles: ['mapterhorn://{z}/{x}/{y}'],
                encoding: 'terrarium',
                tileSize: 512,
                attribution: '<a href="https://mapterhorn.com/attribution">© Mapterhorn</a>'
            }
        },
        layers: [
            {
                id: 'MIERUNEMAP',
                type: 'raster',
                source: 'MIERUNEMAP'
            },
            {
                id: 'hillshade',
                type: 'hillshade',
                source: 'terrainSource'
            }
        ],
        terrain: {
            source: 'terrainSource',
            exaggeration: 1.5
        }
    },
    center: [138.8016, 35.2395],
    zoom: 11,
    pitch: 60,
    bearing: -20
});

map.addControl(
    new maplibregl.NavigationControl({
        visualizePitch: true
    })
);

FOSS4G Auckland 2025

Hiroaki Yutani — Sat, 29 Nov 2025 10:53:36 +0000

Kia ora! Last week, we were in Auckland, New Zealand, for FOSS4G 2025. We had a great time and gave four talks about various topics from GTFS to GeoArrow. Thanks so much to the organizers for putting on such a fantastic conference, and to everyone who came to our presentations!

For those who missed the talks, no worries——we share the slides in this post below. You can click the image to jump to the slides.

As you know, the next global FOSS4G conference, FOSS4G 2026, will be held in Hiroshima, Japan (30 Aug - 5 Sep, 2026). We are looking forward to welcoming you, as part of the broader Japanese geospatial community!

Make It Easier to View GTFS : Building a GTFS Timetable Viewer with SvelteKit (by Xinmiao Qu)

Implementing Longest Path Analysis in QGIS with NetworkX and Python (by Xinmiao Qu)

Interactive Simulation for Visualizing Bus Locations Using GTFS Data (by Kei Yamazaki)

GeoArrow on Web; Can We Live Without GeoJSON? (by Hiroaki Yutani)

Rekichizu: A Modern Take on Japan's Historical Maps

Sorami Shiromizu — Fri, 14 Nov 2025 06:15:35 +0000

Rekichizu is a website where you can view historical maps with modern map design.

Currently, maps from the late Edo period (around 1800-1840) are published and updated regularly.

The project launched in August 2023. In November 2025, the English and Hiragana versions of the website were released, making these historical maps accessible to a wider audience.

The underlying data (map tiles and styles) is provided as open data under the CC BY-NC-ND 4.0 license.

See the website for more information.

(Note: The author is a contributor to the Rekichizu project.)

What You Can Do

Rekichizu is built upon its own original large-scale, hand-crafted digital data meticulously derived from old maps. This data is presented with an original modern design map style, offering an interactive map service similar to the platforms you use daily.

Users can search for locations in Japanese, Hiragana, or English. By clicking the magnifying glass icon in the upper-left, you can use the built-in simple geocoding service to search for place names.

You can view the terrain in 3D. Press the mountain button in the lower-right corner to render the map in three dimensions.

You can compare the historical maps directly with modern maps and aerial photographs. Several comparison methods are available, including side-by-side (parallel/split) views, scope, and overlay. This capability is a powerful and fun tool for understanding how a location has changed over time.

Rekichizu is an ideal companion for exploring historical areas. By enabling the GPS feature, you can see at a glance what your current location was like during the Edo period, turning a simple walk into an engaging, time-traveling experience.

The History of Rekichizu

Rekichizu originated as a personal passion project of graphic designer Hajime Kato, widely known online as @chizutodesign. Kato is recognized for his creative and original approach to maps and data visualizations. He later published a book, 『地図とか路線図とか@chizutodesign』 ("Maps and Route Maps," in Japanese) by IKAROS Publications LTD., in 2023.

The Beginning: A Viral Edo-Style Map

Deeply interested in history and maps, Kato recognized that while old maps are fascinating, their complexity makes them difficult for contemporary users to read and interpret.

In 2019, this challenge inspired him to create and release a static image of a Google Maps style Edo-period map on Twitter. It quickly gained significant traction, becoming a viral buzz with around 40,000 likes at the time. Crucially, this initial version was a static single image created solely using Adobe Illustrator.

Figure: 地図とかデザインとか / chizutodesign - 江戸時代のGoogleマップ風地図 / Google Maps style historical map

Towards Web Map and Public Launch

To transform this static image into the interactive web service seen today, Kato began a labor-intensive process of creating the digital data. He corrected and adjusted those data by referencing the Geospatial Information Authority Map (地理院地図). Then actual drawing and data creation was performed using QGIS, a free and open-source geospatial information system (GIS) software.

In August 2023, Kato released the initial public version of Rekichizu. The response was immediate and overwhelming, reaching 100,000 page views the very next day and gaining features in online media, national newspapers, and TV programs.

Expansion with MIERUNE Inc.

Despite the initial success, Kato, primarily a designer, faced challenges with the software engineering skills and resources needed to scale the service.

Following internal discussions, MIERUNE Inc., the geospatial professional firm where Kato is working, officially took over the project in May 2024.

MIERUNE was a natural fit, as the company has unique characteristics: it was born out of the FOSS4G (Free and Open Source Software for Geospatial) community and actively contributes to it ¹. This foundation gives the firm familiarity with OSS (Open Source Software) and projects that aren't strictly for profit. Kato himself had joined MIERUNE in 2022 after being invited to present at one of the FOSS4G conferences.

Since then, Kato and the MIERUNE team have collectively expanded Rekichizu's capabilities, implementing key features such as generating the vector tiles for the map, implementing the geocoding, the comparison feature, internationalization (i18n), and much more. In November 2025, the English and Hiragana versions of the website were released, making these historical maps accessible to a wider international audience.

Public Recognition

Kato's dedication to the Rekichizu project quickly earned him significant industry honors. His achievements include receiving the Enami Naomi Award (Newcomer Award) at Digital Content of the Year '23 / 29th AMD Award and the "Encouragement Award" at the 2024 Digital Archive Industry Awards.

Collaborations

Since its release, Rekichizu has actively collaborated with outside institutions.

ROIS-DS Center for Open Data in the Humanities

In 2025, in collaboration with the ROIS-DS Center for Open Data in the Humanities, Rekichizu has created data for approximately 7,700 km of major roads from the Edo period. The dataset is available for download in GIS format. For details, please see this page.

In 2024, in collaboration with the ROIS-DS Center for Open Data in the Humanities, Rekichizu extracted townhouse areas from all 29 sheets of 'Edo Kiriezu'. The data is published on Rekichizu (areas painted in light brown on the map). The dataset is available for download in GIS format. For details, please see this page.

For those interested in the technical and academic details of this collaboration, a joint talk was delivered at FOSS4G 2024 Japan: 『江戸ビッグデータのオープン化：「れきちず」を活用した歴史的地理情報基盤に向けて』 'Making Edo Big Data Open: Towards a Historical Geographic Information Platform Using "Rekichizu"' (in Japanese), by Asanobu Kitamoto (National Institute of Informatics) and Hajime Kato.

The novel "Sapporo Tanjo (The Birth of Sapporo)"

In collaboration with a novel by Yoshinobu Kadoi, "Sapporo Tanjo (The Birth of Sapporo)" (published by Kawade Shobo Shinsha), Rekichizu created maps of Sapporo from the late Edo period to the Showa era and a special website. For details, please see this page.

The Making of Rekichizu

So, how exactly does a historical web map like Rekichizu get made? It takes a lot of effort across several areas. This section breaks down the dedication required for creating the core data, designing the unique map style, assembling the open-source software stack, and implementing all the internationalization features.

The Data

All data creation is conducted using QGIS, a free and open-source Geospatial Information System (GIS) software ².

The core process involves digitally tracing and drawing historical information—such as roads, coastlines, and points of interest (POI)—by referencing old maps and other historical documents on top of the modern Geospatial Information Authority Map (地理院地図).

Since many of the necessary reference materials are not available in digital libraries, Kato has visited numerous libraries around Japan to collect physical documents.

As of today, the project utilizes more than 400 reference materials. You may see the complete list on the website. Based on these documents, the total length of roads created is more than 40,000 km, and the POI count exceeds 6,100.

Currently, Kato remains solely responsible for the ongoing data creation. Releasing the initial country-wide data took two years, and the project is still a work in progress.

The Design

Rekichizu features a distinctive, original map design that aims to visually convey the historical atmosphere while maintaining modern readability. The design uses specific color and texture choices to evoke the period, notably by coloring the roads to suggest mossy stone pavements. Furthermore, the design helps to clearly distinguish between various historical land uses, such as commercial districts, temple and shrine grounds, samurai residences, and green spaces.

All icons representing points of interest are original creations, reflecting historical landmarks of the Edo period. These custom icons include designs for Barrier (関所), Post Town (宿場), Castles, Shops, Teahouses (茶屋), and Bridges.

Finally, to ensure a visually harmonious experience, the design of the integrated modern map, which utilizes OpenStreetMap (OSM) data, has been carefully styled to match the aesthetic and color palette of the original Rekichizu historical map.

The Software

The interactive web service leverages the professional expertise of the MIERUNE team.

The core mapping engine is MapLibre GL JS, a powerful open-source web map library ³. The front-end web framework of choice is Svelte, which MIERUNE has adopted company-wide as its default stack.

To build interactive maps efficiently within this environment, Rekichizu uses Svelte MapLibre GL, an open-source library created by MIERUNE member Taku Fukada. This library allows for the effortless creation of maps using Svelte's reactive capabilities. The map comparison features were specifically inspired by the Side by Side example found in Svelte MapLibre GL, which itself was based on the original concept from react-map-gl.

For achieving synchronized current location markers in the comparison maps, the team created a custom OSS tool: maplibre-gl-manual-geolocate. This control enables the display of a user position marker at specified coordinates without requiring the browser's geolocation API.

For hosting, Rekichizu relies on Cloudflare Workers (previously AWS Amplify).

For those interested in the technical implementation details, several comprehensive articles and presentations (in Japanese) are available:

現代風歴史マップ「れきちず」フロントエンドのウラとオモテ 'Front and Back of Modern-style Historical Map "Rekichizu"', presented at the Frontend Conference Hokkaido 2024 by Hajime Kato and Kanahiro Iguchi
MapLibre GL JS を Svelte の世界で快適に使うためのライブラリを作りました "I created a library for comfortable use of MapLibre GL JS in the Svelte world" by Taku Fukada
maplibre-gl-manual-geolocate: 任意の場所を「現在地」にするMapLibre GL JSライブラリ 'maplibre-gl-manual-geolocate: A MapLibre GL JS library to make any place "the current location"' by Sorami Shiromizu

The Internationalization

In addition to the original Japanese format, Rekichizu is currently available in two other locales: Hiragana (a phonetic script used in Japanese) and English. This internationalization (i18n) effort was tackled across both the web application and the underlying map data.

The i18n feature for the web application itself is managed using the dedicated library Paraglide JS.

For the map data, converting and translating the place names into these various locales required advanced techniques. Given the massive size of the data, the team leveraged Natural Language Processing (NLP) techniques, including a rule-based approach and an LLM (OpenAI API). This approach was highly effective for the semi-automated process, significantly reducing the manual correction effort required in the final step.

More details on this technical process are available in the following article (in Japanese): LLMを用いた地名のひらがな・英語化と、Paraglide JSによるi18n: モダンな歴史地図「れきちず」の事例 'English and Hiragana conversion of place names using LLM and i18n with Paraglide JS: The case of the modern historical map "Rekichizu"' by Sorami Shiromizu.

Styling the modern map (OSM) style in various locales required leveraging OSM's detailed tagging system:

For the Hiragana script, properties like ja-Hira (BCP 47 compliant) and the traditionally used name:ja_kana are utilized.
For English and Romanization, properties such as name:en, ja-Latn (BCP 47 compliant), and the traditional name:ja_rm are employed.

It's important to note that while not all features in OSM have data listed for every locale, the platform is open. Users are encouraged to contribute missing information to further improve the maps.

As a final technical detail, the team originally used the LINE Seed font for the modern OpenStreetMap style. However, because this font lacked the macron (the long-vowel symbol, as in Tōkyō), and this symbol appears in some OSM English names, the team ultimately switched to a different font (Lexend Deca) for the OSM English style to ensure proper rendering.

The Future of Rekichizu

The Rekichizu project is sustained by continuous development efforts. The team has various ideas for future expansions for both data and feature aspects.

The first major idea is the thorough development of Points of Interest (POI). This feature will allow users to click a location to access detailed information, which will include displaying associated images, such as historical Ukiyo-e (浮世絵), to vividly illustrate the site's past.

The team is also considering a historical route guidance feature (route search). While modern web maps focus on walking, this feature will integrate era-appropriate transportation methods, such as horseback, palanquin travel (駕籠), or messenger service (飛脚), providing a unique and practical taste of the history experience.

The project's long-term objective is to move beyond the current late Edo period to create a truly multi-layered historical map. The ultimate goal is to gradually include maps spanning a wider chronological range of Japanese history, such as the Heian (平安), Sengoku (戦国, Warring States), Meiji (明治), Taishō (大正), and Shōwa (昭和) periods.

As our previous partnerships have shown, we really value finding new people and organizations to work with. Rekichizu is always looking to collaborate further across different fields like education and tourism to expand its reach and usefulness. If you're interested in joining forces, we'd love to hear from you!

We realize that a lot of awesome historical data is often sitting isolated, created individually or by different groups. To unlock all that collective value, Rekichizu's big idea is to evolve into a platform for data integration and collaborative creation. We want to build a system that makes it easy to bring together existing data from individuals or organizations, empowering the entire community to collectively create and connect new historical geospatial information.

Try It Out!

We hope you will take the time to try Rekichizu yourself and enjoy comparing the past and present landscapes of Japan. Click here to start! We are constantly seeking ways to improve, so please feel free to reach out with any feedback or suggestions you may have!

References

「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して "Rekichizu: Past and Future — Making Historical Maps Easy for Everyone to Explore" (in Japanese), presented at FOSS4G 2025 Japan by Hajime Kato and Sorami Shiromizu
Modern-style Historical Map Design with QGIS (in English), presented at FOSS4G ASIA 2023 by Hajime Kato

MIERUNE was founded by the three organizers of FOSS4G Hokkaido. The company's team also includes multiple Charter Members of the OSGeo Foundation, and MIERUNE is an organizational member of OSGeo.JP. Toru Mori, a board member of MIERUNE, is a key figure in supporting the global FOSS4G movement from its very inception, serving as the OSGeo Representative of the Japan Chapter from 2006 to 2018. ↩
MIERUNE is an official QGIS sponsor since 2017 and a voting member of the QGIS Country User Group. ↩
MIERUNE is a major supporter of the MapLibre project, becoming the world's first sponsor in 2022 (alongside companies like Meta, Microsoft, and AWS). Furthermore, MIERUNE's commitment extends to project governance, as CEO Yasunori Kirimoto and CTO Kanahiro Iguchi are both voting members of the project. ↩

Wait, Are You Still Using Vanilla QGIS?

Shinsuke Nakamori — Wed, 13 Aug 2025 09:20:34 +0000

Yes, the title is a bit provocative—but if you clicked on this, chances are you’re already a regular QGIS user.

So, go ahead. Fire up the QGIS you use every day.

You probably see something like this:

Now, let me ask you one thing:

"Are you really satisfied with how it looks?"

If the answer is “not really,” by the end of this article you’ll be able to customize QGIS’s appearance into something like this:

How to Change QGIS’s Look

Many of you probably already know that QGIS’s GUI is built using Qt.

If you’ve ever created a QGIS plugin in PyQGIS, you’ve probably written imports like:

from PyQt5.QtWidgets import QDialog

So it’s only natural to think:

“If QGIS uses Qt, couldn’t I just tweak its GUI using Qt features?”

Let’s try it.
Open QGIS’s Python console and bring up the editor:

Now, enter this code and hit the ▶ run button:

iface.mainWindow().setStyleSheet("background-color: #333; color: #32cd32;")

Oh, Whole new vibe.

Since QGIS’s mainWindow is a Qt widget, you can forcibly apply styles using setStyleSheet.

Once you understand that, you know what comes next:

“Let’s go wild with StyleSheets and make QGIS truly our own.”

So I Made It a QGIS Plugin

At first, I was just playing around with StyleSheets. But as the number of tweaks grew—and as I thought it might be fun to let you customize QGIS too—I turned it into a plugin.

https://plugins.qgis.org/plugins/QGISDresser/#plugin-about

Installation

Installation is just like any other QGIS plugin. Search for “Dresser” and you should find it right away.

Usage

You can launch it only from the Plugins menu.
I intentionally avoided adding a toolbar button so it wouldn’t clutter your GIS workflow.

The dialog is kept as simple as possible—there’s not much to configure.

Use preset
→ Choose from pre-registered presets.

Use image
→ Use your own image as the background. You can also pick text color (black or white) so it stays readable.

In either case, once you set a background and click OK, QGIS’s appearance changes instantly.

It’s so straightforward that you’ll get the hang of it almost instantly.

Creating Background Images

If you want to use your own image as a background, there’s a little trick to it.

Right now, QGISDresser stretches the image to fill the entire QGIS window size.
So, if you want something like your favorite character appearing in the layer panel area, you’ll need to prepare an image with enough empty space for proper positioning.

It’s easier to show than to tell:

Take a screenshot of your QGIS window and paste it into PowerPoint.
Place your character image where you want it to appear.
Create a rectangle the same size as the QGIS screenshot and fill it with your desired background color.
Select both the character and rectangle, right-click, and choose “Save as Picture.”
Load that image into QGISDresser—and done!

Editing Presets

Here’s a secret: the presets in QGISDresser are editable.

Just open the QGISDresser installation folder, go into preset/, and you’ll find a list.yml file that defines the presets:

styles:
  - name: "simple-blue-white"
    char-color: "white"
    treeview-color: "rgba(128, 128, 128, 0.6)"
    main-color: "#0000FF"
    main-image: "transparent"
    main-position: "right"
    btn-color: "white"
    btn-image: "transparent"
    btn-position: "top"

You can set parameters like:

name → Display name in the preset list
char-color → Text color (not limited to black/white)
treeview-color → Layer panel background (use some transparency so the background shows)
main-color → Main background color
main-image → Main background image
main-position → Alignment of the main background image
btn-color → Button background color
btn-image → Button background image
btn-position → Alignment of the button background image

To add a custom preset:

Put your image in the images/ folder.
Add a new entry to list.yml.

Example:

  - name: "Sample"
    char-color: "black"
    treeview-color: "rgba(200, 200, 200, 0.6)"
    main-color: "transparent"
    main-image: "sample.png"
    main-position: "center"
    btn-color: "transparent"
    btn-image: "transparent"
    btn-position: "top"

Conclusion

I released this plugin mainly because I thought it would be fun.
It probably still has plenty of bugs, so if you notice anything or have feature requests, please open an issue here:

https://github.com/nakamori1024/QGISDresserPlugin

What does occur when making a million tables on Amazon Aurora PostgreSQL?

Kanahiro Iguchi — Sun, 03 Aug 2025 11:52:18 +0000

A million tables in PostgreSQL

Recently I have been designing and developing a web application with PostgreSQL. In the architecture, many tables will be created in PostgreSQL, possibly a million.

How many table can PostgreSQL handle?

It seems that there is a hard limit in one database up to about 4 billion (= maximum number of Uint32).

Then, is it okay up to 4B tables? It looks not. Some articles say that a limit will come before reaching to that hard limits.

https://dev.to/kspeakman/breaking-postgres-with-too-many-tables-4pg0
https://www.reddit.com/r/PostgreSQL/comments/voz3uh/will_number_of_tables_limit_performance/
https://stackoverflow.com/questions/22395883/postgresql-what-is-the-maximum-number-of-tables-can-store-in-postgresql-databas
https://gis.stackexchange.com/questions/294101/healthy-number-of-tables-in-postgresql-schema

Therefore, I ran a durability test that Aurora PostgreSQL can handle a million of tables with nice performance.

Test condition

I would like to judge Aurora works good in such condition, try to:

Make 1 million tables with 10000 rows including geometry column (PostGIS)
- Each tables has no relation to other tables.
Run queries:
- to select rows from a table
- to count how many tables exists
Make a snapshot
Restore from a snapshot

Tests ran on PostgreSQL 16 with ServerlessV2 instance type.

Result

create tables

Okay, but it takes a week.

queries

select rows from a table

Perform full-scan to one table.

EXPLAIN ANALYZE SELECT * FROM public.features_table_00502897;

                                                         QUERY PLAN                                                          
-----------------------------------------------------------------------------------------------------------------------------
 Seq Scan on features_table_00502897  (cost=0.00..264.00 rows=10000 width=100) (actual time=0.013..0.877 rows=10000 loops=1)
 Planning Time: 0.675 ms
 Execution Time: 1.346 ms

No problem occured.

Count how many tables exists

EXPLAIN (ANALYZE, BUFFERS) SELECT count(*) FROM information_schema.tables WHERE table_schema = 'public';

                 QUERY PLAN                                                                                                                                                  
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 Finalize Aggregate  (cost=314857.84..314857.85 rows=1 width=8) (actual time=2401.424..2406.264 rows=1 loops=1)
   Buffers: shared hit=3135772
   ->  Gather  (cost=314857.63..314857.84 rows=2 width=8) (actual time=2397.817..2406.254 rows=3 loops=1)
         Workers Planned: 2
         Workers Launched: 2
         Buffers: shared hit=3135772
         ->  Partial Aggregate  (cost=313857.63..313857.64 rows=1 width=8) (actual time=2392.081..2392.085 rows=1 loops=3)
               Buffers: shared hit=3135772
               ->  Nested Loop Left Join  (cost=1.63..313677.60 rows=72010 width=0) (actual time=0.272..2359.793 rows=333334 loops=3)
                     Buffers: shared hit=3135772
                     ->  Hash Join  (cost=1.07..248114.22 rows=72010 width=4) (actual time=0.262..941.881 rows=333334 loops=3)
                           Hash Cond: (c.relnamespace = nc.oid)
                           Buffers: shared hit=135766
                           ->  Parallel Seq Scan on pg_class c  (cost=0.00..246555.93 rows=288040 width=8) (actual time=0.030..837.999 rows=333400 loops=3)
                                 Filter: ((relkind = ANY ('{r,v,f,p}'::"char"[])) AND (pg_has_role(relowner, 'USAGE'::text) OR has_table_privilege(oid, 'SELECT, INSERT, UPDATE, DELETE, TRUNCATE, REFERENCES, TRIGGER'::text) OR has_any_column_privilege(oid, 'SELECT, INSERT, UPDATE, REFERENCES'::text)))
                                 Rows Removed by Filter: 1666738
                                 Buffers: shared hit=135665
                           ->  Hash  (cost=1.06..1.06 rows=1 width=4) (actual time=0.117..0.118 rows=1 loops=3)
                                 Buckets: 1024  Batches: 1  Memory Usage: 9kB
                                 Buffers: shared hit=29
                                 ->  Seq Scan on pg_namespace nc  (cost=0.00..1.06 rows=1 width=4) (actual time=0.094..0.100 rows=1 loops=3)
                                       Filter: ((NOT pg_is_other_temp_schema(oid)) AND (nspname = 'public'::name))
                                       Rows Removed by Filter: 3
                                       Buffers: shared hit=29
                     ->  Nested Loop  (cost=0.56..0.90 rows=1 width=4) (actual time=0.004..0.004 rows=0 loops=1000002)
                           Buffers: shared hit=3000006
                           ->  Index Scan using pg_type_oid_index on pg_type t  (cost=0.43..0.75 rows=1 width=8) (actual time=0.003..0.003 rows=0 loops=1000002)
                                 Index Cond: (oid = c.reloftype)
                                 Buffers: shared hit=3000006
                           ->  Index Only Scan using pg_namespace_oid_index on pg_namespace nt  (cost=0.13..0.15 rows=1 width=4) (never executed)
                                 Index Cond: (oid = t.typnamespace)
                                 Heap Fetches: 0
 Planning:
   Buffers: shared hit=385
 Planning Time: 3.087 ms
 Execution Time: 2406.424 ms

It took two seconds and more. It seems that too many tables decrease performance on queries for system catalogs.

Make a snapshot and restore

Tried on AWS Management Console and no problem occured.

Conclusion

There is no critical problem even when a million tables in one database, on Aurora PostgreSQL. Aurora PostgreSQL has different architecture than PostgreSQL and it might be effective for such situation of too many tables. I'm not sure but I need to mention that that test would end as different results on "normal" PostgreSQL.

On the other hand, queries to system catalogs has bad performance with too many tables as some articles mentioned. It may be better to take other approach if you can, or you need to accept this trade-off.

Deploy MBTiles Server in Minutes with FastAPI and Render

Shinsuke Nakamori — Sun, 29 Jun 2025 14:50:09 +0000

Have you ever needed to quickly deploy a tile server for your mapping application?

Setting up a tile server usually means wrestling with:

Infrastructure provisioning and configuration
Custom API development for tile serving
Preparing tile datasets
Scaling and performance tuning
Deployment pipeline configuration

There are too many things to consider, don't you think?

In this article, I'll show you a simple way to serve a tile server on Render.

Prerequisites

To build a tile server following this article, you only need three things:

GitHub account - For accessing the template repository
Render.com account - For hosting your tile server (free tier available)
MBTiles file(s) - Your tile data ready to serve

That's it! No complex infrastructure setup, no server management experience required.

What are MBTiles?

If you're not familiar with MBTiles, it's a specification for storing tiled map data in a single SQLite database file. Popular tools like QGIS, and Tippecanoe can generate MBTiles from your geospatial data.

For this tutorial, don't worry if you don't have MBTiles files yet - the template includes sample data to get you started.

🚀 Basic: Deploy Your First Tile Server

Let's get your tile server up and running in just a few minutes. We'll use the GitHub template that includes sample MBTiles data, so you don't need to prepare anything in advance.

Step 1: Fork the Template

Sign in to GitHub
Create your own repository from template
Create a new repository in your GitHub account

Step 2: Deploy to Render

Sign in to Render
Create a new web service
Connect your newly created GitHub repository
Configure the deployment settings:
- Build Command: pip install uv && uv sync --frozen
- Start Command: uv run uvicorn main:app --host 0.0.0.0 --port $PORT
Select Free Plan
Click "Deploy Web Service"

That's it! Render will automatically build and deploy your tile server.

Step 3: Verify Your Server is Running

Once deployment is complete, you'll get a URL like https://your-app-name.onrender.com.

Let's verify your server is working:

Health Check: https://your-app-name.onrender.com/health
- Should return {"status": "ok"}
API Documentation: https://your-app-name.onrender.com/docs
- Interactive API explorer

If both endpoints are accessible, your tile server is ready to serve maps!

Step 4: Visualize Your Tiles

Now let's see your tiles in action! The template includes a sample HTML file that demonstrates how to use your tile server with MapLibre GL JS.

Go to your GitHub repository or template repository
Download sample.html and open it in a text editor

Replace the TILE_SERVER_URL

    // Replace with your Render app URL (e.g., https://your-app-name.onrender.com)
    const TILE_SERVER_URL = 'https://your-app-name.onrender.com';

Save the file and open it in your web browser

You should see an interactive map with:

Natural Earth raster tiles (beautiful terrain imagery)
Japanese medical area polygons (vector data overlay)
Layer toggle controls (top-left corner) to show/hide each layer

🎉 Congratulations! You now have a working tile server with sample data from Natural Earth and Japanese medical area polygons.

⚡ Advanced: Serve Your Own Data

Ready to take your tile server to the next level? Let's explore how to create and deploy your own tiles using real-world geospatial data.

Step 5: Create MBTiles from Your Data

If you already have geospatial data you'd like to serve as tiles, feel free to use your own datasets. However, if you want to experiment with tile serving using sample data, there are many excellent open data sources available worldwide.

Here are some recommended open data portals:

LINZ Data Service

New Zealand's open geospatial data
Most datasets available under Creative Commons licenses
High-quality, well-maintained datasets

San Francisco Open Data

San Francisco's municipal open data
Available under PDDL (Public Domain Dedication and License)
Rich urban datasets perfect for city-scale applications

data.gov.uk

United Kingdom's government open data
Available under Open Government Licence
Comprehensive coverage of various sectors

Of course, you're not limited to these sources - feel free to explore open data from your own country or region. Just make sure to check the licensing terms to ensure the data can be used for your intended purpose.

For this demonstration, I'll use the Greater Manchester Metrolink Network dataset from data.gov.uk.

While the detailed process of creating MBTiles is beyond the scope of this article, QGIS makes it straightforward to convert various geospatial formats to MBTiles. If you need detailed guidance on this process, modern AI assistants will provide step-by-step instructions.

Step 6: Deploy Custom MBTiles

Now let's deploy your custom MBTiles to your tile server.

Access your repository and navigate to the appropriate directory.

For raster tiles: Click the raster directory
For vector tiles: Click the vector directory

Upload your MBTiles file and commit the changes.

That's it! Render will automatically detect the repository changes and redeploy your application. You can monitor the deployment progress in your Render dashboard.

Once deployment is complete, your custom tiles will be available at:
https://your-app-name.onrender.com/vector/your-filename/{z}/{x}/{y}.pbf

🎉 Amazing! Your custom geospatial data is now live and ready to serve tiles to mapping applications worldwide.

Step 7: Test Your Custom Tiles

Now let's verify that your custom tiles are working by viewing them on an interactive map.

Update your sample.html file to use your new custom tiles. In my case, I added the following code to display the Greater Manchester Metrolink data:

        // Add vector tile layer (GM Metrolink)
        map.addSource('metrolink-source', {
            'type': 'vector',
            'tiles': [
                `${TILE_SERVER_URL}/vector/GM_Metrolink/{z}/{x}/{y}.pbf`
            ],
            'attribution': 'Contains Transport for Greater Manchester data. Contains OS data © Crown copyright and database right 2017.'
        });

        // Add Metrolink lines layer
        map.addLayer({
            'id': 'metrolink-layer',
            'type': 'line',
            'source': 'metrolink-source',
            'source-layer': 'Metrolink_Lines_Functional',
            'paint': {
                'line-color': 'rgba(0, 0, 255, 0.8)',
                'line-width': 3
            },
            'layout': {
                'visibility': 'visible'
            }
        });

        // Add Metrolink stops layer
        map.addLayer({
            'id': 'metrolink-stops-layer',
            'type': 'circle',
            'source': 'metrolink-source',
            'source-layer': 'Metrolink_Stops_Functional',
            'paint': {
                'circle-color': 'rgba(255, 255, 0, 0.9)',
                'circle-radius': 4,
                'circle-stroke-color': 'rgba(0, 0, 255, 1)',
                'circle-stroke-width': 2
            },
            'layout': {
                'visibility': 'visible'
            }
        });

After making these changes and refreshing your browser, you should see the Manchester Metrolink network displayed on your map!

Conclusion

In this article, we've covered the complete journey from deploying a basic tile server to serving your own custom geospatial data. Here's what you've accomplished:

✅ Deployed a production-ready tile server using Render's free tier
✅ Learned to work with MBTiles format for efficient tile storage
✅ Created custom tiles from real-world open data sources
✅ Visualized your data with interactive web maps

This foundation gives you everything needed to build mapping applications, from simple data visualization to complex geospatial analysis tools. The beauty of this approach is its simplicity - no complex infrastructure, no server management, just upload your data and go!

Convert GeoJSON to PMTiles with AWS Serverless Pattern

Kanahiro Iguchi — Sun, 16 Mar 2025 07:03:05 +0000

PMTiles is a powerful tool to store map tiles and serve them in "serverless" way. It is one of Cloud-optimized format, which can be used over HTTP and doesn't depend on file-system.

Actually, Protmaps shows examples to serve PMTiles with AWS Lambda or some serverless infrastructure.

https://docs.protomaps.com/deploy/aws

In this articlle, I try to show how to create PMTiles in "serverless" way.

Architecture

CDK Stack

import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as lambda from 'aws-cdk-lib/aws-lambda';
import * as s3n from 'aws-cdk-lib/aws-s3-notifications';
import * as path from 'path';

export class AutoTilerStack extends cdk.Stack {
    constructor(scope: Construct, id: string, props?: cdk.StackProps) {
        super(scope, id, props);

        // S3 buckets for input GeoJSON and output PMTiles
        const geojsonBucket = new s3.Bucket(this, 'GeojsonBucket', {
            removalPolicy: cdk.RemovalPolicy.DESTROY,
            autoDeleteObjects: true,
        });

        const pmtilesBucket = new s3.Bucket(this, 'PmtilesBucket', {
            removalPolicy: cdk.RemovalPolicy.DESTROY,
            autoDeleteObjects: true,
        });

        // Lambda function to run tippecanoe for conversion
        const tippecanoeLambda = new lambda.DockerImageFunction(
            this,
            'TippecanoeLambda',
            {
                code: lambda.DockerImageCode.fromImageAsset(
                    path.join(__dirname, '../lambda'),
                ),
                timeout: cdk.Duration.minutes(15),
                memorySize: 1770, // 2 vCPUs
                environment: {
                    OUTPUT_BUCKET: pmtilesBucket.bucketName,
                },
                architecture: lambda.Architecture.ARM_64,
            },
        );

        // Grant permissions
        geojsonBucket.grantRead(tippecanoeLambda);
        pmtilesBucket.grantReadWrite(tippecanoeLambda);

        // Configure S3 event notification to trigger Lambda directly
        geojsonBucket.addEventNotification(
            s3.EventType.OBJECT_CREATED,
            new s3n.LambdaDestination(tippecanoeLambda),
            { suffix: '.geojson' }, // Only trigger for .geojson files
        );

        // Output the bucket names
        new cdk.CfnOutput(this, 'GeojsonBucketName', {
            value: geojsonBucket.bucketName,
            description: 'Name of the S3 bucket for GeoJSON files',
        });

        new cdk.CfnOutput(this, 'PMTilesBucketName', {
            value: pmtilesBucket.bucketName,
            description: 'Name of the S3 bucket for PMTiles files',
        });

        new cdk.CfnOutput(this, 'PMTilesBucketWebsiteUrl', {
            value: pmtilesBucket.bucketWebsiteUrl,
            description: 'URL of the PMTiles bucket website',
        });
    }
}

Lambda codes

These codes implicitly assume tippecanoe is available in the system.

import * as AWS from 'aws-sdk';
import { S3Event, S3EventRecord } from 'aws-lambda';
import { spawn, ChildProcess } from 'child_process';
import * as fs from 'fs';
import * as path from 'path';
import * as os from 'os';

const s3 = new AWS.S3();

export const handler = async (event: S3Event): Promise<any> => {
    console.log('Received event:', JSON.stringify(event, null, 2));

    // Process only the first record (we expect only one per invocation)
    const record: S3EventRecord = event.Records[0];

    // Get the S3 bucket and key from the event
    const srcBucket = record.s3.bucket.name;
    const srcKey = decodeURIComponent(record.s3.object.key.replace(/\+/g, ' '));

    // Get the output bucket from environment variables
    const dstBucket = process.env.OUTPUT_BUCKET as string;

    // Create temporary directory for processing
    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'geojson-'));
    const localGeojsonPath = path.join(tmpDir, 'input.geojson');
    const outputDir = path.join(tmpDir, 'output');

    try {
        // Create output directory
        fs.mkdirSync(outputDir, { recursive: true });

        // Download the GeoJSON file from S3
        console.log(`Downloading ${srcKey} from ${srcBucket}`);
        const geojsonObject = await s3
            .getObject({
                Bucket: srcBucket,
                Key: srcKey,
            })
            .promise();

        // Write the GeoJSON to a local file
        fs.writeFileSync(localGeojsonPath, geojsonObject.Body as Buffer);

        // Extract the base name without extension for the tile directory
        const baseName = path.basename(srcKey, path.extname(srcKey));

        // Run tippecanoe to convert GeoJSON to PMTiles
        console.log('Running tippecanoe');
        await runTippecanoe(localGeojsonPath, outputDir, baseName);

        // Upload the PMTiles file to S3
        console.log('Uploading PMTiles to S3');
        const pmtilesPath = path.join(outputDir, `${baseName}.pmtiles`);
        await uploadPMTiles(pmtilesPath, dstBucket, '');

        return {
            statusCode: 200,
            body: JSON.stringify({
                message: 'GeoJSON successfully converted to PMTiles',
                source: srcKey,
                destination: `${baseName}.pmtiles`,
            }),
        };
    } catch (error) {
        console.error('Error:', error);
        throw error;
    } finally {
        // Clean up temporary files
        try {
            fs.rmSync(tmpDir, { recursive: true, force: true });
        } catch (err) {
            console.error('Error cleaning up temporary files:', err);
        }
    }
};

// Function to run tippecanoe
async function runTippecanoe(
    inputFile: string,
    outputDir: string,
    baseName: string,
): Promise<void> {
    return new Promise((resolve, reject) => {
        const tileDir = path.join(outputDir, baseName);
        fs.mkdirSync(tileDir, { recursive: true });

        const tippecanoe = spawn('tippecanoe', [
            '-o',
            `${tileDir}.pmtiles`,
            '-z',
            '14', // Maximum zoom level
            '-M',
            '1000000', // max filesize of each tile
            '-l',
            baseName, // Layer name
            inputFile,
        ]);

        setupProcessListeners(tippecanoe, 'tippecanoe', (code) => {
            if (code !== 0) {
                reject(new Error(`tippecanoe process exited with code ${code}`));
                return;
            }

            resolve();
        });
    });
}

// Helper function to set up process listeners
function setupProcessListeners(
    process: ChildProcess,
    name: string,
    onClose: (code: number | null) => void,
): void {
    process.stdout?.on('data', (data) => {
        console.log(`${name} stdout: ${data}`);
    });

    process.stderr?.on('data', (data) => {
        console.error(`${name} stderr: ${data}`);
    });

    process.on('close', onClose);
}

// Function to upload a PMTiles file to S3
async function uploadPMTiles(
    pmtilesPath: string,
    bucket: string,
    prefix: string,
): Promise<void> {
    const fileContent = fs.readFileSync(pmtilesPath);
    const fileName = path.basename(pmtilesPath);
    // Use the same path format as in the response
    const s3Key = prefix === '' ? fileName : `${prefix}/${fileName}`;

    await s3
        .putObject({
            Bucket: bucket,
            Key: s3Key,
            Body: fileContent,
            ContentType: 'application/octet-stream',
        })
        .promise();

    console.log(`Uploaded ${s3Key} to ${bucket}`);
}

Container Image

FROM public.ecr.aws/lambda/nodejs:18

# Install dependencies for tippecanoe
RUN yum update -y && \
    yum install -y gcc-c++ make git sqlite-devel zlib-devel

# Clone and build tippecanoe
RUN git clone https://github.com/felt/tippecanoe.git && \
    cd tippecanoe && \
    make -j && \
    make install

# No need for mb-util since we're using PMTiles directly

# Copy package.json and install dependencies
COPY package.json tsconfig.json ${LAMBDA_TASK_ROOT}/
RUN npm install

# Copy TypeScript source code
COPY app.ts ${LAMBDA_TASK_ROOT}/

# Build TypeScript code
RUN npm run build

# Set the CMD to your handler
CMD [ "dist/app.handler" ]

Testing

PUT GeoJSON to S3

Lambda invoked and start processing with tippecanoe

PMTiles is uploaded

Check contents of PMTiles

PMTiles Viewer is useful.

Conclusion

This is a very basic pattern. It lacks many functionalities, such as support for other file formats and error handling, but I think you can add them to this pattern without much effort.

A Guide to Building a Map Application with Svelte

Shinsuke Nakamori — Wed, 26 Feb 2025 04:10:11 +0000

Have you ever wanted to build a map application but found the setup process overwhelming? With Svelte MapLibre GL, you can create a highly interactive and reactive map application with ease.

This guide will take you step by step through the development process. To keep things beginner-friendly, we'll start by setting up a new Svelte project. If you're already comfortable with that part, feel free to jump ahead!

Setting Up the Project

First, set up a Svelte project using the following command:

npx sv create .

There are no specific requirements for the project setup, but for this guide, I'll use the following configuration. Feel free to use it as a reference.

Installing Svelte MapLibre GL

You can install Svelte MapLibre GL with the following command:

npm install --save-dev svelte-maplibre-gl

Adding a Basic Map

Now, let's add a map. Replace the content of src/routes/+page.svelte with the following code.

<script lang="ts">
    import { MapLibre, NavigationControl, ScaleControl, GlobeControl } from 'svelte-maplibre-gl';
</script>

<MapLibre
    class="h-[55vh] min-h-[300px]"
    style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
    zoom={3.5}
    center={{ lng: 137, lat: 36 }}
>
    <NavigationControl />
    <ScaleControl />
    <GlobeControl />
</MapLibre>

Build the Svelte application with the following command.

npm run dev

If everything is set up correctly, you should see a map like the one below.

That's all it takes to add a map. Easy, right?

Adding Markers to the Map

Now that we've added a map, let's have some fun by adding markers wherever you like! As an example, we'll place a marker at Sapporo Station in Japan.

<script lang="ts">
    import {
        MapLibre,
        Marker,
        NavigationControl,
        ScaleControl,
        GlobeControl
    } from 'svelte-maplibre-gl';
</script>

<MapLibre
    class="h-[55vh] min-h-[300px]"
    style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
    zoom={3.5}
    center={{ lng: 137, lat: 36 }}
>
    <NavigationControl />
    <ScaleControl />
    <GlobeControl />

    <Marker lnglat={[141.350714, 43.068564]} />
</MapLibre>

Getting a feel for reactivity

According to the author, the main advantage of this map library is its reactivity. To get a feel for it, let's update the previous code as follows.

<script lang="ts">
    import {
        MapLibre,
        Marker,
        NavigationControl,
        ScaleControl,
        GlobeControl
    } from 'svelte-maplibre-gl';

    let lnglat: [number, number] = [141.350714, 43.068564];
</script>

<MapLibre
    class="h-[55vh] min-h-[300px]"
    style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
    zoom={3.5}
    center={{ lng: 137, lat: 36 }}
>
    <NavigationControl />
    <ScaleControl />
    <GlobeControl />

    <Marker bind:lnglat draggable />
</MapLibre>

<p>
    Longitude:
    <input type="number" bind:value={lnglat[0]} />
</p>
<p>
    Latitude:
    <input type="number" bind:value={lnglat[1]} />
</p>

Try moving the marker or changing the value in the text box. You'll see how Svelte and MapLibre interact with each other in real time.

Exciting, isn't it? If you find it interesting, be sure to give it a try!

You can find this demo in the following repository. Check it out for reference!
https://github.com/nakamori1024/svelte-maplibre-demo

Next Steps

If you're interested, try exploring the following next steps:

Adding features (Coming Soon)
Deploying with AWS Amplify (Coming Soon)

Seamlessly Compare Maps on QGIS with the QMapCompare Plugin

Raymond Lay — Sat, 22 Feb 2025 02:10:46 +0000

Introduction

When working with QGIS, you often switch between basemaps, but comparing small differences between maps can be challenging when only one map can be displayed at a time.

Web tools like Japan's "Past/Present Map on the Web" and France Mapping Agency (IGN)'s "Remonter le temps" enable users to compare different styles of maps easily in various ways.

However, QGIS has lacked a stable feature for map comparison until now! This post introduces QMapCompare, a new plugin that enables users to compare multiple maps directly within QGIS using various visualization methods.

QMapCompare overview. Created by editing GSI Tiles

Installation

First, ensure you are using QGIS version 3.34 or later.
Then, you can install plugin by searching QMapCompare on QGIS plugin manager.

Usage

Once plugin installed, a new icon will appear on the toolbar.
Clicking the icon will toggle the QMapCompare panel on the left bottom of QGIS window.

QMapCompare interface. ©︎OpenStreetMap contributors

QMapCompare provides several ways to compare maps.

Select layers you want to compare (1), and choose the following comparison method (2-5):

1. Select compare layers (multiple selections allowed)
2. Mirror: Displays two maps side by side
3. Vertical Split: Divides the map vertically
4. Horizontal Split: Divides the map horizontally
5. Lens: Check compare layers with a circle around the mouse cursor
6. Stop: Ends the comparison

Comparison Methods Overview

Mirror View

The mirror mode places a duplicate of the map canvas on the right side of the map canvas.

This is useful when comparing base maps with satellite imagery or other data.

Mirror view. Created by editing GSI Tiles

Split View

The split mode divides the map into two sections, showing different layers side by side.

You can choose either a vertical or horizontal split, depending on your needs.

This is may be useful for comparing building accuracy in OpenStreetMap with government-provided data as example.

Lens View

Lens mode displays a circular preview of the comparison layers around the mouse cursor.

As you move the cursor, the preview updates in real time.

This is especially useful for detailed comparisons of specific locations.

Lens view. Created by editing GSI Tiles

Practical Use Cases

QMapCompare is valuable for various use cases as below:

Comparing historical aerial photographs

Tokyo Aerial Photo Comparison between 2024(left) and 1987-1990(right).
Created by editing GSI Tiles

Analyzing pre- and post-disaster images

Aerial Photo Comparison of Before 2021 Atami Landslip Disaster (left) and after(right).
Created by editing GSI Tiles

Conclusion

QMapCompare is a powerful tool for comparing different maps and datasets within QGIS. With this plugin, you can easily:

Analyze time-series data (e.g., pre- and post-disaster maps)
Evaluate data accuracy (e.g., comparing OpenStreetMap with government maps)
Support decision-making (e.g., verifying different analytical results and styles)

As this is a newly released plugin, there may still be some bugs. If you encounter any issues, please report them on our GitHub Issues page.

Your feedback will help improve the tool!

Building a Geospatial Server with BBOX Server

Yasunori Kirimoto — Mon, 13 Jan 2025 10:55:34 +0000

About BBOX Server

Have you heard of the geospatial tool called BBOX Server?

I was introduced to this tool by Kanahiro Iguchi after FOSS4G 2023 Prizren last year, and I've been curious about it ever since.

BBOX Server is an open-source composable geospatial service that provides multiple components, including features, maps, tiles, assets, processes, and routing, that conform to OGC API standards. It has a built-in high-performance HTTP server, so it can efficiently process both static and dynamic location information data. It also implements QGIS Server, which previously required much effort to build, in an easy-to-use format. It supports a variety of data sources and formats, and it is also possible to use PostgreSQL (PostGIS).

Components of BBOX Server

There are currently six components in the BBOX Server.

Presentation materials from FOSS4G 2023 Prizren

1. BBOX feature server
This component provides geospatial data that conforms to the OGC API Features standard. It enables efficient data distribution, flexible filtering, and spatial searches via RESTful endpoints.

2. BBOX Map server
This component generates and provides maps that conform to the OGC API Maps standard. It uses QGIS Server as a backend and supports OGC WMS 1.3 and OGC API Maps. It provides map tile and image rendering.

3. BBOX Tile server
This is a geospatial data provisioning component that conforms to the OGC API Tiles standard and streamlines the delivery of raster tiles and vector tiles. It provides flexible tiles that utilize PMTiles, MBTiles, and QGIS Server.

4. BBOX Asset server
This is an integrated file server that delivers static files and templates. It provides assets such as fonts, styles, and sprites.

5. BBOX Processes server
This is a geographic processing task execution platform that conforms to the OGC API Processes standard. It supports synchronous and asynchronous processes and can execute various geographic analysis tasks via RESTful endpoints.

6. BBOX Routing server
This experimental component provides a routing service that conforms to OGC API Routing (experimental). It provides a routing calculation function via a RESTful interface.

In this article, I tried the "BBOX Map server" and "BBOX Tile server."

Advance Preparation

Preparing sample data

The following was used as sample data in this article.

I prepared a QGIS project file that combined my point, line, and polygon data with convenience store data from OpenStreetMap. Labels are also displayed during verification.

sample data

I also used PLATEAU data converted to PMTiles provided in the shi-works repository. As this data is large, please download it manually if you wish to use it.

Store this data in an arbitrary directory.

bbox_server
├── assets
│   ├── plateau.pmtiles
│   ├── pointdata.geojson
│   ├── sample.gpkg
│   └── sapporo.qgz
└── bbox.toml

Creating the configuration file

To use BBOX Server, you can customize it in various ways by editing the configuration file called "bbox.toml".

This article has created sample configuration files for WMS, raster tile, and vector tile distribution servers. You can find more details about this in the documentation.

bbox.toml

[mapserver.qgis_backend]
# QGIS Server settings
project_basedir = "assets"
qgs.path = "/qgis"
qgz.path = "/qgz"

[[tileset]]
# Raster tiles settings
name = "sapporo"
map_service = { project = "sapporo", suffix = "qgz", layers = "all" }

[[tileset]]
# Vector tiles settings
name = "plateau"
pmtiles = { path = "assets/plateau.pmtiles" }

Building BBOX Server

Installation & Startup

First, install the BBOX Server. In this case, we will use Docker to start it locally. You can try out all the functions using the Docker image called "sourcepole/bbox-server-qgis."

Move to the directory you prepared in the preliminary preparation, and start the BBOX Server. When it starts, the sample data and bbox.toml will be automatically placed.

docker run -p 8080:8080 -v $PWD/bbox.toml:/var/www/bbox.toml:ro -v $PWD/assets:/var/www/assets:ro sourcepole/bbox-server-qgis

After starting up, access "http://localhost:8080". If the BBOX Server top page is displayed, it is OK.

Delivering in WMS format with QGIS Server

Next, we will deliver in WMS format with QGIS Server and display in QGIS. This can also be used in WebGIS applications.

Set the following URL in the WMS menu.

http://localhost:8080/qgz/sapporo

You can distribute in WMS format while maintaining the style of the QGIS project file.

Distribute in raster tile format using QGIS Server

Next, distribute in raster tile format using QGIS Server and display in QGIS. This can also be used in WebGIS applications.

Set the following URL in the raster tile menu.

http://localhost:8080/xyz/sapporo/{z}/{x}/{y}.png

The data is distributed in raster tile format using the QGIS project file style.

Distribute in vector tile format using PMTiles

Finally, the data is distributed in vector tile format using PMTiles and displayed in QGIS. This can also be used in WebGIS applications.

Set the following URL in the vector tile menu.

http://localhost:8080/xyz/plateau/{z}/{x}/{y}.pbf

The sample data is distributed in vector tile format.

Yasunori Kirimoto for MIERUNE ・ Dec 21 '23

#foss4g #qgis #titiler #cog

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

Yasunori Kirimoto for MIERUNE ・ Dec 23 '22

#watercooler

Building a Map Application with Amazon Location Service v2 and MapLibre GL JS

Yasunori Kirimoto for AWS Heroes ・ Nov 18 '24

#aws #amazonlocationservice #maplibre #foss4g

Spatial Search of Overture Maps Data Using Wherobots Cloud

Yasunori Kirimoto for MIERUNE ・ Jan 6

#wherobots #geospatial #foss4g #aws

References
BBOX Server

Spatial Search of Overture Maps Data Using Wherobots Cloud

Yasunori Kirimoto — Mon, 06 Jan 2025 10:41:21 +0000

About Wherobots

Have you heard of the geospatial service called Wherobots?

Wherobots is a cloud-based platform that enables the analysis, processing, and AI utilization of geospatial data. Its strength lies in its ability to handle global-scale data in a scalable manner, and it supports a wide range of use cases, including remote sensing, optimization, and risk analysis. It also makes performing tasks such as satellite image analysis, change detection, and traffic optimization easy. It provides a UI and CLI, and an SDK for TypeScript is also available. After trying out the basic functions with the free plan, you can access more advanced functions with the professional plan or above. It was founded by the developers of Apache Sedona, and it is also distinctive in that it has a deep connection with open source. This service has been attracting a lot of attention recently, with reports of it raising 21.5 million dollars in funding.

Meeting at AWS re:Invent 2024

I first heard about Wherobots before attending this year's AWS re:Invent, when I was invited to this year's "Geo Party," which CARTO held at last year's AWS re:Invent. The invitation informed me that this year's Geo Party would be a joint event with Wherobots, and that's how I first heard about Wherobots.

On the day of AWS re:Invent 2024, I visited the Wherobots booth in the EXPO Hall. When I spoke to them, they explained in detail the geospatial data analysis platform provided by Wherobots and their technical strengths. This encounter was the inspiration for writing this article.

Joining the Overture Maps Foundation

Wherobots has also joined the Overture Maps Foundation this year.

https://wherobots.com/overture-maps-foundation-wherobots-new-member-cloud-native-geospatial-intelligence/

Wherobots' products

Wherobots has four products.

1. Wherobots Cloud
This integrated platform performs ETL (extraction, transformation, and loading), analysis, and AI processing of geospatial data in the cloud. Users can develop and analyze using Spatial SQL, Python, Java, etc., on Jupyter Notebook and perform everything from pre-processing geospatial data to the advanced model application. Currently, it supports workloads on AWS, and in the future, we are also planning to expand to other cloud environments such as Azure and GCP.

2. WherobotsDB
A cloud-native, serverless analytics engine optimized for geospatial data. It is said to be able to execute small-scale analysis to global-scale geospatial queries at speeds up to 20 times faster, and it is also expected to reduce costs compared to conventional cloud analytics engines. It supports various geospatial data formats and projection methods and achieves flexible workload processing through on-demand automatic scaling.

3. WherobotsAI
This module provides computer vision functions dedicated to remote sensing data. It enables multifaceted analysis, such as segmentation, change detection, object detection, land use classification, and climate analysis from satellite images, and is expected to be applied in a wide range of fields, including infrastructure monitoring, natural disaster prediction, and agricultural optimization.

4. Wherobots Spatial Catalog
This is a catalog function that provides integrated management and provision of large geospatial data sets. Users can easily find the data they need through keyword searches and metadata filtering and then use it for analysis smoothly in conjunction with Wherobots Cloud and WherobotsDB. It is possible to handle public, commercial, and customer-specific data in an integrated manner, and it supports data-driven decision-making.

In this article, we will try out Wherobots Cloud. By using Wherobots Cloud, it is possible to link it with other functions.

Wherobots Cloud Pricing

In this article, we will use the Community version. It is also possible to use the more advanced Professional version on AWS Marketplace. As of December 2024, the Professional version can be tried for free for up to $400 for the first 30 days.

Advance Preparation

Create an account

First, create an account.

Click on "Try Wherobots."

Enter your account information → Click on "Create Account."

Enter your organization name → Click on "Submit."

After logging in, the dashboard will be displayed.

Start the Notebook

Next, start the Notebook that will be used to process location data.

Click on "Start".

After starting the Notebook → Click on "Open."

The Notebook will be displayed.

Spatial search using Overture Maps data

Using WherobotsDB

To use WherobotsDB, create a "SedonaContext" object.

from sedona.spark import *

config = SedonaContext.builder().getOrCreate()
sedona = SedonaContext.create(config)

Check the Open Data Catalog in the Wherobots Spatial Catalog

The Open Data Catalog allows you to use Overture Maps and Foursquare data as presets.

Display the list of the Open Data Catalog.

sedona.sql("SHOW SCHEMAS IN wherobots_open_data").show()

+--------------------+
|           namespace|
+--------------------+
|            overture|
| overture_2024_02_15|
| overture_2024_05_16|
| overture_2024_07_22|
|overture_2024_01_...|
|overture_2024_05_...|
|overture_2023_07_...|
|overture_2024_06_...|
|overture_2024_09_...|
|overture_2024_08_...|
|overture_2024_10_...|
|overture_2024_03_...|
|overture_2024_04_...|
|overture_2023_10_...|
|overture_2023_11_...|
|overture_2024_06_...|
|overture_2024_07_...|
|overture_2024_02_...|
|overture_2023_12_...|
|foursquare_2024_1...|
+--------------------+
only showing top 20 rows

Display the tables in the Overture Maps database.

sedona.sql("SHOW tables IN wherobots_open_data.overture").show(truncate=False)

+---------+-----------------------------+-----------+
|namespace|tableName                    |isTemporary|
+---------+-----------------------------+-----------+
|overture |admins_administrativeBoundary|false      |
|overture |admins_locality              |false      |
|overture |buildings_building           |false      |
|overture |places_place                 |false      |
|overture |transportation_connector     |false      |
|overture |transportation_segment       |false      |
+---------+-----------------------------+-----------+

Displays the schema for the "places_place" table in Overture Maps.

sedona.table("wherobots_open_data.overture.places_place").printSchema()

root
 |-- id: string (nullable = true)
 |-- updatetime: string (nullable = true)
 |-- version: integer (nullable = true)
 |-- names: map (nullable = true)
 |    |-- key: string
 |    |-- value: array (valueContainsNull = true)
 |    |    |-- element: map (containsNull = true)
 |    |    |    |-- key: string
 |    |    |    |-- value: string (valueContainsNull = true)
 |-- categories: struct (nullable = true)
 |    |-- main: string (nullable = true)
 |    |-- alternate: array (nullable = true)
 |    |    |-- element: string (containsNull = true)
 |-- confidence: double (nullable = true)
 |-- websites: array (nullable = true)
 |    |-- element: string (containsNull = true)
 |-- socials: array (nullable = true)
 |    |-- element: string (containsNull = true)
 |-- emails: array (nullable = true)
 |    |-- element: string (containsNull = true)
 |-- phones: array (nullable = true)
 |    |-- element: string (containsNull = true)
 |-- brand: struct (nullable = true)
 |    |-- names: map (nullable = true)
 |    |    |-- key: string
 |    |    |-- value: array (valueContainsNull = true)
 |    |    |    |-- element: map (containsNull = true)
 |    |    |    |    |-- key: string
 |    |    |    |    |-- value: string (valueContainsNull = true)
 |    |-- wikidata: string (nullable = true)
 |-- addresses: array (nullable = true)
 |    |-- element: map (containsNull = true)
 |    |    |-- key: string
 |    |    |-- value: string (valueContainsNull = true)
 |-- sources: array (nullable = true)
 |    |-- element: map (containsNull = true)
 |    |    |-- key: string
 |    |    |-- value: string (valueContainsNull = true)
 |-- bbox: struct (nullable = true)
 |    |-- minx: double (nullable = true)
 |    |-- maxx: double (nullable = true)
 |    |-- miny: double (nullable = true)
 |    |-- maxy: double (nullable = true)
 |-- geometry: geometry (nullable = true)
 |-- geohash: string (nullable = true)

Spatial SQL for spatial search

You can perform various spatial searches using Spatial SQL.

Creates a "places" view from the "places_place" table in Overture Maps.

sedona.table("wherobots_open_data.overture.places_place").createOrReplaceTempView("places")

Obtains point data with attributes for name, category, and point coordinates.

sedona.sql("SELECT categories.main AS category, names.common[0].value AS name, geometry FROM places LIMIT 20").show(truncate=False)

+---------------------+----------------------------------+------------------------------+
|category             |name                              |geometry                      |
+---------------------+----------------------------------+------------------------------+
|taiwanese_restaurant |台湾料理四季紅                    |POINT (136.885079 35.343057)  |
|japanese_restaurant  |いろ川                            |POINT (139.848961 35.739373)  |
|farm                 |株式会社阿部農園                  |POINT (139.0049956 37.7329319)|
|train_station        |岩波駅                            |POINT (138.919082 35.215899)  |
|japanese_restaurant  |甲南そば                          |POINT (135.27482 34.728534)   |
|restaurant           |Cuatro                            |POINT (138.8529754 35.1067167)|
|smoothie_juice_bar   |ゴクゴク　横浜ワールドポーターズ店|POINT (139.6385154 35.4541338)|
|hotel                |Curation Hotel                    |POINT (139.0785116 35.1066403)|
|asian_restaurant     |集来軒                            |POINT (135.470227 34.717611)  |
|professional_services|株式会社CDF                       |POINT (135.1936619 34.6962007)|
|public_plaza         |深見歴史の森スポーツ広場          |POINT (139.464748 35.491567)  |
|pet_store            |うさぎ専門店ちゅらうさぎ          |POINT (138.2966425 34.8537383)|
|japanese_restaurant  |無添くら寿司横浜長津田店          |POINT (139.497489 35.521179)  |
|health_and_medical   |大滝漢方堂                        |POINT (136.5 36.05)           |
|japanese_restaurant  |焼き鳥酒場　ちょりちょり          |POINT (139.5350146 36.0305335)|
|eat_and_drink        |味のじゅん天                      |POINT (140.386382 37.399886)  |
|japanese_restaurant  |まご茶亭                          |POINT (139.071774 35.09486)   |
|gym                  |スマートフィット100大塚店         |POINT (140.408632 36.383624)  |
|NULL                 |法隆寺駅                          |POINT (135.739107 34.601617)  |
|bar                  |布施酒場かい                      |POINT (135.564394 34.663048)  |
+---------------------+----------------------------------+------------------------------+

Obtains "hiking_trail" within a 10km radius of a specified point.

sedona.sql("""
SELECT names.common[0].value AS name, categories.main AS category, geometry FROM places WHERE ST_DistanceSphere(ST_GeomFromWKT('POINT (139.7645 35.6811)'), geometry) < 10000 AND categories.main = 'hiking_trail' LIMIT 20
""").show(truncate=False)

+-----------------------------+------------+------------------------------+
|name                         |category    |geometry                      |
+-----------------------------+------------+------------------------------+
|玉川上水旧水路幡ヶ谷緑道     |hiking_trail|POINT (139.678356 35.676208)  |
|向日葵の小径                 |hiking_trail|POINT (139.756216 35.674825)  |
|荒木坂                       |hiking_trail|POINT (139.7393195 35.7115361)|
|目黒川緑道池尻大橋駅側入口   |hiking_trail|POINT (139.6854 35.651325)    |
|芝浦アイランド 遊歩道        |hiking_trail|POINT (139.750809 35.63663)   |
|大塚バラロード               |hiking_trail|POINT (139.72557 35.729693)   |
|解剖坂                       |hiking_trail|POINT (139.759613 35.721601)  |
|足立の平成五色桜             |hiking_trail|POINT (139.770207 35.759781)  |
|芸術の散歩道                 |hiking_trail|POINT (139.77332 35.7163)     |
|玉川上水旧水路世田谷緑道     |hiking_trail|POINT (139.662694 35.670916)  |
|三段坂                       |hiking_trail|POINT (139.769306 35.718932)  |
|飛鳥大坂                     |hiking_trail|POINT (139.737485 35.750156)  |
|目黒川東海禅寺裏遊歩道       |hiking_trail|POINT (139.739045 35.615981)  |
|山王男坂                     |hiking_trail|POINT (139.740707 35.674686)  |
|レインボープロムナード 台場口|hiking_trail|POINT (139.775662 35.635127)  |
|大横川の桜並木               |hiking_trail|POINT (139.794909 35.671448)  |
|白鷺坂                       |hiking_trail|POINT (139.736717 35.723212)  |
|三平坂                       |hiking_trail|POINT (139.731583 35.758)     |
|玉川上水旧水路初台緑道       |hiking_trail|POINT (139.687152 35.680788)  |
|レインボープロムナード 芝浦口|hiking_trail|POINT (139.759193 35.637868)  |
+-----------------------------+------------+------------------------------+

Create a DataFrame of the spatial search results.

trails_df = sedona.sql("""
SELECT names.common[0].value AS name, categories.main AS category, geometry FROM places WHERE ST_DistanceSphere(ST_GeomFromWKT('POINT (139.7645 35.6811)'), geometry) < 10000 AND categories.main = 'hiking_trail'
""")

Visualize the spatial search results

You can use SedonaKepler or SedonaPyDeck to visualize the spatial search results.

Visualize the spatial search results using SedonaKepler.

SedonaKepler.create_map(trails_df, "Hiking Trails")

Convert Overture Maps data to PMTiles

Use WherobotsDB

Create a "SedonaContext" object to use WherobotsDB.

from sedona.spark import *

config = SedonaContext.builder().getOrCreate()
sedona = SedonaContext.create(config)

Extract data for a specified range

Specify a range around Tokyo.

from sedona.sql.st_constructors import ST_GeomFromText
from sedona.sql.st_predicates import ST_Intersects

region_wkt = "POLYGON ((139.7543 35.7044, 139.7371 35.6921, 139.7377 35.6758, 139.7498 35.6600, 139.7734 35.6658, 139.7841 35.6793, 139.7845 35.7023, 139.7543 35.7044))"

Create a DataFrame of the "buildings" table in Overture Maps.

import pyspark.sql.functions as f

buildings_df = (
    sedona.table("wherobots_open_data.overture_2024_02_15.buildings_building")
    .select(
        f.col("geometry"),
        f.lit("buildings").alias("layer"),
        f.element_at(f.col("sources"), 1).dataset.alias("source")
    )
)
buildings_df.show()

+--------------------+---------+--------------------+
|            geometry|    layer|              source|
+--------------------+---------+--------------------+
|POLYGON ((-49.438...|buildings|Microsoft ML Buil...|
|POLYGON ((-49.438...|buildings|Google Open Build...|
|POLYGON ((-49.438...|buildings|Microsoft ML Buil...|
|POLYGON ((-49.438...|buildings|Google Open Build...|
|POLYGON ((-49.441...|buildings|Google Open Build...|
|POLYGON ((-49.440...|buildings|Google Open Build...|
|POLYGON ((-49.441...|buildings|Microsoft ML Buil...|
|POLYGON ((-49.441...|buildings|Google Open Build...|
|POLYGON ((-49.440...|buildings|Microsoft ML Buil...|
|POLYGON ((-49.442...|buildings|Google Open Build...|
|POLYGON ((-49.442...|buildings|Google Open Build...|
|POLYGON ((-49.442...|buildings|Google Open Build...|
|POLYGON ((-49.442...|buildings|Google Open Build...|
|POLYGON ((-49.442...|buildings|Microsoft ML Buil...|
|POLYGON ((-49.442...|buildings|Google Open Build...|
|POLYGON ((-49.438...|buildings|Google Open Build...|
|POLYGON ((-49.438...|buildings|Google Open Build...|
|POLYGON ((-49.439...|buildings|Google Open Build...|
|POLYGON ((-49.439...|buildings|Google Open Build...|
|POLYGON ((-49.438...|buildings|Microsoft ML Buil...|
+--------------------+---------+--------------------+
only showing top 20 rows

Create a DataFrame of the "roads" table in Overture Maps.

roads_df = (
    sedona.table("wherobots_open_data.overture_2024_02_15.transportation_segment")
    .select(
        f.col("geometry"),
        f.lit("roads").alias("layer"),
        f.element_at(f.col("sources"), 1).dataset.alias("source")
    )
)
roads_df.show()

+--------------------+-----+-------------+
|            geometry|layer|       source|
+--------------------+-----+-------------+
|LINESTRING (7.034...|roads|OpenStreetMap|
|LINESTRING (7.037...|roads|OpenStreetMap|
|LINESTRING (7.032...|roads|OpenStreetMap|
|LINESTRING (7.033...|roads|OpenStreetMap|
|LINESTRING (7.031...|roads|OpenStreetMap|
|LINESTRING (7.031...|roads|OpenStreetMap|
|LINESTRING (7.031...|roads|OpenStreetMap|
|LINESTRING (7.033...|roads|OpenStreetMap|
|LINESTRING (7.034...|roads|OpenStreetMap|
|LINESTRING (7.030...|roads|OpenStreetMap|
|LINESTRING (7.037...|roads|OpenStreetMap|
|LINESTRING (7.037...|roads|OpenStreetMap|
|LINESTRING (7.041...|roads|OpenStreetMap|
|LINESTRING (7.051...|roads|OpenStreetMap|
|LINESTRING (7.037...|roads|OpenStreetMap|
|LINESTRING (7.050...|roads|OpenStreetMap|
|LINESTRING (7.054...|roads|OpenStreetMap|
|LINESTRING (7.051...|roads|OpenStreetMap|
|LINESTRING (7.052...|roads|OpenStreetMap|
|LINESTRING (7.052...|roads|OpenStreetMap|
+--------------------+-----+-------------+
only showing top 20 rows

Create a DataFrame of the Tokyo area combining the "buildings" and "roads" tables in Overture Maps.

features_df = roads_df.union(buildings_df)

if filter:
    features_df = features_df.filter(ST_Intersects(f.col("geometry"), ST_GeomFromText(f.lit(region_wkt))))

features_df.count()

Create vector tiles

Create vector tiles of the extracted data.

from wherobots import vtiles

tiles_df = vtiles.generate(features_df)
tiles_df.show(3, 150, True)

-RECORD 0----------------------------------------------------------------------------------------------------------------------------------------------------------
 tile     | {56, 25, 6}                                                                                                                                            
 features | [1A DA B8 02 0A 05 72 6F 61 64 73 12 16 12 02 00 00 18 02 22 0E 09 A4 36 82 0D 22 01 01 01 00 01 00 01 01 12 10 12 02 00 00 18 02 22 08 09 98 36 F2... 
-RECORD 1----------------------------------------------------------------------------------------------------------------------------------------------------------
 tile     | {14552, 6453, 14}                                                                                                                                      
 features | [1A 8E 01 0A 05 72 6F 61 64 73 12 3E 12 02 00 00 18 02 22 36 09 FE 0A 8A 08 AA 01 01 0F 03 27 1E 8F 03 04 2D 06 27 22 83 02 14 9D 01 06 31 06 35 1E... 
-RECORD 2----------------------------------------------------------------------------------------------------------------------------------------------------------
 tile     | {29104, 12900, 15}                                                                                                                                     
 features | [1A 90 20 0A 05 72 6F 61 64 73 12 14 12 02 00 00 18 02 22 0C 09 D4 23 D6 3D 1A 05 56 03 38 29 0E 12 43 12 02 00 00 18 02 22 3B 09 88 21 D0 3A C2 01... 
only showing top 3 rows

Convert vector tiles to PMTiles

Convert vector tiles to PMTiles.

import os

full_tiles_path = os.getenv("USER_S3_PATH") + "tiles.pmtiles"
vtiles.write_pmtiles(tiles_df, full_tiles_path, features_df=features_df)

Visualizing PMTiles data

Visualize PMTiles data using Leafmap.

vtiles.show_pmtiles(full_tiles_path)

Visualizing simplified PMTiles data

Visualize large amounts of data by simplifying them.

sample_tiles_path = os.getenv("USER_S3_PATH") + "sampleTiles.pmtiles"
vtiles.generate_quick_pmtiles(features_df, sample_tiles_path)

Yasunori Kirimoto for MIERUNE ・ Dec 21 '23

#foss4g #qgis #titiler #cog

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

Yasunori Kirimoto for MIERUNE ・ Dec 23 '22

#watercooler

Spatial Search of Amazon S3 Express One Zone Data with Amazon Athena and Visualized It in QGIS

Yasunori Kirimoto for AWS Heroes ・ Dec 18 '23

#athena #s3 #qgis #aws

Trying Out Various QGIS Processing

Yasunori Kirimoto for MIERUNE ・ Dec 14 '22

#qgis #foss4g #gis #processing

References
Wherobots

DEV Community: MIERUNE

Building the Yamaokaya Map (Unofficial)

About Yamaokaya Map (Unofficial)

Ramen Yamaokaya Store Types

Advance Preparation

Contacting the Official Website

Data Acquisition and Processing

Map Application

Publishing Settings in Amplify Gen2

Data Acquisition and Processing

Scraping

DMS→DD Conversion

Column Name Change

CSV to GeoJSON Conversion

Creating the Map Application

Setting the Background Map

Layer Configuration

Adding GeoJSON Layers

Implementing Popups

Layer Toggling

Summary

Building a 3D Map Application Using Mapterhorn Terrain Data

About Mapterhorn

Geospatialの世界最前線を探る [2025年版] - Speaker Deck

Dataset Overview

Global Data

High-Resolution Data

Japan Data

Advance Preparation

MapLibre GL JS Starter

Creating the Map Application

FOSS4G Auckland 2025

Make It Easier to View GTFS : Building a GTFS Timetable Viewer with SvelteKit (by Xinmiao Qu)

Implementing Longest Path Analysis in QGIS with NetworkX and Python (by Xinmiao Qu)

Interactive Simulation for Visualizing Bus Locations Using GTFS Data (by Kei Yamazaki)

GeoArrow on Web; Can We Live Without GeoJSON? (by Hiroaki Yutani)

Rekichizu: A Modern Take on Japan's Historical Maps

What You Can Do

The History of Rekichizu

The Beginning: A Viral Edo-Style Map

Towards Web Map and Public Launch

Expansion with MIERUNE Inc.

Public Recognition

Collaborations

ROIS-DS Center for Open Data in the Humanities

The novel "Sapporo Tanjo (The Birth of Sapporo)"

The Making of Rekichizu

The Data

The Design

The Software

The Internationalization

The Future of Rekichizu

Try It Out!

References

Wait, Are You Still Using *Vanilla* QGIS?

How to Change QGIS’s Look

So I Made It a QGIS Plugin

Installation

Usage

Creating Background Images

Editing Presets

Conclusion

What does occur when making a million tables on Amazon Aurora PostgreSQL?

A million tables in PostgreSQL

Test condition

Result

create tables

queries

select rows from a table

Count how many tables exists

Make a snapshot and restore

Conclusion

Deploy MBTiles Server in Minutes with FastAPI and Render

Prerequisites

What are MBTiles?

🚀 Basic: Deploy Your First Tile Server

Step 1: Fork the Template

Step 2: Deploy to Render

Step 3: Verify Your Server is Running

Step 4: Visualize Your Tiles

Wait, Are You Still Using Vanilla QGIS?