Leaflet - Quickstart: Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „Leaflet CSS und JS Files einbinden und ein Map Element einbauen. Wichtig: Höhenangabe über CSS. <pre> <html> <head> <link rel="stylesheet" href="http://…“) |
Steff (Diskussion | Beiträge) |
||
| (3 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | Leaflet CSS | + | == Links == |
| + | [[Processwire - Leaflet Map Marker Modul]] | ||
| + | [[Leaflet - Gesture Handling]] (Wichtig für Mobile Webseiten) | ||
| + | == Installation == | ||
| + | === Grundstruktur === | ||
| + | |||
| + | # 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 | ||
<pre> | <pre> | ||
| Zeile 11: | Zeile 20: | ||
</head> | </head> | ||
<body> | <body> | ||
| − | <div id=" | + | <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> | </html> | ||
</pre> | </pre> | ||
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>
