MapLibre

Fixing Custom Marker Lag on Zoom in MapLibre GL JS with GeoJSON Layers

Introduction When placing custom markers on a map with MapLibre GL JS, a common approach is to pass custom DOM elements to maplibregl.Marker. This allows flexible CSS styling, such as round markers with count badges. However, this approach has a problem: markers lag behind the map during zoom and pan operations. The lag becomes particularly noticeable with many markers or on mobile devices, and zooming out can cause coastal markers to appear over the ocean. ...

March 14, 2026 · 4 min · Nakamura

IIIF Georeference to XYZ Tiles

A tool for generating XYZ tiles from IIIF Georeference Extension JSON and displaying them with MapLibre GL JS. Repository: https://github.com/nakamura196/iiif-georef-tiles GitHub Pages: https://nakamura196.github.io/iiif-georef-tiles/ Requirements Python 3.x GDAL (gdal_translate, gdalwarp, gdal2tiles.py) Installing GDAL # macOS (Homebrew) brew install gdal # Ubuntu/Debian sudo apt install gdal-bin python3-gdal Usage python3 scripts/iiif_georef_to_tiles.py <IIIF_GEOREF_JSON_URL> Example python3 scripts/iiif_georef_to_tiles.py https://nakamura196.github.io/iiif_geo/canvas.json Options Option Default Description --scale 0.25 Image scale factor --zoom 14-18 Tile zoom level range --output-dir docs Output directory --name tiles Tile folder name --work-dir work Working directory --keep-work - Do not delete working files Processing Flow IIIF Georeference JSON │ ▼ ┌───────────────────────┐ │ 1. Fetch JSON │ │ (fetch from URL) │ └───────────────────────┘ │ ▼ ┌───────────────────────┐ │ 2. Download image │ │ (IIIF Image API) │ └───────────────────────┘ │ ▼ ┌───────────────────────┐ │ 3. Embed GCPs │ │ (gdal_translate) │ └───────────────────────┘ │ ▼ ┌───────────────────────┐ │ 4. Coordinate │ │ transformation │ │ (gdalwarp) │ └───────────────────────┘ │ ▼ ┌───────────────────────┐ │ 5. Generate tiles │ │ (gdal2tiles.py) │ └───────────────────────┘ │ ▼ ┌───────────────────────┐ │ 6. Generate HTML │ │ viewer │ │ (MapLibre GL JS) │ └───────────────────────┘ Conversion Results Original image After georeferencing Output Files docs/ ├── index.html # MapLibre GL JS viewer ├── source.json # Original IIIF Georeference JSON └── tiles/ # XYZ tiles ├── 14/ ├── 15/ ├── 16/ ├── 17/ └── 18/ Local Preview cd docs && python3 -m http.server 8000 # Open http://localhost:8000/ IIIF Georeference Extension The IIIF Georeference Extension is an extension specification for adding georeference information to IIIF images. ...

January 21, 2026 · Updated: January 21, 2026 · 2 min · Nakamura

IIIF Georeference Viewer Migration to MapLibre GL and Feature Improvements

This article was created by AI with human additions. Overview We migrated the map component of the IIIF Georeference Viewer from Leaflet to MapLibre GL and implemented multiple feature improvements. This article explains the major features implemented and their technical details. https://nakamura196.github.io/iiif_geo/ Major Improvements 1. Automatic Image Rotation To display IIIF images in the correct orientation on the map, we implemented a feature that automatically calculates the rotation angle from control points (corresponding points). ...

August 20, 2025 · Updated: August 20, 2025 · 4 min · Nakamura

Added Route Registration Feature to the "Rekichizu x Next.js" Site

Overview I added a route registration feature to the “Rekichizu x Next.js” site. Below is a display example. References The “Rekichizu x Next.js” site is introduced in the following article. As a precedent for displaying routes using “Rekichizu”, the following example exists. https://codh.rois.ac.jp/edomi/route/ This time, I added a route creation feature based on the above example. Usage Access the site. https://rekichizu-next.vercel.app/ja/ Click “Manage My Routes”. Login is required, so log in using the button in the upper right. ...

April 14, 2025 · Updated: April 14, 2025 · 2 min · Nakamura

Using Rekichizu with Next.js

Overview I looked into how to use Rekichizu (historical maps) with Next.js, so here are my notes. Background In the following article, I introduced how to use “Rekichizu.” Then, I learned that the “nationwide version was released” on April 4, 2025. https://rekichizu.jp/ So I investigated how to integrate it into an application built with Next.js. Demo App I prototyped the following application. https://rekichizu-next.vercel.app/ja/ For the investigation, I aimed to reproduce features such as map switching, overlay, and search functionality provided on the official site. For this implementation, I used the following React library. ...

April 9, 2025 · Updated: April 9, 2025 · 1 min · Nakamura