biwak.info は、アルプスの山小屋向けのモバイルファーストのマップを開発し、OpenStreetMap と Wikidata から取得した詳細情報を持つ 33,437 の命名された山頂を追加しました。接続が限られているモバイルデバイスに最適化するため、15.4 MB という大量の山頂データを効率的に読み込む必要がありました。その解決策は、Leaflet で使用されている既存のスリッピーマップタイルグリッドを模倣して、データをより小さなタイルベースの JSON ファイルに分割することでした。これにより、ブラウザはユーザーの現在のマップビューに表示されている関連する山頂データのみを取得できます。データグリッドのズームレベルは 10 に固定され、ネットワークリクエストの数と各ダウンロードファイルのサイズのバランスが取られています。このレベルでは、アルプスのタイルは約 27x27 km で、ズームレベル 12 の典型的な電話画面は最大 6 つのタイルに触れ、中央値のタイルサイズは 13 KB (gzip 圧縮で 3.6 KB) です。Python スクリプトは、これらのタイルファイルと、空でないタイルのマニフェストを作成し、必要なファイルのみがリクエストされるようにします。各タイルの JSON データはコンパクトで、整数座標とフィールドヘッダーを使用してファイルサイズを最小限に抑えています。山頂は、異なるマップズームレベルでの表示を制御するために、プロミネンスまたはアイソレーションによってランク付けされ、低いズームではより重要な山頂のみが表示されます。クライアントサイドの JavaScript は、Leaflet の 'moveend' イベントを使用して必要なタイルを決定し、遅い接続での過負荷を防ぐために最大 4 つの並列リクエストで取得します。64 タイルの LRU キャッシュがダウンロードされたデータを管理し、現在のビューにない場合は最も最近使用されていないタイルをドロップします。山頂データは、個別の Leaflet マーカーを使用するのではなく、単一のキャンバスにレンダリングされ、パフォーマンスが向上します。マップをタップすると、読み込まれたタイル内で最近傍探索を実行して、近くの山頂を特定します。タイルベースのグリッドは、ディープリンクも自然にサポートし、特定の山頂の安定した URL を可能にします。今後の機能強化には、峠や展望台などのより多くのデータカテゴリの追加、および MapLibre のようなマッピングライブラリとの統合のためのベクタータイル (MVT) への移行が含まれます。このシステムは、サーバーやデータベースなしで大量のデータセットを効果的に処理し、単純なファイルグリッドの力を実証しています。