Peter Hoffmann: Loading 33,000... Note

Peter Hoffmann: Loading 33,000 Peaks on Demand with a z10 Tile Grid

biwak.info developed a mobile-first map for Alpine huts, adding 33,437 named peaks with detailed information sourced from OpenStreetMap and Wikidata. To optimize for mobile devices with limited connectivity, the substantial 15.4 MB peaks data needed to be efficiently loaded. The solution was to segment the data into smaller, tile-based JSON files, mirroring the existing slippy map tile grid used by Leaflet. This allows the browser to fetch only the relevant peak data visible in the user's current map view.A fixed zoom level of 10 was chosen for the data grid, providing a balance between the number of network requests and the size of each downloaded file. At this level, an Alpine tile is roughly 27x27 km, and a typical phone screen at zoom 12 touches at most six tiles, with median tile sizes of 13 KB (3.6 KB gzipped).A Python script creates these tile files, along with a manifest of non-empty tiles, ensuring that only necessary files are requested. Each tile's JSON data is compact, using integer coordinates and a fields header to minimize file size. Peaks are ranked by prominence or isolation to control visibility at different map zoom levels, displaying only more significant peaks at lower zooms.The client-side JavaScript uses Leaflet's 'moveend' event to determine which tiles are needed, fetching them with a maximum of four parallel requests to prevent overload on slower connections. An LRU cache of 64 tiles manages downloaded data, dropping least recently used tiles if not in the current view. Peak data is rendered on a single canvas rather than using individual Leaflet markers, enhancing performance.Tapping on the map performs a nearest-neighbor search within loaded tiles to identify nearby peaks. The tile-based grid also naturally supports deep links, allowing stable URLs for specific peaks. Future enhancements include adding more categories of data like passes and viewpoints, and potentially migrating to vector tiles (MVT) for integration with mapping libraries like MapLibre. This system effectively handles a large dataset without a server or database, demonstrating the power of a simple file grid.
CdXz5zHNQW_7Oo4LQLM3G.webp