Aussehen und Darstellung

In diesem Kapitel zeige ich Ihnen, wie Sie die Leaflet-Karte gestalten. Am Ende wissen Sie, wie Sie Ihre eigene Ansicht erstellen und auf ihrer Website nutzen.

PreviousUntitled NextUntitled

Last updated 5 years ago

Was this helpful?

Aussehen und Darstellung

In diesem Kapitel zeige ich Ihnen, wie Sie die Leaflet-Karte gestalten. Am Ende wissen Sie, wie Sie Ihre eigene Ansicht erstellen und auf ihrer Website nutzen.

Vollbild-Karte

Um sicherzustellen, dass die Karte das ganze Browserfenster ausfüllt, nutzen Sie am besten CSS. Setzen Sie hier die Höhe und die Weite des Kartenelements div auf 100 %. Außerdem ist es erforderlich, dass das body-Element und das html-Element mit 100 % angezeigt werde.

Standardmäßig reicht dies alleine leider nicht immer aus, weil Browser unterschiedliche Werte für Abstände verwenden. Wenn Sie eine Bildlaufleiste sehen, nachdem Sie die Höhe und die Breite von body, html und div des Kartenelements auf 100 % gesetzt haben, dann ist es erforderlich, diese Standardabstände zu überschreiben.body {

009001.html

body {
	padding: 0;
	margin: 0;
}

html, body, #map {
	height: 100vh;
	width: 100vw;
}

Warum habe ich vw und vh verwendet? Prozent bezieht sich immer auf das umfassende Element, vw und vh beziehen sich auf oder Browserfensters.

Mit diesen CSS-Eigenschaften passt sich die Karte immer automatisch an die Größe des Browserfensters an. Falls Sie dies nicht wünschen, dann setzten Sie die Leaflet-Eigenschaft auf false. Standardmäßig ist diese mit true belegt. Mit gleich false bleibt die Karte an einer Position fixiert.

009002.html

var map = L.map('map', {
	center: [50.321, 7.123],
	zoom: 15,
	trackResize: false
});

Beschriftung

009003.html

var marker = L.marker([48.858370, 2.294481]).addTo(map);
marker.bindTooltip('Eiffelturm', {permanent: true});

Die Eigenschaft permanent bewirkt wenn sie mit true belegt ist, dass der Tooltip immer angezeigt wird. Setzt man permanent auf false, wird der Tooltip nur eingeblendet, wenn die Maus sich über den Marker bewegt.

In Version 1.6.0 verwendet Leaflet standardmäßig folgende Stile.

leaflet.css (Version 1.6.0)

/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-clickable {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

Der im obigen Codebeispiel hinzugefügte Tooltip wird mit diesen Stilen wie folgt gezeichnet:

Falls Ihnen das Standardlayout nicht gefällt, dann nutzen Sie eigenes CSS. Damit überschreiben Sie die Standardeigenschaften. Sie können zum Beispiel folgendes CSS nutzen:

009004.html

.leaflet-tooltip {
	background-color: red;
	border-style: none;
	box-shadow: none;
}

.leaflet-tooltip-left:before {
	border-left-color: transparent;
}

Wie der Tooltip mit diesen Eigenschaften dargestellt wird, zeigt das nächste Bild. Wie erwartet ist der Hintergrund nun rot und die Pfeilspitze ist verschwunden.

Popups

Jeden Punkt auf der Erde markieren Sie mit einem Popup und/oder einem Marker, um ihn zu kennzeichnen. Den Beschreibungstext im Popup verschönern Sie mit HTML und CSS. Das nächste Beispiel zeigt, wie Sie ein Bild zusammen mit anderen HTML-Elementen in einem Popup anzeigen.

009006.html

var baum = L.marker([50.18498, 7.02005]);

var popupContent = '<h1>Ein schöner Baum</h1>';
popupContent += ' <img src="https://picsum.photos/id/468/100/100">';
popupContent += '<br>';
popupContent += '<b>Bist du gerne in der Natur?</b> ';
popupContent += '<i>Dann besuche diesen Ort!</i>';

baum.bindPopup(popupContent);

baum.addTo(map);

Wie das Popup auf der Karte angezeigt wird, zeigt das nächste Bild.

Der Inhalt des Popup ist per Inline-Styles veränderbar.

var popupContent = '<h1>Ein schöner Baum</h1>';
popupContent += ' <img src="https://picsum.photos/id/468/100/100">';
popupContent += '<br>';
popupContent += '<b style="color: red; font-style: italic;">Bist du gerne in der Natur?</b>		';
popupContent += '<i>Dann besuche diesen Ort!</i>';

Mit dem vorhergehenden CSS-Inline-Style wird die Frage rot gefärbt.

Inline-Styles führen zu Problemen, wenn die Karte komplexer wird. Der Code wird schwerer lesbar. Deshalb ist es eine Regel, das Aussehen vom Inhalt zu trennen. Wie das mithilfe von CSS-Klassen umgesetzt wird, zeigt das nächste Beispiel.

<style>
...
.frage {
color: blue; 
font-style: italic;
}
</style>

...

<body>
var popupContent = '<h1>Ein schöner Baum</h1>';
popupContent += ' <img src="https://picsum.photos/id/468/100/100">';
popupContent += '<br>';
popupContent += '<b class="frage">Bist du gerne in der Natur?</b>		';
popupContent += '<i>Dann besuche diesen Ort!</i>';

...

Der Code ist anders, das Ergebnis ist das Gleiche.

Mehr Übersichtlichkeit erreichen Sie, wenn Sie die Inhalte im style-Tag in eine separate Datei auslagern.

Pfade

Ein Path-Objekt erstellen Sie nie direkt. Die Vektor Ebenen erben von der Klasse Path.

Wenn Sie eine Vektorebene gestalten, haben Sie in Leaflet Version 1.0.6 die Auswahl zwischen folgenden Optionen.

Option

Beschreibung

Gibt an, ob ein Strich entlang des Pfads gezeichnet wird. Setzen Sie diesen Wert auf false, um Rahmen für Polygone oder Kreise zu deaktivieren. Standardmäßig ist die Option mit true belegt.

Strichfarbe

Strichbreite in Pixel

Strichdeckkraft

Ein String, der die Form definiert, die am Ende des Strichs verwendet wird.

Ein String, der die Form definiert, die an den Ecken des Strichs verwendet wird.

Ein String, der das Strichmuster definiert.

Ein String, der den Abstand zum Strichmuster zum Starten des Strichs definiert.

Bestimmt, ob der Pfad mit Farbe gefüllt werden soll. Setzen Sie diesen Wert auf false, um das Ausfüllen von Polygonen oder Kreisen zu deaktivieren.

Füllfarbe

Deckkraft der Füllung.

Ein String, der das Innere einer Form bestimmt.

Wenn true, löst ein Mausereignis auf diesem Pfad dasselbe Ereignis auf der Karte aus (sofern nicht L.DomEvent.stopPropagation verwendet wird).

Verwenden Sie diesen Renderer für diesen Pfad. Hat Vorrang vor dem Standardrenderer der Karte.

Der für ein Element festgelegte benutzerdefinierte Klassenname. Nur für SVG-Renderer.

Im nächsten Kapitel sehen wir uns einige dieser Optionen genauer an.

Vektor-Ebenen

Polyline

Option

Beschreibung

smoothFactor

Wie vereinfacht sich die Polylinie in jeder Zoomstufe? Ein höherer Wert steht für bessere Performance und glatteres Aussehen, und ein geringer Wert bewirkt eine genauere Darstellung.

noClip

Deaktivieren Sie das Abschneiden von Polylinien.

Die Eigenschaften, die die Polyline von Path erbt, hatte ich im vorhergehenden Kapitel aufgelistet.

Die Linie, die wir im Beispiel nutzen, ist grün, 10 Pixel breit und hat eine Deckkraft von 80 %. Wir haben den Äquator grün gezeichnet! Nachfolgend füge ich zuerst den relevanten Programmcode ein und danach die Abbildung des Beispiels auf meinem Computer. Zeichen Sie selbst ein paar Linien – bitte komplexere. Spielen Sie mit den Optionen herum. Meiner Meinung nach lernt man so am meisten und kommt nebenbei auf neue Ideen.

009009.html

var lineCoordinates = [
  [0, 180],
  [0, -180]
];

var line = L.polyline(lineCoordinates, {
  color: '#00FF00',
  weight: 10,
  opacity: 0.8
});

Die Polyline besteht aus beliebig viele Punkte, sie ist in der Regel krumm und buckelig. Oder haben Sie schon einmal eine kerzengerade Straße oder einen geradlinigen Fluss gesehen?

009010.html

var lineCoordinates = [
  [0, 180],
  [45, 90],
  [90, 0],
  [45, -90],
  [0, -180]
];

Gestrichelte Linie

Eine gestrichelte Linie zeichnen Sie unter Zuhilfenahme der Option dashArray. Diese Option erbt die Polyline von der Klasse Path.

Die Option dashArray nimmt, anderes als der Name vermuten lässt, einen String entgegen – eine kommagetrennte Zahlenreihe innerhalb von doppelten oder einfachen Anführungszeichen.

Die erste Zahl steht für die Länge des ersten Striches in Pixeln. Die zweite Zahl ist der Wert für die erste Lücke in Pixeln.

Im Beispiel ist dashArray mit ‘30, 15, 5, 15‘ belegt. Dies ist ein komplizierteres Muster. Der erste Strich ist 30 Pixel und die erste Lücke 15 Pixel lang. Danach folgt ein 5 Pixel langer Strich gefolgt von einer 15 Pixel langen Lücke. Dies wiederholt sich dann solange, bis die Polyline fertig gezeichnet ist.

Zeichnen wir als Nächstes diese gestrichelte Linie und fügen diese zur Karte hinzu!

009011.html

var options = {
  dashArray: '30, 15, 5, 15',
  weight: 1,
  color: 'black'
};

Das Beispiel lässt sich schnell verändern. Probieren Sie aus, wie die Linie mit unterschiedlichen Mustern aussieht. Es keine besser Methode, um ein Gefühl für das Zeichnen von gestrichelten Linie zu bekommen. Was passiert, wenn Sie eine ungerade Zahl an Werten in der Option dashArray eintragen?

Eigene Bilder als Marker

0090012.html

var greenIcon = L.icon({
	iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
	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]
});

Das Icon fügen Sie zum Marker hinzu. Falls kein spezielles Icon beim Erstellen des Markers angegeben wird, wählt Leaflet automatisch das Standardicon.

0009012.html

L.marker([0, 0], {
	icon: greenIcon, 
	alt: 'Grünes Blatt an Koordinate 0,0'
}).addTo(map);

Wichtig ist es beim Marker Bild einen alternativen Text mit der Option alt anzugeben. Dieser wird angezeigt, wenn die Bilddatei des Icons nicht gefunden wird oder wenn ein Screenreader den Inhalt der Website vorliest.

Exkurs Marker

Ein individueller Marker auf Ihrer Karte

Wenn Leaflet einen Marker auf einer Karte anzeigt, werden gleich zwei Bilddateien angezeigt.

Zunächst wird das eigentliche Bild an die passende Stelle auf die Karte gelegt.
Danach wird ein Schatten zu diesem Bild hinzugefügt. Mit einem passenden Schatten fallen die Marker eher ins Auge. Der Schatten verleiht einem Marker eine Tiefe. So hebt dieser sich besser von der Karte ab.

Im nachfolgenden Beispiel sehen Sie den Text, der für die Anzeige des benutzerdefinierten Markers verantwortlich ist.

index_955.html

var greenIcon = L.icon({
iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png',
iconSize:     [38, 95],
shadowSize:   [50, 64],
iconAnchor:   [22, 94],
shadowAnchor: [4, 62],
popupAnchor:  [-3, -76]
});
L.marker([50.27264, 7.26469], {icon: greenIcon}).

Sehen wir uns diese Zeilen genau an: Zunächst einmal sticht die Instanziierung des Bildes hervor.

Die Bedeutung der einzelnen Optionen habe ich in der nachfolgenden Abbildung veranschaulicht. Aber zunächst einmal sehen wir uns das Problem genauer an:

Die Schwierigkeit beim Positionieren des Bildes liegt darin, die Position des Icons mit der Stelle auf der Erde, die markiert werden soll, zu verbinden. Das Bild ist in der Regel größer als der zu markierende Punkt. Außerdem enthält das Bild oft eine Art Pfeil, dessen Spitze auf den zu markierenden Punkt zeigen sollte. Zudem gibt es meist noch ein Popup, das relativ zum Bild geöffnet werden sollte. Wie also nutzen Sie die Optionen, um das Bild an der passende Stelle auf der Karte anzuzeigen?

Sie können mit der Option iconSize: [38, 95] die Größe des Bildes mitgeben. Mit der Option shadowSize: [50, 64] können Sie die Größe des Schattens beeinflussen. Wenn Sie die Werte für diese Optionen nicht setzten, wird die Originalgröße des Images verwendet. Die Option iconAnchor: [22, 94] gibt Ihnen nun die Möglichkeit, die Stelle, an der das Bild in die Karte eingefügt werden soll, zu definieren. Ohne ein Setzen dieser Option, würde die linke obere Ecke des Bildes an der Stelle, die markiert werden soll, beginnen. In der Regel ist es aber so, dass man das Bild mittig oder vielleicht sogar über dieser Stelle einfügen möchte. iconAnchor: [22, 94] fügt das Bild 22 Pixel weiter links und 94 Pixel oberhalb der zu markierenden Stelle ein. Das hört sicher kompliziert an, oder?

Ein Bild sagt oft mehr als 1000 Worte: Wenn Sie sich die nachfolgende Abbildung ansehen, wird dies klarer. Der rote Punkt stellt in der Abbildung die zu markierende Stelle dar. Für die Option shadowAnchor: [4, 62] gilt das gleiche wie für iconAnchor. Das Schattenbild wird 4 Pixel links und 76 Pixel oberhalb des roten Punktes, also der zu markierenden Stelle, eingefügt. Die Belegung der Wert in der Option popupAnchor: [-3, -76] ist meiner Meinung nach etwas verwirrend, weil im Gegensatz zu den anderen Optionen für die gleiche Wirkung ein Minuszeichen vorangestellt werden muss. Wenn Sie das Popup Fenster links obenhalb der zu markierenden Position öffnen möchten, müssen Sie bei der Option popupAnchor also ein Minuszeichen voran stellen!

Eigenschaften eines individuellen Marker

iconUrl:
Die iconUrl müssen Sie auf alle Fälle angeben.
Diese Option muss die Adresse zur Bilddatei enthalten – absolut oder relativ zu
dem Verzeichnis, in dem Ihr Skript gespeichert ist.
iconRetinaUrl:
Die iconRetinaUrl bietet Ihnen optional die Möglichkeit,
die Adresse einer für Retina Bildschirme optimierten Version des Bildes –
absolut oder relativ zu dem Verzeichnis, in dem Ihr Skript gespeichert ist –
anzugeben. Wie Leaflet dieses Bild genau optimiert,
erkläre ich Ihnen im Anschluss an die Auflistung dieser Optionen.
iconSize:
Die optionale iconSize beeinflusst die Größe, mit der das Bild angezeigt wird.
IconAnchor:
Die Option IconAnchor beschreibt die Pixelkoordinate, an der das Bild eingefügt werden soll. Die Koordinate gibt die Pixelwerte relativ zu der Stelle an, die markiert werden soll.
Achtung, verwechseln Sie die Pixel-Koordinat nicht mit der geografischen Koordinate.
PopupAnchor:
Die Option PopupAnchor beschreibt den Punkte, an dem ein Popup Fenster geöffent werden soll. Die Koordinate gibt die Pixelwerte relativ zu der Stelle an, die markiert werden soll. Wenn Sie das Pop-up Fenster links obenhalb der zu markierenden Position öffnen möchten, müssen Sie bei den Werten der Option popupAnchor ein Minuszeichen voran stellen! Sind die Werte positiv, öffnet sich das Pop-up rechts unterhalb zu markierenden Position.
ShadowUrl:
Die Option ShadowUrl enthält die Adresse zur Imagedatei, die den Schatten darstellen soll. Wenn nichts angegeben ist, wird kein Schattenbild erstellt.
ShadowRetinaUrl:
Mit der Option ShadowRetinaUrl können Sie ein Bild angeben, dass speziell für Retina Displays optimiert ist. Wie Leaflet dieses Bild genau optimiert, erkläre ich Ihnen im Anschluss an die Auflistung dieser Optionen.
shadowSize:
shadowSize beschreibt die Höhe und Breite des Bildes, dass den Schatten darstellen soll, in Pixeln.
shadowAnchor:
Die Pixel Koordinaten an der das Schattenbild eingefügt werden soll,
können Sie mit der Option ShadowAnchor übergeben.
Ansonsten gilt für diese Option das gleiche, was ich bei der Option iconAnchor geschrieben habe.
className:
Mit der Option className können Sie für beide Bilder - also dem Schattenbild und dem eigentlichen Marker Bild -
den Namen einer CSS-Klasse definieren.

Die Klasse L.Icon erweitern

So, nun haben Sie einen benutzerdefinierten Marker erstellt und möchten weitere Marker kreiere. Schön, dass Leaflet objektorientiertes Arbeiten unterstützt. So können Sie sich das Erstellen von neuen Marker Objekten sehr einfach machen. Erweitern Sie einfach die Klasse L.Icon und geben alle gemeinsamen Eigenschaften hier einmal an. Ausschließlich die besonderen Eigenschaften des Markers müssen Sie separat für jeden Marker angeben. Das nachfolgende Codebeispiel zeigt Ihnen, wie Sie drei unterschiedliche Marker, die ein paar gemeinsame Eigenschaften haben, mithilfe von einer Eltern-Klasse erstellen können. So können die drei Marker von dem Elternteil die gemeinsamen Eigenschaften erben.

 <!DOCTYPE HTML>
 <html lang="de">
 <head>
 <meta charset="utf-8"/>
 <title>Eine OSM Karte mit Leaflet</title>
 <link rel="stylesheet" href="../leaflet/leaflet.css" />
 <script src="../leaflet/leaflet.js"></script>
 </head>
 <body>
 <div style="height: 700px;" id="mapid"></div>
 <script>
 var mymap = L.map('mapid', {}).setView([50.27264, 7.26469], 8);
 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
*var LeafIcon = L.Icon.extend({
*options: {
*shadowUrl: 'leaf-shadow.png',
*iconSize:     [38, 95],
*shadowSize:   [50, 64],
*iconAnchor:   [22, 94],
*shadowAnchor: [4, 62],
*popupAnchor:  [-3, -76]
*}
*});
*var greenIcon = new LeafIcon(
*{iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png'}
*);
*var redIcon = new LeafIcon(
*{iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-red.png'}
*);
*var orangeIcon = new LeafIcon(
*{iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-orange.png'}
*);
*L.marker(
*[50.27264, 7.26469], {icon: greenIcon})
*.addTo(mymap).bindPopup("Ich bin ein grüner Marker.");
*L.marker(
*[50.27264, 6.26469], {icon: redIcon})
*.addTo(mymap).bindPopup("Ich bin ein roter Marker.");
*L.marker(
*[50.27264, 8.26469], {icon: orangeIcon})
*.addTo(mymap).bindPopup("Ich bin ein oranger Marker.");
 </script>
 </body>
 </html>
<!--index_954.html-->

Dieser Programmcodeabschnitt hat Ähnlichkeit mit dem vorherigen Beispiel. Wenn Sie genau hinsehen, finden Sie aber Unterschiede. Wir erstellen im ersten Schritt kein neues Icon Objekt um dieses Anzuzeigen, sondern erweitern die Klasse L:Icon mit der Klasse LeafIcon. Wir legen nur die gemeinsamen Optionen für das Objekt LeafIcon fest. Die URL des Bildes ist die Option, die von Marker zu Marker unterschiedlich ist. Deshalb geben wir diese beim Erweitern der Klasse in den Optionen noch nicht an.

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

Im zweiten Schritt erstellen wir drei Instanzen des LeafIcon, also des erweiterten L.Icon.

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

Und zu guter Letzt fügen wir die Marker mit dem zugehörigen Icon an die passende Stelle auf der Karte zum Kartenobjekt hinzu.

L.marker(
[50.27264, 7.26469], {icon: greenIcon})
.addTo(mymap).bindPopup("Ich bin ein grüner Marker.");
L.marker(
[50.27264, 6.26469], {icon: redIcon})
.addTo(mymap).bindPopup("Ich bin ein roter Marker.");
L.marker(
[50.27264, 8.26469], {icon: orangeIcon})
.addTo(mymap).bindPopup("Ich bin ein oranger Marker.");

Im nachfolgenden Bild sehen Sie das Ergebnis. Jeder Marker wird nun mit einem individuellen Icon erstellt. Die meisten Optionen sind gleich – allerdings hat jeder Marker seine eigene Farbe.

Vector-Ebenen dynamisch gestalten

Ich gestalte oft Ebenen um, nachdem ich sie erstellt und zur Karte hinzugefügt habe. Hierfür ist die Methode setStyle die passende Wahl.

Erstellen wir zunächst einmal eine Ebene und fügen Sie zur Karte hinzu. Das erstellte Bermuda-Dreieck sehen Sie im nachfolgenden Bild.

009013.html

var polygon = L.polygon([
	[25.36, -80.25],
	[32.23, -64.86],
	[18.38, -65.65]
], {
	color: 'black',
	fillColor: 'yellow'
});

polygon.addTo(map);

Als Nächstes ändern wir die Ebene mittels setStyle. Das geänderte Bermuda-Dreieck sehen Sie im nachfolgenden Bild.

009013.html

var polygon = L.polygon([
	[25.36, -80.25],
	[32.23, -64.86],
	[18.38, -65.65]
], {
	color: 'black',
	fillColor: 'yellow'
});

polygon.addTo(map);

polygon.setStyle({color: 'yellow', fillColor: 'black'});
polygon.setStyle({weight: 20});

Sie sehen: Sie bearbeiten den Stil einer Vektor-Ebene genauso wie Sie CSS in einem HTML-Dokument nutzen. Geändert werden nur die Eigenschaften, die Sie mit neuen Werten belegen. Alles andere bleibt so, wie es vorher war.

Weitere Beispiele zu setStyle finden Sie im Kapitel Vektor-Ebenen. Eine Abgrenzung zur gleichnamigen Methode für GeoJSON-Layer folgt hier.

GeoJSON Ebenen umgestalten

Ich hatte eben schon erwähnt, dass das Zuweisen von Stilen bei GeoJSON-Ebenen etwas anders ist. Sie sind in der Lage, die Eigenschaften dieses Layertyps alle auf einen Schlag zurück auf null zu setzen. Da ein Beispiel mehr als 100 Worte sagt sehen wir uns das praktisch an. Das Bermudadreieck sieht im Falle von GeoJSON genauso aus, wie auf der Vektor-Ebene – alles andere hätte verwundert, oder?

009014.html

var polygon = {
	"type": "Polygon",
	"coordinates": [
		[
			[-80.25, 25.36],
			[-64.86, 32.23],
			[-65.65, 18.38]]
	]
};

var polygon_geojson = L.geoJSON(polygon, {
	color: 'black',
	fillColor: 'yellow'
});

Beim Testen bin ich froh, dass es Tabula rasa gibt. Wenn ich mich zerfranst habe, dann setze ich alles auf null. Und genau hier kommt resetStyle ins Spiel. Das nächste Beispiel setzt die Eigenschaften unserer GeoJSON Ebene zurück - mithilfe von setTime zeitverzögert. setTime habe ich hier nur zur Veranschaulichung beigefügt. Das Mittel der Wahl ist die Methode resetStyle.

var polygon_geojson = L.geoJSON(polygon, {
	color: 'black',
	fillColor: 'yellow'
});

polygon_geojson.addTo(map);

setTimeout(changeStyle, 2000);

setTimeout(resetStyle, 4000);

function changeStyle() {
	polygon_geojson.setStyle({color: 'yellow', fillColor: 'black', weight: 20});
	console.log("changeStyle Funktion wird aufgerufen");
}

function resetStyle() {
	polygon_geojson.eachLayer(function (e) {
		polygon_geojson.resetStyle(e)
	});
	console.log("resetStyle Funktion wird aufgerufen");
}

Beachten Sie, dass resetStyle nur auf einzelne Ebenen angewendet wird. Wenn Sie alle Ebenen Ihrer Karte auf einen Schlag resetten, dann passiert dies mit der Methode eachLayer am schnellsten.

Der Umweg über eachLayer wirkt zunächst etwas verschachtelt, hat aber Vorteile. Meist nutzen Sie diese Methode im Zusammenhang mit Ereignissen. Im nächsten Kapitel zeige ich Ihnen die Funktion in Aktion und mehr zu GeoJSON haben Sie in Kapitel 7 schon erfahren.

Elemente auf der Leaflet-Karte hin und her schieben

Jedes HTML-Element ist mithilfe von Leaflet verschiebbar. Unsere Karte war bisher in der Vollansicht. So ist es egal, wo Sie das Element genau positionieren. Falls Ihre Karte nur einen Teil des sichtbaren Bereichs einnimmt, dann ist es relevant, wo Sie das verschiebbare Element einfügen. Wenn Sie es im body-Tag setzten, dann ist es auf der ganzen Seite verschiebbar – nicht nur innerhalb des Kartenbereichs.

009016.html

var button = document.createElement('button');
button.innerHTML = 'Verschieben Sie mich!';
button.style.position = 'relative';
button.style.zIndex = '400';
button.style.left = '50px';
button.style.top = '10px';

document.body.appendChild(button);

var draggableButton = new L.Draggable(button);
draggableButton.enable();

Wenn Sie Probleme mit der Sichtbarkeit des Elements haben, dann setzen sie den z-Index auf einen höheren Wert. Es ist erforderlich, dass ein Element relativ, absolut oder fixed positioniert ist, damit eine Änderung des z-index übernommen wird. Im nächsten Beispiel erstellen Sie eine Schaltfläche und fügen diese zunächst zur Karte und später zum body-Element hinzu. Ändern Sie position in den Wert relative, um den z-index zu nutzen. Der Wert 400 reicht, damit die Schaltfläche im Vordergrund erscheint. Wenn Sie den z-index auf einen geringeren Wert setzen, ist der Button nicht sichtbar, weil die Klasse leaflet-paneeinen z-index von 400 hat. Mit einem höheren Wert gehen Sie auf Nummer sicher. Mit den Eigenschaften top und left positionieren wir die Schaltfläche in der Nähe des Steuerelements zum Zoomen – links oben.

009015.html

var button = document.createElement('button');
button.innerHTML = 'Verschieben Sie mich!';
button.style.position = 'relative';
button.style.zIndex = '400';
button.style.left = '50px';
button.style.top = '10px';

document.getElementById('map').appendChild(button);

var draggableButton = new L.Draggable(button);
draggableButton.enable();

Sie streben es an, ein Steuerelement zu verschieben? Leaflet-Controls haben standardmäßig keine ID. Deshalb ist es erforderlich, auf die Klasse zuzugreifen. Eine Idee, dies umzusetzen, zeigt Ihnen das nächste Beispiel. Ermöglichen Sie es, die Attribution an eine andere Stelle zu schieben.

009017.html

var attribution = document.getElementsByClassName('leaflet-control-attribution')[0];
var draggableAttribution = new L.Draggable(attribution);
draggableAttribution.enable();

Steuerelemente gestalten

Jedem Steuerelement, welches Sie in Leaflet erstellen, wird automatisch eine Klasse zugeordnet. So stellt Leaflet das Design einheitlich dar. Dies hat viele Vorteile. Sogar, wenn Sie die Darstellung selbst in die Hand nehmen, ist es bequeme auf diese Klassen zurückzugreifen.

Jedes Steuerelement hat eine Hauptklasse. Der Name dieser Klasse beginnt mit leaflet-controlund endet mit dem Namen des Steuerelements. leaflet-control-attribution ist ein Beispiel von Vielen.

Unterhalb dieser Hauptklasse gibt es weitere Klassen. Das nächste Bild zeigt die Klassen des Leaflet-Control-Containers. Ich habe diese mit den Developer Tools von Firefox geöffnet.

Soweit die Theorie. Das nächste Beispiel ist für diejenigen, die die Praxis bevorzugen.

Nehmen wir an, die dominierende Farbe Ihrer Website ist türkis. Um genau zu sein: #16868F. Dann wäre es doch angebracht, wenn ihre Karte dies widerspiegeln würde. Malen Sie die Steuerelemente in Ihre Farbe an! Fangen wir mit dem Zoom an:

009018.html

	.leaflet-control-zoom a,
	.leaflet-contol-zoom a:hover {
		background-color: #16868F;
		color: whitesmoke;
	}

	.leaflet-control-zoom a:hover {
		background-color: #27979F;
	}

Mit diesem CSS Code sieht das Zoom Element wie folgt aus.

Sie haben zwei Steuerelemente in einer Ecke positioniert. In Kapitel 4 haben Sie gesehen, dass diese immer untereinander angezeigt werden.

Das gefällt Ihnen nicht. Dann positionieren Sie die Steuerelemente nebeneinander!

009018.html

.leaflet-control-scale {
	position: relative;
	left: 50px;
	bottom: 75px;
}

Wenn Sie den Aufruf dieser Methode vergessen, wirkt es, als ob Ihre Anwendung einen Fehler hätte. Vermeiden Sie dies auf alle Fälle.

Änderung der Kartengrößte - denken Sie an `invalidateSize()`

invalidateSize()überprüft, ob sich die Größe des Kartencontainers geändert hat, und aktualisiert gegebenenfalls die Karte. Rufen Sie diese Methode auf, nachdem Sie die Kartengröße dynamisch geändert haben!

009019.html

var map = L.map('map', {
	center: [50, 7],
	zoom: 5
});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

document.getElementById("map").style.width = "100vw";

map.invalidateSize();

Ohne die Zeile map.invalidateSize(); würde Ihre Karte so aussehen wie, im nachfolgenden Bild zu sehen ist. Der erweiterte Bereich wäre grau gefärbt. Mit map.invalidateSize(); wird hier die Landkarte gezeichnet.

Bilder als Hintergrund der Karte

Der Vollständigkeit halber erwähne ich hier, dass es möglich ist, ein Bild als Hintergrund deines Kartenobjektes einzusetzen. Ich habe dies einmal genutzt. Aus Datenschutzgründen wurde die Karte erst per Klick auf eine Schaltfläche geladen. Vorher habe ich den Kartencontainer mit dem Logo der Firma gefüllt, die die Website betrieb.

009020.html

<!DOCTYPE html>
<html>
	<head>
    ...
		<style>
			body {
				padding: 0;
				margin: 0;
			}
			html, body, #map {
				height: 100vh;
				width: 100vw;
			}		
			#map {
				background-image: url('http://lorempixel.com/1900/1900/');
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
		<script>
			var map = L.map('map', {
				center: [50, 7],
				zoom: 5
			});
		</script>
	</body>
</html>

Ein Bild drucke ich hier nicht ab, weil dieses Beipsiel ein Zufallsbild lädt und deshalb immer anders aussieht.

Das Zentrieren von Objekten, wenn eine Seitenleiste über der Karte eingeblendet ist.

Bei dem Einbau von Seitenleisten reagierte die Karte teilweise unerwartet, wenn Sie auf ein Objekt zoomen und dieses dabei zentriert darstellen. Zumindest dann, wenn Sie Leaflet nicht mitgeteilt haben, dass Ihre Karte mit der Seitenleiste nicht vollständig sichtbar ist.

Probieren Sie es aus. Erstellen Sie zuerst eine Seitenleiste.

009021.html

#panel {
	background-color: #000;
	color:#cacaca;
	font-size: 3em;
	width: 50vw;
	height: 100vw;
	position: fixed;
	top: 0px;
	right: 0px;
	z-index: 999;
}

Laden Sie dann Daten. In diesem Beispiel habe ich alle Länder der Erde auf der Karte eingezeichnet.

009021.html

<script src="daten/countries.js"></script>

Es sieht alles so aus, wie im folgenden Bild zu sehen ist.

Fügen Sie ein Klick-Ereignis hinzu.

009021.html

L.geoJSON(countries, {
	onEachFeature: function (feature, layer) {
		layer.on('click', function (e) {
			map.fitBounds(e.target.getBounds(), {
			});
		});
	}
}).addTo(map);

Klicken Sie als Nächstes auf Spanien. Sie erwarten sicher, dass Sie daraufhin das Land vollständig sehen. Dies ist nicht so. Leaflet weiß nicht, dass Ihre Seitenleiste den rechten Bereich verdeckt. Es zählt diesen Teil der Karte mit und als Folge wird Spanien teilweise hinter der Seitenleiste angezeigt.

009021.html

L.geoJSON(countries, {
	onEachFeature: function (feature, layer) {
		layer.on('click', function (e) {
			map.fitBounds(e.target.getBounds(), {
				paddingBottomRight: [600, 0]
			});
		});
	}
}).addTo(map);

Das Ergebnis: Ihr Klick auf Spanien bewirkt das, was Sie erwarten.

Kacheln selbst erstellen

Exkurs Kosmtik

Kosmtik ist ein modulares Open-Source-Mapping-Framework zum Verwalten des CartoCSS-Renderings von OpenStreetMap-Stylesheets und zum Erstellen von Mapnik-fähigen Rasterfeldkarten – Kacheln. Es besteht aus einem JavaScript-Node Modul und benötigt Software wie PostgreSQL, PostGIS, Python, osm2pgsql und Node.js. Kosmtik enthält Abhängigkeiten zu Mapnik und Carto.

Die empfohlene Methode zur Installation von Kosmtik ist über ein Docker-Image. Ich zeige Ihnen hier, wie Sie nacheinander alle erforderlichen Schritte unter Ubuntu 18.04. Mein Ziel ist es, Ubuntu-Pakete und offizielle PPAs zu verwenden, wann immer dies möglich ist.

Ubuntu aktualisieren

Stellen Sie sicher, dass Ihr Ubuntu-System auf dem neuesten Stand ist:

lsb_release -a

Der vorherige Befehl gibt die Ubuntu-Version zurück.

So aktualisieren Sie das System:

sudo apt-get update
sudo apt-get -y upgrade

Installieren Sie wichtige Werkzeuge

sudo apt-get -y install ca-certificates gnupg curl unzip gdal-bin tar wget bzip2 build-essential clang

Konfigurieren Sie einen Speicherbereich für Auslagerungen (Swap)

Für die nachfolgenden Installationsschritte gehe ich davon aus, dass Sie sich in Ihrem Home-Verzeichnis befinden.

Das Importieren und Verwalten von Kartendaten nimmt Platz im Arbeitsspeicher in Anspruch. Verwenden Sie einen der folgenden beiden Befehle, um zu überprüfen, ob auf Ihrem System eine Swap-Partition konfiguriert ist:

Meldet die Zusammenfassung der Swap-Nutzung (keine Ausgabe bedeutet, dass es keine Auslagerungsdatei gibt): swapon -s
Zeigt den freien und verwendeten Speicher im System an: free -h

Wenn Sie keine aktive Auslagerungspartition haben, empfehle ich Ihnen, eine Auslagerungsdatei hinzuzufügen. Zuerst verwenden wir den Befehl fallocate, um eine Datei zu erstellen. Die nächste Anweisung zeigt, wie Sie eine Auslagerungsdatei mit dem Namen swapfile mit einer Kapazität von 2 GB in der Root ihres Dateisystems anlegen.

sudo fallocate -l 2G /swapfile

Stellen Sie sicher, dass nur der Benutzer root Lese- und Schreibzugriff hat.

sudo chmod 600 /swapfile

Formatieren Sie die Datei als Auslagerungsdatei.

sudo mkswap / swapfile

Aktivieren Sie die Auslagerungsdatei.

sudo swapon / swapfile

Überprüfen Sie die Verwendung des englischen Gebietsschemas

Führen Sie das Gebietsschema aus, um die Gebietsschemas aufzulisten, die derzeit für das aktuelle Benutzerkonto definiert sind.

local

So legen Sie das Gebietsschema en_GB fest:

export LANGUAGE = de_DE.UTF-8 
export LANG = de_DE.UTF-8 
export LC_ALL = de_DE.UTF-8

Tragen Sie die exportierten Variablen in die Datei /etc/environment ein.

Installieren Sie Kosmtik

mkdir -p ~/src ; cd ~/src
git clone https://github.com/kosmtik/kosmtik.git
cd ~/src/kosmtik
npm install

Python

Yaml and Package Manager for Python

sudo apt-get install -y python-yaml

pip -V # prüft, ob pip bereits installiert ist.
sudo apt-get install -y python-pip

Mapnik Utilities

Opentstreetmap carto

cd ~/src
git clone https://github.com/gravitystorm/openstreetmap-carto.git
cd openstreetmap-carto

Schriftarten die openstreetmap-carto benötigt

sudo apt-get install -y fonts-noto-cjk fonts-noto-hinted fonts-noto-unhinted fonts-hanazono ttf-unifont

sudo apt-get install -y fonts-dejavu-core

Datenordner anlegen

cd ~/src
cd openstreetmap-carto
scripts/get-shapefiles.py

Umgebungsvariablen setzen

export PGHOST=localhost
export PGPORT=5432
export PGUSER=postgres
export PGPASSWORD=postgres_007%

localconfig.json

Erstellen Sie mit Ihrem bevorzugten Editor eine Datei mit dem Namen localconfig.json im Verzeichnis openstreetmap-carto, einschließlich der folgenden:

[
    {
        "where": "center",
        "then": [9.111, 45.111, 15]
    },
    {
        "where": "Layer",
        "if": {
            "Datasource.type": "postgis"
        },
        "then": {
            "Datasource.dbname": "gis",
            "Datasource.password": "postgres_007%",
            "Datasource.user": "postgres",
            "Datasource.host": "localhost"
        }
    }
]

Passen Sie gegebenenfalls Koordinaten Benutzer und Kennwort an Ihre Umgebung an.

 "then": [7.123, 50.123, 15]

Konfigurieren Sie die Firewall

Wenn Sie eine virtuelle Remote-Maschine vorbereiten, konfigurieren Sie die Firewall so, dass Remotezugriff auf den lokalen Port 6789 möglich ist.

Führen Sie eine cloud-basierte VM aus? Stellen Sie die VM so eingestellt sein, dass der Port 6789 geöffnet ist.

Installieren Sie PostgreSQL und PostGIS

PostgreSQL ist eine relationale Datenbank. PostGIS erweitert PostgreSQL. Mit PostGIS speichern Sie geografische Objekte. PostgreSQL + PostGIS werden für eine Vielzahl von Funktionen wie das Rendern von Karten, das Geokodieren und die Analyse verwendet.

Unter Ubuntu gibt es vorgefertigte Versionen von PostGIS und POSTgreSQL, so dass Sie diese über den Ubuntu-Paketmanager installieren.

sudo apt-get update
sudo apt install postgresql postgresql-contrib

sudo service postgresql start

Der verwendete PostgreSQL-Port ist standardmäßig 5432.

Während des Installationsvorgangs wird ein Benutzer namens postgres erstellt.

Legen Sie das Passwort für den Benutzer `postgres` fest

Wechseln Sie zu Postgres auf Ihrem Server, indem Sie Folgendes eingeben:

 sudo -i -u postgres

Greifen Sie auf die Postgres-Eingabeaufforderung zu, indem Sie Folgendes eingeben:

 psql

Sie werden bei der PostgreSQL-Eingabeaufforderung angemeldet, und von hier aus agieren Sie sofort mit dem Datenbankverwaltungssystem.

Verlassen Sie die PostgreSQL-Eingabeaufforderung, indem Sie Folgendes eingeben:

\ q

Dadurch kehren Sie zur Eingabeaufforderung von Linux zurück.

Erstellen Sie die PostGIS-Instanz

Die Standardeinstellungen verschiedener Programme, einschließlich openstreetmap-carto (Project.mml), suchen nach einer Datenbank namens gis. Erstellen Sie eine PostgreSQL-Datenbank und richten Sie eine PostGIS-Erweiterung für diese Datenbank ein.

Das in der Datenbank zu verwendende Zeichencodierungsschema ist UTF8 und die angenommene Kollatierung ist en_GB.utf8.

sudo -i -u postgres
psql 
\connect gis;
CREATE EXTENSION postgis;
CREATE EXTENSION hstore;

User

psql -U postgres -c "create user tileserver;grant all privileges on database gis to tileserver;"

Aktivieren des Remotezugriffs auf PostgreSQL

sudo gedit /etc/postgresql/12/main/pg_hba.conf

host all all 0.0.0.0/0 md5

Datenbank optimieren

shared_buffers = 128MB
min_wal_size = 1GB
max_wal_size = 2GB
work_mem = 32MB # check comments for better tuning
maintenance_work_mem = 256MB
autovacuum = off
fsync = off

sudo /etc/init.d/postgresql stop

sudo /etc/init.d/postgresql start

Osm2pgsql

So installieren Sie osm2pgsql aus dem Paket. Beachten sie, dass dabei keine aktualisierte Version installiert wird.

sudo apt-get install ppa-purge && sudo ppa-purge -y ppa:osmadmins/ppa # This if you need to downgrade osm2pgsql to the stock version

sudo apt-get install -y osm2pgsql

Holen Sie sich die OpenStreetMap-Daten

Sie müssen eine .osm oder .pbf-Datei herunterladen, um sie anschließend über osm2pgsql in die zuvor erstellte PostGIS-Instanz zu laden.

Es gibt viele Möglichkeiten, die OSM-Daten herunterzuladen.

Beispiele:

Kartendaten des gesamten Planeten:

Kartendaten von Rheinland Pfalz mit Prüfung

wget https://download.geofabrik.de/europe/germany/rheinland-pfalz-latest.osm.pbf.md5
wget https://download.geofabrik.de/europe/germany/rheinland-pfalz-latest.osm.pbf
md5sum -c rheinland-pfalz-latest.osm.pbf.md5

Daten in PostGIS laden

osm2pgsql verwendet Overcommit wie viele wissenschaftliche und große Datenanwendungen, für die eine Kerneleinstellung erforderlich ist:

sudo sysctl -w vm.overcommit_memory=1

Führen Sie die folgenden Schritte aus, um Daten aus einer .osm oder .pbf-Datei in PostGIS zu laden:

cd ~/src
cd openstreetmap-carto
osm2pgsql -s -C 300 -c -G --hstore --style openstreetmap-carto.style --tag-transform-script openstreetmap-carto.lua -d gis -H $HOSTNAME -U postgres -W  /home/astrid/rheinland-pfalz-latest.osm.pbf

Beachten Sie, dass der vorgeschlagene Prozess die Option -s (--slim) verwendet, die temporäre Tabellen verwendet, sodass für die Ausführung mehr Speicherplatz benötigt wird (und dies langsam ist), während weniger RAM-Speicher verwendet wird. Sie können die Option --drop mit -s (--slim) hinzufügen, um temporäre Tabellen nach dem Import zu löschen. Andernfalls finden Sie die Knoten, Methoden und rels der temporären Tabellen (diese Tabellen begannen als reine „Hilfstabellen“ für speicherarme Systeme, aber sie sind heute weit verbreitet, da sie eine Voraussetzung für Updates sind).

Wenn alles in Ordnung ist, können Sie zu Indizes erstellen und Benutzern gewähren gehen.

Beachten Sie, dass die folgenden Elemente verwendet werden:

hstore
die openstreetmap-carto.style
das openstreetmap-carto.lua-LUA-Skript
gis DB name

Abhängig von der Größe der Eingabedatei dauert der Befehl osm2pgsql lange.

Indizes und Benutzerrechte

Erstellen Sie Teilindizes, um die in project.mml enthaltenen Abfragen zu beschleunigen, und gewähren Sie Zugriff auf alle GIS-Tabellen, um Renderfehler beim Zugriff auf Tabellen mit dem Benutzer tileserver zu vermeiden. Fügen Sie die von openstreetmap-carto angegebenen Teilgeometrieindizes hinzu, um die Abfragen effektiv zu verbessern:

HOSTNAME=localhost
cd ~/src
cd openstreetmap-carto
scripts/indexes.py | psql -U postgres -W -h $HOSTNAME -d gis

Erstellen Sie den PostgreSQL-Benutzer tileserver und gewähren Sie allen gis db-Tabellen Rechte für den Benutzer tileserver und für alle angemeldeten Benutzer:

wget https://raw.githubusercontent.com/openstreetmap/osm2pgsql/master/install-postgis-osm-user.sh
chmod a+x ./install-postgis-osm-user.sh
sudo ./install-postgis-osm-user.sh gis tileserver

Geben Sie den folgenden Befehl ein, um alle in der GIS-Datenbank verfügbaren Tabellen aufzulisten.

~/src/openstreetmap-carto$ psql -U postgres -W -h $HOSTNAME -d gis -c "\dt+"
Password: 
                           List of relations
 Schema |        Name        | Type  |  Owner   |  Size   | Description 
--------+--------------------+-------+----------+---------+-------------
 public | planet_osm_line    | table | postgres | 273 MB  | 
 public | planet_osm_nodes   | table | postgres | 681 MB  | 
 public | planet_osm_point   | table | postgres | 69 MB   | 
 public | planet_osm_polygon | table | postgres | 494 MB  | 
 public | planet_osm_rels    | table | postgres | 25 MB   | 
 public | planet_osm_roads   | table | postgres | 41 MB   | 
 public | planet_osm_ways    | table | postgres | 544 MB  | 
 public | spatial_ref_sys    | table | postgres | 6968 kB | 
(8 rows)

Es ist wichtig, dass die Datenbank die Tabellen rels, ways und nodes enthält. Andernfalls wird es bei Aktualisierungen Probleme geben.

Kosmtik Plugins

cd ~/src/kosmtik && ./index.js plugins --install kosmtik-overpass-layer --install kosmtik-fetch-remote --install kosmtik-overlay --install kosmtik-open-in-josm --install kosmtik-map-compare --install kosmtik-osm-data-overlay --install kosmtik-mapnik-reference --install kosmtik-geojson-overlay
cd ~/src

Kosmtik ausführen

~/src/kosmtik/index.js serve ~/src/openstreetmap-carto/project.mml --localconfig ~/src/openstreetmap-carto/localconfig.json --host 0.0.0.0

PreviousUntitled NextUntitled

Last updated 5 years ago

Was this helpful?

Vollbild-Karte

Beschriftung

Popups

Pfade

Vektor-Ebenen

Polyline

Gestrichelte Linie

Eigene Bilder als Marker

Exkurs Marker

Ein individueller Marker auf Ihrer Karte

Eigenschaften eines individuellen Marker

Die Klasse L.Icon erweitern

Vector-Ebenen dynamisch gestalten

GeoJSON Ebenen umgestalten

Elemente auf der Leaflet-Karte hin und her schieben

Steuerelemente gestalten

Änderung der Kartengrößte - denken Sie an invalidateSize()

Bilder als Hintergrund der Karte

Das Zentrieren von Objekten, wenn eine Seitenleiste über der Karte eingeblendet ist.

Kacheln selbst erstellen

Exkurs Kosmtik

Ubuntu aktualisieren

Installieren Sie wichtige Werkzeuge

Konfigurieren Sie einen Speicherbereich für Auslagerungen (Swap)

Überprüfen Sie die Verwendung des englischen Gebietsschemas

Installieren Sie Kosmtik

Python

Yaml and Package Manager for Python

Mapnik Utilities

Opentstreetmap carto

Schriftarten die openstreetmap-carto benötigt

Datenordner anlegen

Umgebungsvariablen setzen

localconfig.json

Konfigurieren Sie die Firewall

Installieren Sie PostgreSQL und PostGIS

Legen Sie das Passwort für den Benutzer postgres fest

Erstellen Sie die PostGIS-Instanz

User

Aktivieren des Remotezugriffs auf PostgreSQL

Datenbank optimieren

Osm2pgsql

Holen Sie sich die OpenStreetMap-Daten

Beispiele:

Daten in PostGIS laden

Indizes und Benutzerrechte

Kosmtik Plugins

Kosmtik ausführen

Vollbild-Karte

Beschriftung

Popups

Pfade

Vektor-Ebenen

Polyline

Gestrichelte Linie

Eigene Bilder als Marker

Exkurs Marker

Ein individueller Marker auf Ihrer Karte

Eigenschaften eines individuellen Marker

Die Klasse L.Icon erweitern

Vector-Ebenen dynamisch gestalten

GeoJSON Ebenen umgestalten

Elemente auf der Leaflet-Karte hin und her schieben

Steuerelemente gestalten

Änderung der Kartengrößte - denken Sie an invalidateSize()

Bilder als Hintergrund der Karte

Das Zentrieren von Objekten, wenn eine Seitenleiste über der Karte eingeblendet ist.

Kacheln selbst erstellen

Exkurs Kosmtik

Ubuntu aktualisieren

Installieren Sie wichtige Werkzeuge

Konfigurieren Sie einen Speicherbereich für Auslagerungen (Swap)

Überprüfen Sie die Verwendung des englischen Gebietsschemas

Installieren Sie

Installieren Sie

Installieren Sie Kosmtik

Python

Yaml and Package Manager for Python

Mapnik Utilities

Opentstreetmap carto

Änderung der Kartengrößte - denken Sie an `invalidateSize()`

Legen Sie das Passwort für den Benutzer `postgres` fest

Änderung der Kartengrößte - denken Sie an `invalidateSize()`

Legen Sie das Passwort für den Benutzer `postgres` fest