Blog

 

Kontakt

Telefon:
+49 6151 46082-00

E-Mail:
info@capcom.de

   
Gefiltert nach CAPCom WebTeam Filter zurücksetzen

Routenplaner mit Leaflet

23. Februar 2024, CAPCom WebTeam - Tipps & Tricks

 
 

Eine immer wieder nachgefragte Komponente für Webseiten ist eine Wegbeschreibung mit Routenplanung. Die Einbindung von Dienstleistern wie Google oder Bing erfordert jedoch die Einwilligung der Besucher zur Nutzung dieser Dienste unter Berücksichtigung der DSGVO. Bei der Verwendung von Leaflet mit OpenStreetMap, der Leaflet Routing Machine und Nominatim kann dies vermieden werden. Alle verwendeten Dienste können dank OpenSource auf Wunsch auch lokal installiert werden.

Diese Anleitung zeigt nur einen sehr kleinen und reduzierten Ausschnitt der Möglichkeiten, um einen schnellen Einstieg zu ermöglichen, aber auch den der am häufigsten auf Webseiten Verwendung findet: die Kartendarstellung des Standortes mit der Möglichkeit der Routenplanung von der Adresse des Besuchers (einzugeben) und dem Standort des Webseitenbetreibers (vorgegeben).

Die verwendeten Bibliotheken können hier heruntergeladen werden und liegen bei unserem Beispiel auch lokal auf unserem Filesystem bzw. Webserver:

Der erste Teil unserer HTML-Seite lädt die Bibliotheken und die zugehörigen Stylesheets. Diesen Teil erklären wir in diesem Artikel nicht.

<!DOCTYPE HTML>
<html>
<head>
<title>Routenplaner Mini</title>
<meta charset="utf-8" /> 
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<link rel="stylesheet" href="Control.Geocoder.css" />
<script src="Control.Geocoder.js"></script>
<link rel="stylesheet" href="leaflet-routing-machine.css" />
<script src="leaflet-routing-machine.js"></script>
<style>
.karte {
   position: relative;
   width: 100%;
   aspect-ratio: 4 / 3;
}
</style>
</head>

Den zweiten Teil unserer HTML-Seite erklären wir jetzt detaillierter. Alle Abschnitte folgen dem ersten Teil, natürlich ohne die Erläuterungen.
Wir bauen uns einen Abschnitt (div) im body der HTML-Seite zur Aufnahme unserer Karte.

<body>
<div id="karte" class="karte"></div>

Unser Script-Teil beginnt mit der Initialisierung der Kartenvariable. Durch das 'setView' setzen wir den primär sichtbaren Bereich der Karte durch Angabe des geographischen Mittelpunktes ( 49.87133, 8.624618) und des Zoomfaktors (19). Das muss natürlich auf die gewünschten Werte angepasst werden.

<script>
var karte = L.map('karte').setView([49.87164, 8.6243], 19);

Der Zielmarker (der entspricht hier dem Mittelpunkt der Karte vom Anfang) wird gesetzt und um eine zugehörige Beschriftung ergänzt.

var marker = L.marker([49.87164, 8.6243]).addTo(karte);
marker.bindPopup("<b>CAPCom AG</b>Ihre Webagentur").openPopup();

Wir konfigurieren hier den zu verwendeten Web Map Tile Service (WMTS), in diesem Fall den von OpenStreetMap angebotenen Demo-Service. Für den produktiven Betrieb benötigen sie entweder einen Link von einem der verfügbaren kommerziellen Dienstleister oder einen eigenen WMTS. Die Daten der Kacheln (Tiles) von OpenStreetMap sind frei verfügbar. Ergänzt wird auch der notwendige Copyright-Hinweis.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(karte);

Jetzt konfigurieren wir die Navigation. Dazu nutzen die Funktion 'L.Routing.control'. Wir definieren den Beginn und das Ziel der Route. Den Beginn lassen wir allerdings offen, damit der Besucher seine eigene Adresse eintragen kann. Als Ziel wird der Ort des Zielmarkers, den wir schon konfiguriert haben, verwendet.

L.Routing.control({   
    waypoints: [
                L.latLng(),
                L.latLng(marker.getLatLng())
               ],

Weitere Optionen betreffen das Verhalten der Routing-Funktionalität, das Aussehen der Linie (lineOptions), ob das Routing auch beim Verschieben der Marker aktiv sein soll (routeWhileDragging), ob die Karte entsprechend der angezeigten Route gezoomt und positioniert werden soll (fitSelectedRoutes) und die angezeigte Sprache (language).

lineOptions: { styles: [{color: 'blue', opacity: 1,weight: 5}] },
routeWhileDragging: true,
fitSelectedRoutes: true,
language: 'de' ,

Jetzt aktivieren wir den Geocoder Nominatim. Mit diesem wandeln wir die Texteingaben in Längen- und Breitengrade um, die auf der Karte dargestellt werden können. Das funktioniert auch in die andere Richtung. Dies erkennt man daran, dass in der Routingeingabe unser Zielmarker als Adresse dargestellt wird.

geocoder: L.Control.Geocoder.nominatim()
}).addTo(karte);
</script>
</body>
</html>

Damit ist der Routenplaner fertiggestellt. Er enthält natürlich keine Anpassungen an den Stil der Website oder eine Integration in ein CMS, wo es manchmal einfacher ist, mit entsprechenden Extensions oder Plugins zu arbeiten.

Das komplette Beispiel kann hier heruntergeladen werden. Das Abrufen der Kacheln bei OpenStreetMap und das Umwandeln der Adressen via Nominatim erfordern in unserem Beispiel Internetzugriff.

 


Unsere neuen Webseiten Pakete sind da!

23. Januar 2024, CAPCom WebTeam - E-Commerce

 

Unsere Webseiten Pakete reichen von schlichten HTML/CSS-Webseiten bis hin zu dynamischen Lösungen mit Content Management Systemen wie TYPO3 oder WordPress. Sie können selbst entscheiden, was am besten zu Ihnen passt. Ihre individuelle Webseite aus dem Basic Paket erhalten Sie schon zum Beispiel ab nur 650 Euro.

In der digitalen Welt von heute ist eine starke Online-Präsenz unerlässlich. Egal ob Kleinunternehmer, Freiberufler oder mittelständisches Unternehmen. Es könnte für das weitere Wachstum und die Benutzerfreundlichkeit Ihrer Webseite von Vorteil sein, dass die technische Umsetzung und das Design immer auf dem aktuellen Standard gehalten wird. Nur so gewährleisten Sie auch damit jeder die Möglichkeit hat Ihre mühevoll zusammengestellten Inhalte auf verschiedenen Endgeräten (PC/Tablet/Handy) lesen zu können.

Eine Webseite ist mehr als nur eine digitale Visitenkarte – sie ist Ihr Tor zur Welt. Zeigen Sie, was Sie zu bieten haben, erreichen Sie mehr Kunden und wachsen Sie online.

Schauen Sie sich gerne auf unserer Webseite die verschiedenen Webseiten Pakete HIER an.

Unsicher welches Webseiten Paket für Sie das Richtige ist?
Gerne stehen wir Ihnen auch für ein kostenloses Beratungsgespräch zur Verfügung und finden mit Ihnen gemeinsam das für Sie passende Webseiten Paket heraus.

Wir freuen uns auf Sie! Bei weiteren Fragen oder Anmerkungen stehen wir Ihnen gerne zur Verfügung.

 


Geschwindigkeit des Webauftritts optimieren

13. Dezember 2023, CAPCom WebTeam - E-Commerce

 

Die Geschwindigkeit einer Website ist nicht nur für die Bewertung durch Suchmaschinen relevant, sondern auch die Besucher einer Website möchten nicht ewig auf den Aufbau einer Website warten. Daher ist es wichtig, sich über die Geschwindigkeit seiner Website bewusst zu sein und sie ist ein wesentlicher Bestandteil des technischen SEO. Nutzt man z.B. TYPO3 als CMS, kann man über eine Extension automatisch entsprechende Statistiken erstellen lassen.

Es gibt viele kostenlose und kostenpflichtige Tools, um die Geschwindigkeit einer Webseite zu messen. Wir beziehen uns hier auf Google Page Speed Insights. Dieser Test ist kostenlos und natürlich auf die Suchmaschine von Google ausgerichtet und daher nicht in allen Aussagen neutral, gibt aber für die meisten Zwecke gute Hinweise, nicht nur auf die Geschwindigkeit der Seite, sondern auch auf andere relevante SEO Rankingfaktoren.

Wichtig bei der Verwendung von Page Speed ist, dass sowohl der Mobile- als auch der Desktop-Test berücksichtigt werden. Dabei sollte nie nur die Startseite getestet werden, sondern auch relevante Unterseiten. Vor und nach einer Veränderung, z.B. durch den Einbau eines Plugins oder einer Extension, unbedingt die Werte vergleichen. Viele bekannte Plugins (gerade im WordPress Umfeld) sind so mächtig, dass sie die Ladezeit um ein Vielfaches der beabsichtigten Beschleunigung erhöhen.

Unsere Top 8 Checkpunkte zur Optimierung einer Webpräsenz:

  1. Bildformate: Eine oft einfach zu realisierende Beschleunigung betrifft Bilder und deren Formate. Google bevorzugt beispielsweise das kompaktere Format webp. Für alle gängigen CMS-Systeme gibt es Lösungen, alle Bilder entsprechend konvertiert auszugeben.
  2. Mediengröße: Je nach Desktop oder mobiler Ausgabe sollten die Medien angepasst werden. Grundsätzlich ist darauf zu achten, dass Qualität und Kompressionsstufe genau aufeinander abgestimmt sind.
  3. Caching: Der Webserver sollte passend zu den Formaten die richtigen Caching-Parameter liefern. Nichts ist für den Besucher ärgerlicher, als auf die gleichen Bilder zu warten, wenn er eine neue Seite aufruft oder die Seite nach ein paar Tagen erneut besucht.
  4. CSS und JavaScript: Beide Dateitypen sollten zusammengefasst und minimiert werden. NDiese Maßnahme ist besonders effektiv bei modernen Websites, die oft viele kleine, separate CSS- und JavaScript-Dateien nutzen. Ihre Zusammenführung kann die Gesamtperformance deutlich verbessern.
  5. Lasy Loading: Prüfen Sie alle Dateien, die geladen werden, auf die Möglichkeit des verzögerten Ladens. Dies gilt nicht nur für Bilder, Schriften und Videos, auch bestimmte Skripte sollten entsprechend konfiguriert werden.
  6. Fehlende Dateien: Prüfen Sie auf fehlende Dateien, dazu gehört auch das Favicon, das von den Browsern immer automatisch abgefragt wird.
  7. Überflüssige Dateien oder Plugins: Nicht mehr benötigte Inhalte von der Website entfernen.
  8. Content Delivery Network (CDN): Wenn eine Seite sehr oft besucht wird und datenintensiv ist, sollte man über den Einsatz eines CDN nachdenken. Einige Portale wie zum Beispiel Shopify arbeiten grundsätzlich damit.