Landkarte

vorige Präsentation: Responsive Images | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Dynamisches Formular

Zwei Varianten:

• Google Maps - kommerziell
• Open Street Map - Creative Commons Lizenz

Statische Karte

  #map.static {
    background-size: cover;
    background-image: url(map.png); 
  }

Dynmische Karte mit leaflet

Für die Darstellung von Open Street Map

var map = L.map('map').setView([lat, lng], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

$('map').removeClass('static');

Vertiefung

• Homepage von Leaflet

Landkarte

vorige Präsentation: Responsive Images | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Dynamisches Formular