and Comparative Evaluation of Web Map Libraries for Extensive 3D Geospatial Data Toshikazu Seto* *: Associate Professor Department of Geography, Komazawa University / OSGeo Charter member Co-Authors: Yohei SHIWAKU, Takayuki MIYAUCHI (Geolonia Inc.), Daisuke YOSHIDA (Osaka Metropolitan University) and Yuichiro NISHIMURA (Nara Women's University) A02 KOMAZAWA UNIVERSITY Visual Identity Guidelines จϩΰλΠϓ ,ϚʔΫʴจϩΰλΠϓͷΈ߹Θͤ ɺ ࠨͷछͰ͢ɻ ԣ جຊܗͱ͠ɺ ༏ઌతʹ༻͠·͢ɻ ԣ ϫϯϙΠϯτͳͲɺ ʮԣʯ ͕ஔ͠ʹ͍͘ ߹ʹ༻͠·͢ɻ ॎ ॎܕαΠϯͳͲɺ ࡉ͍ஔʹ༻͠·͢ɻ ඞͣϚελʔσʔλΛ༻͍ͯͩ͘͠͞ɻ ࠨهҎ֎ͷΈ߹ΘͤΛ࡞͠ͳ͍Ͱ ͍ͩ͘͞ɻ τʣ ॎ Project PLATEAU CC-BY 4.0, ODC BY and ODbL Virtual Shizuoka CC-BY 4.0
2. Methodology • Data sources and specifications ・ Data conversion workflows • Libraries and configurations test ・Performance evaluation metrics 3. Results • Overall performance comparison ・Point cloud data analysis • Building model evaluation ・MVT format performance • Visual stability metrics 4. Discussion 5. Findings and Future Works Slide Available▶
Digital Technology & Advanced Data Utilization: Crucial for solving urban problems and improving citizen services. • Digital Twins: Virtual representations of physical urban environments with wide- ranging applications, but with associated technical challenges. • 3D City Models (3DCMs) and 3D Point Cloud Data: A growing need in the era of smart cities and key to achieving seamless visualization of city data. • Visualization Performance Analysis: The paper presents a detailed examination of the development and use of 3D city models in Japan. Caprari, G.; Castelli, G.; Montuori, M.; Camardelli, M.; Malvezzi, R. Digital Twin for Urban Planning in the Green Deal Era: A State of the Art and Future Perspectives. Sustainability 2022, 14, 6263. https://doi.org/10.3390/su14106263
LAS/LAZ • 🎯 Purpose • Promote digital transformation in urban planning, hazard and infrastructure management since 2020. • Provide 1:1 scale digital twin data • 🔍 Key Features • 30TB of 3D point cloud data • 6,700 sq km coverage (entire prefecture) • Open datasets under CC BY. • No original viewer: provide 3DDB Viewer by AIST (the National Institute of Advanced Industrial Science and Technology in Japan). • https://gsvrg.ipri.aist.go.jp/3ddb_demo/tdv/index.html
CesiumJS and MapLibre GL JS across different data formats and scales 1. Quantitative Performance Comparison • Provide clear guidance for choosing appropriate technology based on use cases 2. Establish Selection Guidelines • Develop reproducible and extensible performance evaluation methodology 3. Create Evaluation Framework
Shizuoka • Geographic Features • Area: 186.85 sq km • Population: ~188,000 • Elevation range: 0m to 1,333m • Coastline: 64.5 km on Suruga Bay • Why Numazu? • Diverse terrain (mountains, plains, coast) • Selected for Project PLATEAU (1 of 56 cities) • Rich data infrastructure
Building Models • Source: PLATEAU • Format: CityGML • Unit: 1 km mesh • Total size: ~2.3 GB (city-wide) • LOD: 0-2 levels • 3D Point Cloud Data • Source: VIRTUAL SHIZUOKA • Format: LAS • Unit size: 300m x 400m • Total size: ~462 GB (city-wide) • Map Info Level: 500 2nd Grid(Mesh) 10 km x 10 km area Larger scale, scalability test 3rd Grid (Mesh) 1 km x 1 km area Smaller scale, detailed analysis
Tool: Google Chrome Lighthouse • Core Web Vitals - 5 Key Metrics FCP First Contentful Paint Time to first content display LCP Largest Contentful Paint Time to largest element display Speed Index Visual Load Progress Overall loading speed perception TBT Total Blocking Time Time page is unresponsive CLS Cumulative Layout Shift Visual stability of page layout
Why MVT Excels: • Lightweight vector data format • Optimized for 2D/2.5D building visualization (LOD1) • Native support in MapLibre GL JS • Minimal processing overhead MapLibre GL JS + MVT Best-in-class performance for building visualization Consistent across both 3rd mesh and 2nd mesh scales FCP 0.8s Speed Index 0.8s TBT 0ms LCP 〜1.4s
0.005-0.006 Good Stability Slight variations with data complexity MapLibre GL JS 0.001 Extremely Stable Consistent across all configurations ▪Key Insight: • The 5-6x difference in CLS values reflects architectural differences in 3D rendering approaches. MapLibre rendering pipeline produces more predictable and stable visual updates. ▪CLS (Cumulative Layout Shift): • Measures unexpected layout shifts during page load. Lower is better. Good: less than 0.1
Case Use MapLibre GL JS + MVT when: Simple 3D building visualization is sufficient (LOD1) Maximum performance is critical Need heatmap or clustering features Working with 2D/2.5D data Use MapLibre GL JS + deck.gl when: Processing large-scale point cloud data Need responsive user interactions Working with massive datasets TBT optimization is priority Use CesiumJS when: High-precision 3D visualization needed Working with detailed building models (LOD2+) Need rich building attribute handling Global-scale applications
applicability extends to: • WebGPU era benchmarking - 3D Tiles 1.1 evaluation - Future library development 1. Quantitative Performance Framework Lighthouse-based 5-metric evaluation methodology for 3D web mapping 2. Real-World Scale Evaluation Using actual production datasets (462GB point cloud, 2.3GB CityGML) 3. Dual-View Comparison System Custom-developed 2-screen viewer for synchronized performance analysis 4. Technology Selection Guidelines Clear, use-case-specific recommendations for library selection
established a comprehensive performance evaluation framework for web-based 3D geospatial visualization using real-world, production-scale datasets. ✓Quantified performance differences across 5 Core Web Vitals metrics ✓Demonstrated MVT superiority for lightweight 3D building visualization ✓Revealed MapLibre advantages for large-scale point cloud processing ✓Provided clear selection guidelines based on data characteristics and requirements
ora @tosseto [email protected] https://speakerdeck.com/tosseto https://tossetolab.github.io/ All source-code and results will publish by GitHub https://github.com/mapcomparejp/ ◀ Presentation Slide Available
tosseto
psj59129
koosun
andpad
hiro_eng_
.jpg){kind=avatar}
lamaglama39
hono0130
tacck
shinkyoto
yueda256
lycorptech_jp
mongolyy
amixedcolor
cassininazir
stephaniewalter
soudai
michaelherold
morganepeng
notwaldorf
reverentgeek
chrislema
addyosmani
kneath
3n
carmenintech
