Sebastian Schmid bio photo

Sebastian Schmid

Student der angewandten Informatik an der HTW Berlin.
Interessen sind Linux, Latex und Python.

Github Stackoverflow

Einfaches Beispiel wie OSM-Karten in einer Minimalumgebung mit Flask einsetzen kann

Hinweis! Dies ist ein Minimalbeispiel, wie mit Flask einfaches Hosten von OSM Daten umgesetzt werden könnte. Es wird explizit kein Wert auf Vollständigkeit gelegt

Achtung! Noch in Bearbeitung

Openstreetmapskarten haben vielerorts eine extrem hohe Dichte und Genauigkeit erreicht. Bis auf die etwas komplexere Umsetzung gibt es also kaum Gründe, warum man hier noch auf kommerzielle Produkte wie G-Maps zurückgreifen müsste. Etwas HTML und Javascript reichen um eine Karte auf dem eigenen Webspace anzuzeigen.

<html>
<head>	
	<!-- Source: http://wiki.openstreetmap.org/wiki/Openlayers_Track_example -->
	<title>Simple OSM GPX Track</title>
	<!--  OpenLayers javascript library -->
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<!-- OpenStreetMap OpenLayers layers-->
	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

	<script type="text/javascript">
		// Startposition auf der Karte
		var lat=52.5243700
		var lon=13.4105300
		var zoom=10

		var map; //complex object of type OpenLayers.Map

		function init() {
			map = new OpenLayers.Map ("map", {
				controls:[
					new OpenLayers.Control.Navigation(),
					new OpenLayers.Control.PanZoomBar(),
					new OpenLayers.Control.LayerSwitcher(),
					new OpenLayers.Control.Attribution()],
				maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
				maxResolution: 156543.0399,
				numZoomLevels: 19,
				units: 'm',
				projection: new OpenLayers.Projection("EPSG:900913"),
				displayProjection: new OpenLayers.Projection("EPSG:4326")
			} );

			// Define the map layer
			// Here we use a predefined layer that will be kept up to date with URL changes
			layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
			map.addLayer(layerMapnik);
			layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
			map.addLayer(layerCycleMap);
			layerMarkers = new OpenLayers.Layer.Markers("Marker");
			map.addLayer(layerMarkers);
			var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
			map.setCenter(lonLat, zoom);

			var size = new OpenLayers.Size(21, 25);
			var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
			var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
			layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
		}
	</script>

</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
	<!-- define a DIV into which the map will appear. Make it take up the whole window -->
	<div style="width:90%; height:90%" id="map"></div>
</body>
</html>

Wie das dann aussieht kann man hier betrachten.

Flask um das HTML auszuiefern

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def hello():
    return render_template('map.html')

if __name__ == "__main__":
    app.run(debug=True)
$ python flaskpage.py

Auch das GPX stellen wir über Flask bereit

from flask import Flask, render_template
app = Flask(__name__)

# ...

@app.route("/gpx/<file_name>")
def dl_gpx(file_name):
    with open(file_name, 'r') as f:
        return f.read()


if __name__ == "__main__":
    app.run(debug=True)