Leaflet - Quickstart: Unterschied zwischen den Versionen
Aus Wikizone
Steff (Diskussion | Beiträge) |
|||
| Zeile 1: | Zeile 1: | ||
| + | == Links == | ||
| + | [[Processwire - Leaflet Map Marker Modul]] | ||
| + | [[Leaflet - Gesture Handling]] (Wichtig für Mobile Webseiten) | ||
| + | == Installation == | ||
=== Grundstruktur === | === Grundstruktur === | ||
Aktuelle Version vom 21. Februar 2019, 17:18 Uhr
Links[Bearbeiten]
Processwire - Leaflet Map Marker Modul Leaflet - Gesture Handling (Wichtig für Mobile Webseiten)
Installation[Bearbeiten]
Grundstruktur[Bearbeiten]
- Leaflet CSS einbinden
- Leaflet JS File einbinden
- HTML Map Div Element einbauen. Es sollte eine Höhenangabe über CSS definiert sein.
- Leaflet Map Objekt für das Div initialisieren. Im Beispiel wird auf
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
</head>
<body>
<div id="map_canvas" style="height:180px;"></div>
<script>
var map = L.map('map_canvas').setView([37.8, -96], 4);
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
key: '2df40c17924d4af58271ce552a7c5a0d',
styleId: 22677,
maxZoom: 18
}).addTo(map);
</script>
</body>
</html>
