Leaflet Offline Demo

Um Speicherplatz zu sparen, ist der maximale Zoom auf 12 begrenzt.

Die linke Karte lädt die lokalen Kacheln, die rechte arbeitet mit Kacheln von openstreetmap.org

Kacheln lokal ablegen

Geladen werden die Tiles lokal aus dem Verzeichnis ./offlinetiles/{z}/{x}/{y}.png mit Hilfe des nachfolgenden Codes:

var southWest = L.latLng(47.3, 5.9);
var northEast = L.latLng(54.9, 15.0);
var germany = L.latLngBounds(southWest, northEast);	

var map = L.map('map',
{
  maxBoundsViscosity: 1.0,
  maxBounds: germany,
}
).setView([50.505, 7.09], 10);

var tiles = L.tileLayer('./offlinetiles/{z}/{x}/{y}.png', {
  maxZoom: 12,
  minZoom: 5,
  attribution: '© OpenStreetMap'
}).addTo(map);

Eine Beispiel Kachel

Die Image-Datei der Beispiel-Kachel befindet sich im Verzeichnis ./offlinetiles/10/537/332.png

Was bedeuten "{z}/{x}/{y}"? Antwort: Wie weiß Leaflet welche der vielen Kacheln angezeigt werden sollen.

Demo zum lokalen Testen

Wer sich nicht scheut, 1 GB herunterzuladen und zu entpacken, kann das Beispiel lokal testen: