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

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!?!


Leave a Comment

Your email address will not be published. Required fields are marked *

*

*

Empfholende Artikel


Javascript – Das doppelte Ausrufezeichen

April 8, 2021

Der ein oder andere hat es vielleicht schon gesehen. In Javascript gibt es das doppelte Ausrufezeichen und nicht jeder kann damit auf anhieb etwas anfangen. Mein erster Gedanke war. Doppelte Verneinung. Ein häufiges Stilelement aus der russischen Sprache. Manche denken das ist ein Operator. Wieder andere denken, dass ist ein Tippfehler. The double exclamation mark […]

Javascript Prototype mal kurz erklärt

February 19, 2021

JavaScript ist eine prototypenbasierte Sprache. Was soll das eigentlich sein? Heute werde ich euch erklären, was Prototypen sind. Was sind Prototype? Zunächst einmal sollten wir uns nicht von dem Wort “Prototyp” verunsichern lassen. Um ehrlich zu sein klingt es abstrakt und irgendwie fancy. “Prototyp” ist ein System. Dieses System erlaubt dir, Eigenschaften von Objekten zu […]

Javascript – Die geschweifte Klammer in der Funktions Parameterliste

January 27, 2021

Vielleicht habt ihr das schon mal gesehen. Eine geschweifte Klammer in der Funktionsparameterliste. Was ist das und wozu ist das gut? Um hier Licht ins dunkel zu bringen, bediene ich mich eines kleine Fallbeispiels. Im folgendem Beispiel möchte ich aus einem Objekt den Namen der Person mit der id = 8 finden. Vielleicht erkennt der […]

Wie merge ich zwei Javascript Objekte

January 15, 2021

Der Ein oder Andere wird im Laufe seiner Javascript Entwicklung an einen Punkt gekommen sein zwei JavaScript Objekte zusammenzuführen. Quasi „mergen“. Ein Fallbeispiel könnte sein, ihr habt eine JS Klasse mit einer Membervariablen vom Typ „Object“ die Texte im key-value beinhaltet. Nun wollt ihr statt „Tschüßi Kowski“ doch lieber Auf Wiedersehen ausgeben. Eine Möglichkeit ihr […]

Tailwind und VanillaJS – Toast Hawaii bzw. Notification

January 12, 2021

Stellt euch vor ihr wollt für ein Shop eine Notification oder auch bekannt als Toast ausgeben. Zum Beispiel Produkt in Warenkorb gelegt. Oder „ups, leider ist das Produkt in ihrer Größe nicht mehr vorhaben. Es gibt hier echt viele und gute Bibliotheken. Aber ich will selber eine Toaster Klasse bauen, weil mir der Overhead gerade […]

TailwindCSS und VanillaJS – Step Progress Bar

January 9, 2021

Ich persönlich finde bei Bestellvorgängen oder Behördenformularen es extrem hilfreich eine sogenannte Prozessverfolgung auf dem Bildschirm zu haben. Damit weiß man stets Bescheid, wo man gerade ist und wie lange das noch in etwa dauern kann. Ich dachte mir, es ist Samstagabend und die Kinder sind im Bett und die bessere Hälfte macht noch Steuern, […]