Tag: leaftlet

Leaflet.js – Einstieg (Karte erstellen und Marker setzen)

von Martin

Typisch Büroalltag!

Chef kommt rein und ruft! Moin Mädels! Lasst mal kurz ne Map erstellen, wo wir unser Office mit so einem Marker markieren! Ihr wisst schon. Damit die Kunden sehen, wo wir unser Büro haben. Ich: Klar gib mir 30 Minuten und die Koordinaten vom Büro. Ah ja und den Zoomlevel und natürlich welches Mapdesign . Chef: Ja Ja mach mal, muss bloß schick sein! Chef grinst und geht.

Man nehme ein Standard HTML Gerüst und lade von einem CDN die Leaflet Bibliothek samt CSS Style. Also das kommt in den Header (zwischen head und /head ;-)).

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

Da Chefi nichts gesagt hast, ziehe ich die Karte auf Fullscreen indem ich den Style für #map mit {position:absolute; top: 0; bottom: 0; left: 0; right:0;} definiere und zwar auch im Header.

<style>
	#map {position:absolute; top: 0; bottom: 0; left: 0; right:0;}
</style>

Im Body setze ich ein Div Container der die Map anzeigen soll.

<div id="map"></div>

nun noch ein Script. Mit diesem Script initialisieren wir die Map und setzen die Koordinaten des Büros. Das Script setzen wir vor dem schließendem Body Tag.

<script>
var map = L.map('map').setView([53, 13], 9);
var map = L.map('map').setView([51.26,30.22], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);
// unseren Marker nicht vergessen
	var LeafIcon = L.Icon.extend({
		options: {
			shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',
			iconSize:     [38, 95],
			shadowSize:   [50, 64],
			iconAnchor:   [22, 94],
			shadowAnchor: [4, 62],
			popupAnchor:  [-3, -76]
		}
	});

	var greenIcon = new LeafIcon({iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png'});
	L.marker([51.26,30.22], {icon: greenIcon}).addTo(map);
</script>

Hier der ganze Code:

<!DOCTYPE html>
<html>
<head>
  <title>Simple polygon visualisation</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
  <style>
  #map {position:absolute; top: 0; bottom: 0; left: 0; right:0;}
  </style>
</head>
<body>
  <div id="map" ></div>

  <script>

	var map = L.map('map').setView([51.26,30.22], 13);

	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

	var LeafIcon = L.Icon.extend({
		options: {
			shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',
			iconSize:     [38, 95],
			shadowSize:   [50, 64],
			iconAnchor:   [22, 94],
			shadowAnchor: [4, 62],
			popupAnchor:  [-3, -76]
		}
	});

	var greenIcon = new LeafIcon({iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png'});

	L.marker([51.26,30.22], {icon: greenIcon}).addTo(map);
  </script>

 </body>
</html>

Ich hoffe Chefi wird glücklich, wenn er das sieht!?!

DEMO

SeoTheater Autoren