Leaflet - Quickstart: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 16: | Zeile 16: | ||
</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> | ||
Version vom 24. Oktober 2012, 19:50 Uhr
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
<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>
