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).

Feature Overview

  • Automatically calculates the angle to rotate the image so that north faces up, based on corresponding points between image coordinates and geographic coordinates
  • Determines the optimal rotation angle from distribution patterns of 2 points or 3 or more points
  • Saving and restoring rotation angles via URL parameters

Implementation Highlights

e}xpc)cccruo;oooetrnfnnntitFs.CssCsulitpattatrsfnrlln/udvocigcrcnapumeuonactlelgoltolthiraVVaarciedtteettmuoFiecceialnteettolawasrootnitcot?orrhDzeau.teeeIlmrra==gAmcoeetanausssi{{n=ggltooglea=unxxugeRtdr::le(oeifcaaortIseenigrAoamtaCgmenttaatolgodgaignuoe22iltoetrr..feinRedfxlfFo.opssrnerntto.o-groDsaif&memetni&i-nNgitlvmco)ostfegger;ne.c1et((rgt.orhff(eox1eDeo(or,.learfmslagt)eyntumti:gi-ro=rn,ver>yieise?imym:.mg:tgaca2oAFcog.gnecoeyengaurooltrdc-2reuaio.tDrtnoilheeearmag[tdgt;]aei1)nsn.-:gayltgRee}eo;otcs1aay.tlslictaouetnlmCa}ata;lincodunl)gaetoigornaRpehsiucltco|ornduilnlat{esystem

UI Implementation

  • Auto-rotation button (wrench icon) placed in the OSD viewer
  • Automatically calculates rotation angle when the rotation parameter is not specified
  • Manual angle adjustment slider also provided

2. Migration from Leaflet to MapLibre GL

Background of Migration

  • Performance improvement: MapLibre GL’s WebGL-based rendering improves performance when displaying large numbers of markers
  • Smooth animations: Smoother animations during map panning and zooming
  • Vector tile support: Ability to display vector tiles in addition to raster tiles

Implementation Highlights

iicm}mmoa)ppnpcscza;oosMIoteotrrtannynotttpstltmrmLtaee:i{"aiai:rbmpbnn:zuMaIrcemotapneeraioipls.:pnmo,itGvSi_nbaLamtt.CNrnlayivoaeciuplaanv-eneCelltigiosCurgl=t=n.eeoa/itvn,ltdranaat:iieleileosfiwnurfnt<zee,aCMaMr[lmata.0snapipv]etpo(a.rl|n{lsoiutlbney,ru!lel,eM-l,ag>rl(k.necursl,sl")P;;opup}from"maplibre-gl";

3. Current Location Display

We implemented a feature to display the user’s current location on the map using the browser’s Geolocation API.

Implementation Details

  • Custom control button addition (pin icon)
  • Current location retrieval and automatic map navigation
  • Current location visualization with a blue marker
c}o;ni}sftn)(a;fnv(}(}oaip,ecvgoccm}crauiasooa)urlsgtinnpcz;r...oeCaotssIeorssarrutrittnnoeeed)tro.ostmnttd(rrgn{cte:tLPT=te.e)uarLnoo>(ngolrn:1ogp('tel=arc5cLum{FLoo>teecaapaaolcin.utt(picoa{ttvri(nIlactuLarocenetaidnlenuwsditoegunMrtoin,LetarPatno.a!Lreononglt.nknpc=)eo:fgetuertnlLrLp.e{CgLya.n(vtuinTtvg)arrtgo,aL.li=ruL(lasue>eda{uteevnete)t)e{tLH;P}i=TlokMos=enLcie(atp=wttio(ios[M'onilaCn(toruinkriogernniref.t(nocu{trodmoecLar,ootdlcisloao;artnt:i'io)t'n)u#';d4)e0)]8);0FF'})

4. Multiple Map Style Switching

We implemented the ability to dynamically switch between different map styles.

Supported Map Styles

  • OpenStreetMap: Standard map display
  • Aerial Photography: Aerial photos provided by the Geospatial Information Authority of Japan
  • Rekichizu: Historical map style provided by Mierune

Implementation Highlights

  • Data persistence during style switching
  • Reconfiguration of clustering and markers
  • Layer selector UI
c}o;nicclmm}sfuoeaa)trntppi}i};(rsSAIRIffsietacpnenswnnvupsss((eidtserltttcgtteStryaoauReucxtydenrnreophylanncecr-jCM=letteeeeasla=eaLw.d.ndoup=I=ovavtdnsSnbcsataLDttcdmeatlalocaeyueaftyuucutrlrxpoileaearaier.Sroe.f.tr.nevtenstoievg=nayDeenonaWtllsatrcntli(SuettSeDutitesyats(alehny.lyt'to)Ddl=ve=lyiacaeeaeld)a{txIilcc(elta:nnuhuse{i(ddeartl'ognee[nryo,neuxxigelaom.;nenedmjbvdt)saseaeL;rorlxo=kn)u]c>eDe.ara=)st{t>tiaryo.{elnvteMau;alrrunke;e)r;.value?{...}:null;

5. Marker Clustering

We implemented clustering functionality for efficiently displaying a large number of markers.

Feature Details

  • Automatic grouping of nearby markers
  • Display of marker count within clusters
  • Zoom-in behavior on click
  • Popup display for individual markers
c}o;nm}m}sa)a)tptdccc;pitsfp};IyalllCIdyoiasnptuuuln:puli']']eseasssusertnc,ctt::tttst':ceti''''i'234uaeeetacer:rs###rs000pn'grrrenl'::ct5ffct,,Ccge:MRrcuc{le112leleeoaaesi'[epbf8ep13u.ojtxdl.trp'-'b0c-'00svjsrZiavecohc,d7br,,,tasououyarliao651aeloneoselsensl['''d[run,,m:ru''t'o',,i'ie':e,,s,rgugn.,5.''e13sega10a,':t00'tWd4dp',,:'id,do[,,tSLi[hoan''Duytppare_ootcrciiae(onn({utt='n__ptcc(o'oogi]uuen,nnotttjs''s']]o,,,n:{any)=>{

6. State Management via URL Parameters

We implemented a feature that saves the map state (zoom level, center coordinates) as URL parameters, generating shareable links.

Supported Parameters

  • mapZoom: Zoom level
  • mapLat: Latitude
  • mapLng: Longitude
  • lat, lng: Direct coordinate specification (legacy support)
c}o;ncpppcwsoaaaoitnrrrnnsaaasdutmmmtopssswdp...n.aasssehtreeewieatttUsMm(((rtas'''lopmmmrU=aaa=yRppp.LnZLL`rPeoan$eawotg{prm''wlaU',,iamR,ncsLlldeSzanoS=eotgwtao...armttltc_oooeh.FFc(=Pviia{>aaxxt}rleei,{auddome((ns.66.'(t))p,wo))aiS;;tnnthedrnwoiaUwnmr.gell(})o)?;c)$a;{tpiaorna.msse.atrocSht)r;ing()}`;

7. Other Improvements

Enhanced TypeScript Support

  • Improved code quality through added type definitions
  • Leveraging MapLibre GL type definitions

Responsive Design

  • Improved usability on mobile devices
  • Touch gesture support

Performance Optimization

  • Optimized URL updates using debounce
  • Efficient data management during style switching

Technology Stack

  • Framework: Vue 3 + Nuxt 3
  • Map Library: MapLibre GL JS v4.7.1
  • UI: Vuetify 3
  • Language: TypeScript

Summary

The migration from Leaflet to MapLibre GL achieved both performance improvements and feature enhancements. In particular, the multiple map style switching feature makes it easier to compare historical and modern maps, enabling deeper understanding of the geographic context of IIIF images.

In the future, we are considering adding 3D terrain display and more advanced visualization features.