Geocoding in Verbindung mit einer Leaflet-App

Gestern schrieb ich in einem Artikel, wie Adressen aus Koordinaten mittels des Dienstes Nominatim, unter Zuhilfenahme von OpenStreetMap-Daten, ermittelt werden können. Mithilfe der freien Bibliothek Leafleat, kann dies nun in eine kleine Webapplikation gegossen werden.

Anhand der Geo-Koordinate wird die Adresse ermittelt und dargestellt.

Ziel ist es eine Applikation zu bauen, welche eine Karte darstellt und bei einem Klick auf diese Karte den Geocoding-Dienst anfragt. Sobald die Antwort vom Dienst eingetroffen ist, soll in einem Pop-up die Adresse dargestellt werden. Nachdem ein Grundgerüst in Form einer HTML-Datei erstellt wurde, werden dort die benötigten Bibliotheken (Leaflet und jQuery) eingebunden. Anschließend kann die Karte erzeugt werden. Damit diese im Vollbild dargestellt wird, findet sich eine entsprechende CSS-Definition in der Datei:

<style type="text/css">
	body {
		padding: 0;
		margin: 0;
	}

	html, body, #map {
		height: 100%;
	}
</style>

Anschließend kann der TileLayer angelegt werden und der Map zugewiesen werden:

// Options
var centerLatitude=53.49577;
var centerLongitude=13.30873;
var zoomLevel=15;

// Define layer
var openStreetMapLayer = new L.TileLayer(
		'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
		{attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>'});

// Define map
var map = L.map('map', {
	center: new L.LatLng(centerLatitude, centerLongitude),
	zoom: zoomLevel,
	layers: [openStreetMapLayer]
});

Für die Karte muss im nächsten Schritt ein Click-Event definiert werden, welches den AJAX-Request gegen den Geocoding-Dienst auslöst und den Marker erstellt. Der jeweilige Marker wird in eine separate Ebene gepackt und beim nächsten Klick wieder gelöscht und anschließend ein neuer Marker erstellt:

// Marker managment
var markerLayer;
map.on('click', function(e){

	// Console debug
	var coord = e.latlng;
	var lat = coord.lat;
	var lng = coord.lng;
	console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);

	// Marker managment		
	if(markerLayer != undefined) {
		map.removeLayer(markerLayer);
	}
	
	markerLayer = new L.Marker(e.latlng);
	map.addLayer(markerLayer);

	// Call geocode api
	var request =	$.ajax({
		method: "GET",
		url: "https://nominatim.openstreetmap.org/reverse?lat=" + lat + "&lon=" + lng + "&format=json"
	});

	request.done(function( json ) {
		console.log(json);
		markerLayer.bindPopup(json.display_name).openPopup();
	});
});

Am Stück sieht die Applikation wie folgt aus:

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet address encoder</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
	
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
		}

		html, body, #map {
			height: 100%;
		}
	</style>
	
	<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div id="map"></div>
	
	<script>
	        // Options
		var centerLatitude=53.49577;
		var centerLongitude=13.30873;
		var zoomLevel=15;
		
		// Define layer
		var openStreetMapLayer = new L.TileLayer(
				'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
				{attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>'});
		
		// Define map
		var map = L.map('map', {
		    center: new L.LatLng(centerLatitude, centerLongitude),
		    zoom: zoomLevel,
		    layers: [openStreetMapLayer]
		});
		
		// Marker managment
		var markerLayer;
		map.on('click', function(e){

			// Console debug
			var coord = e.latlng;
			var lat = coord.lat;
			var lng = coord.lng;
			console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);

			// Marker managment		
			if(markerLayer != undefined) {
				map.removeLayer(markerLayer);
			}
			
			markerLayer = new L.Marker(e.latlng);
       		map.addLayer(markerLayer);

			// Call geocode api
			var request =	$.ajax({
				method: "GET",
				url: "https://nominatim.openstreetmap.org/reverse?lat=" + lat + "&lon=" + lng + "&format=json"
			});

			request.done(function( json ) {
				console.log(json);
				markerLayer.bindPopup(json.display_name).openPopup();
			});
  		});
	</script>
</body>
</html>

Alternativ kann der Quelltext heruntergeladen bzw. ausprobiert werden.

Google Fonts herunterladen

Im Rahmen der DSGVO wird unter anderen Datensparsamkeit gefordert; bei vielen Webseiten ist dies leider nicht immer gegeben. So findet häufig die Einbindung der Google Fonts vor. Jetzt ist es per se nicht verwerflich Google Fonts zu nutzen, allerdings sollten diese Fonts lokal eingebunden werden. Wenn dies nicht geschieht und sie direkt über das CDN von Google eingebunden werden, überträgt man bei jedem Aufruf entsprechende Daten an Google.

fonts.google.com

Um dies zu unterbinden, sollte die gewünschte Schriftart heruntergeladen werden und anschließend lokal in die eigene Webseite bzw. das eigene Projekt eingebunden werden. Hierfür bietet sich der google-webfonts-helper von Mario Ranftl an. Dort wählt man die gewünschte Schriftart aus und kann diese anschließend herunterladen. Neben dem eigentlichen Font wird auch entsprechendes CSS zu Einbindung bereitgestellt. Genutzt werden kann der google-webfonts-helper nicht nur über die Weboberfläche, sondern auch über eine entsprechende REST-API.

Der google-webfonts-helper

Der Quelltext des google-webfonts-helper kann über GitHub bezogen werden. Lizenziert ist das Projekt unter der MIT Lizenz und damit freie Software.

Seitenumbrüche beim EPUB-Export unter Ulysses

In bestimmten Fällen benötigt man in EPUB-Dokumenten einen Seitenumbruch. Mit der App Ulysses lässt sich ein solcher Umbruch allerdings nicht in der Standardkonfiguration realisieren. Stattdessen ist etwas Handarbeit vonnöten.

Die Style-Verwaltung von Ulysses unter Mac OS X

Die Style-Verwaltung von Ulysses unter Mac OS X

Im ersten Schritt muss ein neuer Stil angelegt angelegt. Dieser Stil wird anschließend bearbeitet und am Ende des Stiles folgender CSS-Schnipsel hinzugefügt:

hr {
	page-break-after: always;
	visibility: hidden;
}

Wird das Dokument nun mit diesem EPUB-Style exportiert, so wird jedesmal wenn im Quelltext ein:

----

genutzt wird, automatisch ein Seitenumbruch im EPUB erzeugt.

CSS Selektoren zusammenführen

Gestern suchte ich nach einer Möglichkeit die CSS-Selektoren von zwei unterschiedlichen Dateien sauber zusammenzuführen. Zwar gibt es eine Menge Webdienste, welche CSS verdichten und minimieren, allerdings haben diese meist ein Problem mit der sauberen zusammenführen der Selektoren.

Devilo.us

Devilo.us

Fündig geworden, bin ich schließlich beim Webdienst Devilo.us, welche die gestellte Aufgabe ohne Probleme meistert. In den erweiterten Optionen kann man die Optimierung nach seinen Wünschen konfigurieren, so unter anderem auch ob Selektoren zusammengeführt werden sollen oder nicht.

Der Zen-Hintergrund-Generator

Für ein kleineres Webprojekt war ich auf der Suche nach einem brauchbaren Hintergrund. Allerdings wollte ich kein klassisches Hintergrundmuster, sondern etwas was wie aus einem Stück wirkte, ohne das es sich dabei um ein Bild handelt welcher nur gestretcht wird.

Der Generator

Der Generator

Fündig geworden bin ich beim Zen Background Generator welcher unter mudcu.be/bg/ zu finden ist. Dort kann man in einigen wenigen Schritten den gewünschten Hintergrund erzeugen. Dazu werden die Textur, der Gradient und einige andere Kleinigkeiten eingestellt. Anschließend erzeugt der Generator den passenden Hintergrund. Das ganze kann das als Bild, oder als CSS Anweisungen mit den entsprechenden Kacheln exportiert werden.