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.

*

*

Empfholende Artikel


JS reduce()

March 21, 2022

Man hat ein array und möchte zum Beispiel alle Zahlen im Array kumulieren. Mit der Javascript Array Function reduce() geht das ganz leicht.

Return days of a month in an array

March 14, 2022

You need all days of a certain month then you can use this function: getDaysInMonth = (month,year) => new Date(year, month, 0).getDate();console.log( […Array(getDaysInMonth(3, 2022)).keys()] ); Greets!

JS flat()

March 9, 2022

Es kommt schon mal vor das man geschachtelte arrays bekommt.Zum Beispiel: Man möchte aus einem geschachteltem Array alle Werte in einem Array sammeln. Mit der array Funktion flat() ist das kein Problem. Auch mehrstuffig verschachtelte Arrays kann man geradeziehen (flatten). Indem man der flat Funktion die Anzahl der verschachtelungen die aufgelöst werden sollen, mitgibt. Da […]

JS bind()

March 8, 2022

Ein einfaches besipiel um JS bind() function zu verdeutlichen:

Javascript – Fakultät berechnen

January 19, 2022

Ab und an braucht man das und nicht nur in der Kombinatorik. Wer es etwas übersichtlicher braucht (und dazu zähle ich mich auch) kann es auch in einer for schleife machen.

Javascript – Was ist eigentlich Promisification?

January 6, 2022

“Promisification” ist ein lange Wort für eine ganz simple Sache. Es geht eigentlich um die immer gleiche Frage, sobald man das erste Mal in JS eine API Anfrage stellt. Wie krieg ich das Zeug in den globalen Scope? Man bedient sich ganz einfach damit, die asynchronität zu stoppen und mal ein päuschen einzulegen. Sobald dann […]