Eigenschaften

OpenStreetMap (OSM) ist ein freizugängliches, kostenloses Projekt, das frei verfügbare Geodaten vereinigt, strukturiert und in einer Datenbank für jedermann nutzbar ablegt (Open Data). Diese Daten unterliegen der Open Database License welche eine kostenlose Lizenz ist. Kernstück des Projekts ist eine öffentlich zugängliche Datenbank aller bereitgestellten Geodaten. Im Juli 2004 wurde das OpenStreetMap-Projekt von Steve Coast in London gestartet. Inzwischen arbeiten Freiwillige aus zahlreichen Ländern sowohl an der Softwareentwicklung als auch an der Erfassung und Verarbeitung der gesammelten Geodaten.

Jedem gerenderten Element werden Attribute, sogenannte Tags, zugeordnet. Nur das Tag macht deutlich, ob eine bestimmte Linie einen Feldweg, eine Bahnstrecke, einen Zaun oder einen Teil einer Landesgrenze darstellt. Die Zeichenwerkzeuge sind in allen Fällen gleich. Jedes neu hinzugefügte und gezeichnete Element muss “getaggt” werden. Tags können manuell eingegeben oder aus einer vom Editor bereitgestellten Vorlage gesetzt werden.

Die wichtigsten Werte eines Tags sind der Schlüssel (key) und der Wert (value), und Beziehungen werden in der Literatur durch Gleichheitszeichen dargestellt. Arten von Straßen und Wegen zum Beispiel werden mit dem Schlüssel „highway“ angegeben. Der Wert verrät im Detail, ob es sich bei dem Objekt um eine Autobahn (highway=motorway) oder einen Feldweg (highway=track) handelt. Die wichtigsten Attribute sind die Kategorie des Objekts (z. B. highway=residential) und falls vorhanden der Straßenname (name=Schillerstraße), welcher für die Verwendung der Suchfunktion essenziell ist.

4.1.2. Ressourcen und Programmiersprachen

XAMPP muss heruntergeladen und installiert werden, um die Funktionen des Prototyps nutzen zu können. Danach müssen zwei Server gestartet werden: “MySQL Databank” und “Apache Web Server” php wurde angewendet, um sowohl die aus den JavaScript gezogenen Werte in die MySQL Datenbank zu laden, als auch die dort geladenen Daten wieder zu verwenden. jQuery ist dafür angewendet, um dynamische Inhalte für Benutzer zu entwickeln - z.B. Like / Dislike Funktion.

SQL ist eine Sprache, die in der Entwicklung des Prototyps genutzt wurde, um die Verbindung zwischen den Funktionen (geschriebenen in php) und der Datebnak.

Bei der Erstellung des Prototyps sind unterschiedliche Javascript Bibliothecken verwendet: Leaflet und deren Plug-ins: Leaflet.Draw und Leaflet.Routing.Machine & Graphhopper Die Bibliothek ist dafür entwickelt, um mit OpenStreetMaps Daten arbeiten zu können. Plug-ins sind für Verwirklichung der Innovativität eingesetzt, damit Benutzer ausschließlich im Straßenbereich eine Strecke eingeben können.

Chart.js ist die Bibliothek, die für den Statistikbereich beenötigt ist.

Abb.26-28 Logos von Javascript-Bibliotheken css wurde benutzt, um das Design des Prototyps zu verbessern. Zu diesem Zweck ist ebenso die Bootstrap Bibliothek geladen, um den FrontEnd strukturiert zu gestalten. html ist der klassische Code, um Inhalt des Prototyps zu strukturieren sowie sämtliche Werte und Buttons mit Javascript zu verknüpfen. var mymap; var lyrOSM; var fgpDrawnItems; var coordinat = [];

In der folgenden Abbildung ist sogennante ‘User Journey’ schematisch dargestellt. Benutzer beginnen auf der Startseite und dann gehen die abgebildeten Schritte weiter bis zum Statistikbereich. In der Mitte ist die Struktur der Datenbank wiedergegeben. Insgesamt sind 4 Tabellen erstellt. Neben den Schritten, die als farbige Kästchen erscheinen, sind Ausschnitte aus dem Code in einer verkürzten Form aufgeschrieben. Die Ausschnitte weisen auf die Funktionen auf, die im Hintergrund nach dem Ausführen dieser Funktionen laufen.

Auf der nächsten Seiten ist der Code für zwei Funktionen komplett aufgeschrieben. Die erste Funktion zeigt, wie die Zeichnen-Funktion geschrieben ist und wie die Daten aus der Funktion an den Backend geschickt werden.

Zweite Funktion teilweise zeigt, wie die Like / Dislike Funktion aufgebaut ist. Und dritte, die die Größe des Kreises und Farbe der Linie sich verändert, je nachdem welche Einträge von Benutzern kommen.

$(document).ready(function () { mymap = L.map(“mapdiv”, { center: [50.772293, 6.085396], zoom: 15 }); lyrOSM = L.tileLayer(“http://{s}.tile.osm.org/{z}/{x}/{y}.png”);

// FeatureGroup is to store editable layers var drawnItems = new L.FeatureGroup(); mymap.addLayer(drawnItems); var drawControl = new L.Control.Draw({ draw: { polygon: false, circle: false, rectangle: false, marker: false, }, edit: { featureGroup: drawnItems, }, }); mymap.addControl(drawControl); mymap.addLayer(lyrOSM); fgpDrawnItems = new L.FeatureGroup(); fgpDrawnItems.addTo(mymap); mymap.on(“draw:created”, function (e) { fgpDrawnItems.addLayer(e.layer); coordinat = JSON.stringify(e.layer.toGeoJSON()); return coordinat;

$(“#submit”).click(function () { $.ajax({ url: “db_operator/coordinat_data.php”, method: “POST”, data: { action: “insert”, coordinat: coordinat }, success: function (data) {}, var address = “Adresse nicht vollständig”; $.ajax({ url: “db_operator/prepro_data.php”, method: “POST”, data: { action: “insert”, address: address }, success: function (data) {}, makepfeil(); function makepfeil() { var pfeil_db = []; var pfeil_negativ = [];

$.ajax({ url: “db_operator/pfeil_data.php”, method: “POST”, data: { action: “fetch” }, dataType: “JSON”, success: function (data) { for (var c = 0; c < data.length; c++) { pfeil_db.push(data[c].pfeil); pfeil_negativ.push(data[c].pfeil_negativ); }

$(“#pfeil_oben”).empty();

$(“#pfeil_oben”).append(pfeil_db);

$(“#pfeil_neg”).empty();

$(“#pfeil_neg”).append(pfeil_negativ);

$(“#pfeil”).click(function () { var pfeil = 1;

$.ajax({ url: “db_operator/pfeil_data.php”, method: “POST”, data: { action: “insert”, pfeil: pfeil }, success: function (data) { makepfeil();

$(“#pfeil_negativ”).click(function () { var pfeil_negativ = 1;

$.ajax({ url: “db_operator/pfeil_negativ.php”, method: “POST”, data: { action: “insert”, pfeil_negativ: pfeil_negativ }, success: function (data) { makepfeil(); makechart(); var id = []; var avg = []; var coordinat = []; var filter = []; var pfeil_increase = []; var pfeil_decrease = []; function makechart() { var mymap; var lyrOSM; var fgpDrawnItems; var latLong = []; mymap = L.map(“mapdiv”, { center: [50.772293, 6.085396], zoom: 13, }); lyrOSM = L.tileLayer(“http://{s}.tile.osm.org/{z}/{x}/{y}.png”);

// FeatureGroup is to store editable layers var drawnItems = new L.FeatureGroup(); mymap.addLayer(drawnItems); mymap.addLayer(lyrOSM); fgpDrawnItems = new L.FeatureGroup(); fgpDrawnItems.addTo(mymap); $.ajax({ url: “db_operator/avg_data.php”, method: “POST”, data: { action: “fetch” }, dataType: “JSON”, success: function (data) { for (var y = 0; y < data.length; y++) { id.push(data[y].id); avg.push(data[y].avg); coordinat.push(data[y].coordinat); pfeil_increase.push(data[y].pfeil); pfeil_decrease.push(data[y].pfeil_negativ); s = JSON.stringify(coordinat[y]); s = s

.replace(/\\n/g, “\\n”)

.replace(/\\’/g, “\\’”)

.replace(/\\”/g, ‘\\”’)

.replace(/\\&/g, “\\&”)

.replace(/\\r/g, “\\r”)

.replace(/\\t/g, “\\t”)

.replace(/\\b/g, “\\b”)

.replace(/\\f/g, “\\f”); s = s.replace(/[-\u0019]+/g, “”); s = JSON.parse(s); coordinating = JSON.parse(s); filter[y] = coordinating.coordinates; window[“pfeil_increase” + y] = pfeil_increase[y]; window[“pfeil_decrease” + y] = pfeil_decrease[y]; Funktion if ( parseInt(window[“pfeil_increase” + y]) != 0 || parseInt(window[“pfeil_decrease” + y]) != 0 ) { window[“radius” + y] = parseInt(window[“pfeil_increase” + y]) * 10parseInt(window[“pfeil_decrease” + y]) * 10; } else { window[“radius” + y] = 0; } if (avg[y] >= 0 && avg[y] < 10) { window[“color” + y] = “#2F8BBA”; } if (avg[y] >= 10 && avg[y] < 20) { window[“color” + y] = “#4AA0C3”; } if (avg[y] >= 20 && avg[y] < 30) { window[“color” + y] = “#65B5CD”; } if (avg[y] >= 30 && avg[y] < 40) { window[“color” + y] = “#80CBD7”; } if (avg[y] >= 40 && avg[y] < 50) { window[“color” + y] = “#9BE0E0”; } if (avg[y] >= 50 && avg[y] < 60) { window[“color” + y] = “#F5BB97”; } if (avg[y] >= 60 && avg[y] < 70) { window[“color” + y] = “#E89D8B”; } if (avg[y] >= 70 && avg[y] < 80) { window[“color” + y] = “#DB7F80”; } if (avg[y] >= 80 && avg[y] < 90) { window[“color” + y] = “#CE6175”; } if (avg[y] >= 90 && avg[y] <= 100) { window[“color” + y] = “#C14369”; } if (filter[0]) { for (var m = 0; m < filter[0].length; m++) { latLong.push([filter[0][m].lat, filter[0][m].lng]); polyline = L.polyline(latLong, { color: color0, }).addTo(mymap); var circle = L.circleMarker([filter[0][0].lat, filter[0][0].lng], { color: “blue”, radius: radius0, }).addTo(mymap); circle.on(“click”, function (e) { document.cookie = id[0]; window.location.href = “./display.php?id=” + id[0]; });

Das Prototypkonzept ist in der folgenden Abbildung schematisch dargestellt. Die Hauptidee besteht darin, eine Route auf den Straßenbereich der Karte zu zeichnen, damit diese Route in Bezug auf die Fahrradverwendbarkeit bewertet werden kann. Das Konzept zielt darauf ab, die Stadtnutzung und die Nutzbarkeit des Fahrrads aus der Perspektive eines Radfahrers zu beschreiben, sodass schnell ersichtlich wird, wo Herausforderungen liegen und wo Verbesserungen erforderlich sind.

Abb.30 Konzept der Plattforn allgemein

Abb.31 Berechnung der Fahrradfreundlichkeit