Der Kartendienst Mapy.cz
2
Archiv der Kategorie: Karten, GPS
OSM-Karten in WordPress-Blogs einbetten
In einem anderen Artikel habe ich bereits beschrieben, wie man mit Hilfe der Opensource JavaScript-Bibliothek OpenLayers GPX-Tracks einer OSM-Karte überlagern kann um diese auf einer Webseite einzubetten. In Form des OSM-Plugins bietet sich für Nutzer eines WordPress-Blogs eine sehr vereinfachte Integration von OSM-Karten mit verschiedenen Layern, sowie Markern durch die Angabe von Shortcodes an.
Das erwähnte Plugin wird mit einem ftp-Client (z.B. FileZilla) in das Verzeichnis /wp-content/plugins der WordPress-Installation übertragen und anschließend im Plugin-Menu aktiviert.
Die Funktionen des Plugins stehen nun zur Verfügung und können im Text durch die Platzierung von Shortcodes der Form [osm_map ...] eingefügt werden. Argumente des [osm_map]-Präfix sind z.B.:
Für allgemeine Angaben zur Karte:
- width…die Breite der Karte [osm_map … width=”450″]
- height…die Höhe der Karte [osm_map … height=”600″]
- lat…Breitengrad des Kartenzentrums [osm_map … lat=23.6565]
- long…Längengrad des Kartenzentrums [osm_map … long=”32″]
- zoom…Zoomstufe der Karte [osm_map … zoom=”13″]
- type…Kartentyp (Osmarender, Mapnik, CycleMap, GoogleStreet, GooglePhysical,
GoogleSatellite, GoogleHybrid, All, AllOsm, AllGoogle, Ext) [osm_map … type=”All”] if it is set to all, LayerSchwith is enabled - map_border…Kartenrahmen [osm_map … map_border=”medium solid blue”]
Für das Hinzufügen eines Tracks:
- gpx_file…Absolute url des gpx-files [osm_map … gpx_file=”http://www.Domain.com/blog/sample.gpx”]
- gpx_colour…Farbe der gpx-Route [osm_map … gpx_colour=”black”]
- gpx_file_list…Entsprechende Angabe für mehrere Routen [osm_map … gpx_file=”http://www.Domain.com/blog/sample01.gpx,http://www.Domain.com/blog/sample02.gpx”]
- gpx_colour_list…Entsprechende Angabe für mehrere Routen [osm_map … gpx_colour_list=”black,green”]
- kml_file…Absolute url kml-file [osm_map … kml_file=”http://www.Domain.com/blog/sample.kml”]
- kml_colour…Farbe der Route [osm_map … kml_colour=”black”]
Für das Hinzufügen eines einzelnen Markers:
- marker…Hinzufügen eines Markers [osm_map … marker=”33.54,85.333,Customfieldname”]
- marker_name…Definiert ein Bildchen für den Marker. [osm_map … marker_name=”../../../uploads/BikeLogo.png”]
- m_txt_n…Definiert einen zeilenweisen Text, der beim Klicken auf den Marker erscheint. [osm_map … m_txt_01=”Waldquelle” m_txt_02=<”a href=’www.domain.de’>Bild</a>”]
- marker_file…Alternativ zur direkten Texteingabe mit
m_txtkann hier die url eines Textfiles angegeben werden: [osm_map … marker_file=”http://cyberleaf.bplaced.net/wp-content/uploads/textfile.txt”] - marker_height…Definiert die Höhe des Markers. [osm_map … marker_height=”23″]
- marker_width…Definiert die Breite des Markers. [osm_map … marker_width=”23″]
- marker_focus…Definiert die Orientierung des Markers (0…center, 1…left bottom, 2…left top, 3…right
top, 4…right bottom). [osm_map … marker_focus=”1″]
Geht man im Dashboard von WordPress auf Einstellungen und wählt den Punkt OSM an, gelangt man zu einem Dialog und kann sich den Shortcode sogar interaktiv generieren lassen.
Um Probleme bei der Angabe von Pfaden besser auf die Spur zu kommen, sollte im Browser die Javascript-Konsole angeschaltet werden. Relative Pfadangaben beziehen sich auf den Installationsort des osm-plugins (also /wp-content/plugins/osm, bzw. /wp-content/plugins/osm/icons für marker_name)
Am Ende noch ein Beispiel:
Hat man die nötigen Dateien im Dashboard über den Punkt Mediathek->Datei hinzufügen hochgeladen, kann das folgende Stück Code auf der Seite eingebunden werden:
[osm_map lat="50.834" long="14.051" zoom="16" width="600" height="450" ov_map=”0″ marker_file="http://cyberleaf.bplaced.net/wp-content/uploads/2012/10/marker_001.txt"] |
und nachfolgenden Angaben in der Datei marker_001.txt:
lat lon title description icon iconSize iconOffset 50.834 14.052 Großvaterstuhl Blick auf den Großvaterstuhl <br><img src="http://cyberleaf.bplaced.net/wp-content/uploads/2012/10/picture_001.jpg" width="500" height="634" alt="GStuhl"> http://cyberleaf.bplaced.net/wp-content/uploads/2012/10/marker_001.png 50,63 0,-20 |
Als Ausgabe erhält man:
Weitere Informationen zum OSM-Plugin finden sich auf der Homepage des Plugins.
GPS und Linux
Auch wenn sich die meisten Aussagen ohne Änderung auf andere Linux-Distributionen übertragen lassen, bezieht sich dieser Artikel doch speziell auf die Konfiguration unter OpenSuSE 12.2 auf einem Lenovo Thinkpad T530 mit dem in einem Mini-PCI express slot installierten WWAN-Adapter Qualcomm Gobi 2000. Eine Vielzahl nützlicher Informationen zum Chipsatz von Qualcomm findet man im Thinkpad-Wiki, im Artikel
Qualcomm Gobi 2000.
Der Qualcomm-Chipsatz benötigt zum Betrieb eine Firmware, die erst zur Laufzeit des Betriebssystems in die Karte geladen wird. Aus Lizenzgründen gehört diese Firmware nicht zum allgemeinen Umfang von Linux-Distributionen. Ist auf dem Thinkpad keine parallel installierte Windows-Installation vorhanden, so kann die kurzzeitig notwendige Windows-Installation auch in einer Virtualisierungsumgebung mit USB-Unterstützung erfolgen, bspw. mit Oracle VirtualBox (zur Installation siehe einen weiteren Artikel von mir). Die Windows-Installationsmedien können unter www.unawave.de heruntergeladen werden. Es empfiehlt sich, das heruntergeladene Image mithilfe des eicfg-removal-utility zu patchen, um während der Installation zwischen den verschiedenen Windows-Installationen auswählen zu können. Für Windows 7 muß auch das Service Pack 1 heruntergeladen werden. Nach Installation von Windows 7 Professional sollte Windows Update vorerst ausgeschaltet werden, um die manuelle Installation der Lenovo-Treiber nicht zu stören. Anschließend muß das Service Pack 1 eingespielt werden. Nun muß der Qualcomm Gobi 2000 Wireless WAN Driver for Windows 7 heruntergeladen und installiert werden. Dieser Treiber bringt die Firmware für den Qualcomm-Adapter mit, sie befindet sich nach der Installation im Verzeichnis c:\Programme (x86)\QUALCOMM\Images\Lenovo. Die Firmware ist auf drei Dateien verteilt (amss.mbn, apps.mbn, UQCN.mbn), die ersten beiden Dateien entnimmt man dem Unterverzeichnis UMTS, die dritte Datei dem Unterverzeichnis 6. Alle drei Dateien legt man nun in dem Verzeichnis /usr/lib/firmware/gobi ab und installiert noch den Gobi-Loader. Durch Installation des des Gobi-Loaders wird die Firmware nun auch unter Linux korrekt geladen.
Um GPS unter Linux nutzen zu können ist die Installation der Firmware aber alleine nicht ausreichend. Dazu ist es notwendig unter Windows 7 die Software ThinkVantage GPS for Windows 7 zu installieren und diese anschließend über das Programmstart-Fenster durch Eingabe von ThinkVantage GPS auszuführen. Hier gibt es einen Button Auto tracking der eingeschaltet sein muß, nun kann man das GPS-Gerät auch unter Linux nutzen, Windows 7 ist dazu nicht mehr nötig und kann entfernt werden.
Der unter OpenSuSE 12.2 installierte Kernel erkennt die Qualcomm-Karte ohne weiteres und stellt folgende Geräte als Schnittstelle zur Verfügung:
# # /dev/ttyUSB0 -> Diagnostics # # /dev/ttyUSB1 -> 3G Modem # # /dev/ttyUSB2 -> NMEA GPS port |
Die Numerierung der USB-Ports kann beim Vorhandensein weitere USB-Geräte anders lauten und ist evtl. mit
# dmesg | grep -E "Qualcomm USB modem converter now attached to ttyUSB?" | tail -n 3 |
zu ermitteln.
Nun kann GPS durch entsprechende Nachrichten an den ermittelten GPS-Port an- und ausgeschaltet werden:
# echo "\$GPS_START" > /dev/ttyUSB2 # # use GPS # echo "\$GPS_STOP" > /dev/ttyUSB2 |
Wurde GPS über $GPS_START eingeschaltet kann der GPS-Dämon testweise gestartet werden:
# /usr/sbin/gpsd -n -N -D4 /dev/ttyUSB2 |
Mit einem Client wie xgps sollte nun die Arbeitsweise überprüft werden (das Auffinden der Satelliten kann bei ungünstigen Empfangsverhältnissen sehr lange dauern).
Konnte die Positionsbestimmung erfolgreich durchgeführt werden, kann man eine Route z.B. mit dem Kommando gpxlogger aufzeichnen lassen. Um GPSD-Clients auch ohne gültiges GPS-Signal testen zu können (z.B. in Gebäuden), kann man das Programm gpsfake einsetzen.
OSM-Karten mit eigenen GPX-Tracks überlagern
OpenStreetMap-Karten lassen sich recht einfach mit eigenen erstellten Tracks im GPX-Format überlagern. Im OpenStreetMap-Wiki finden sich zu diesem Thema einige Einträge.
Schlüssel dazu ist die JavaScript-Bibliothek OpenLayers.js. Der folgende HTML-Kode demonstriert die vorgehensweise. In Zeile 8 wird das notwendige Script der OpenStreetMap-API geladen. In den Zeilen 16-18 wird das Zentrum und die Zoom-Stufe der Karte initialisiert. Der eigentliche GPX-Track wird mit dem Aufruf von OpenLayers.Layer.Vector übergeben, hier kann auch ein Bezeichner für den Track übergeben werden, auch die Farbe und die Durchsichtigkeit können hier eingestellt werden. Um den Kode auf dem heimischen Rechner zu testen. Sollte man im selben Verzeichnis, wo der Kode und der GPX-Track abgelegt ist einen Webserver starten, z.B. durch den Aufruf von: python -m SimpleHTTPServer 8082. Nun kann die Seite im Browser durch http://localhost:8082/OSM-Karte-overlays-GPX-Tracks.html aufgerufen werden, vorausgesetzt JavaScript ist im Browser (zumindest für die entsprechende Seite) eingeschaltet.
Verfügt man über eigenen Webspace, wie bspw. bei www.bplaced.net, so kann man die Dateien natürlich auch dort zur Verfügung stellen (im Dashboard von WordPress kann man übrigens keine GPX-Dateien uploaden, dieser Dateityp ist per Voreinstellung gesperrt, man muß den Umweg über ftp gehen und die Dateien unter dem Pfad wp-content/uploads/<year>/<month>/.. ablegen).
Fügt man dann einen Link auf die Datei in seinem Dokument ein, so kann die Karte von jedermann betrachtet werden.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <html>
<head>
<title>Simple OSM GPX Track</title>
<!-- OpenLayers javascript library
Wir binden die Bibliothek direkt aus dem Internet ein,
die Datei kann bei Bedarf aber auch lokal abgespeichert werden)
-->
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!-- OpenStreetMap OpenLayers layers.
Diese Datei bevorzugt aus dem Internet laden um sie aktuell zu halten
-->
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
// Startposition auf der Karte
var lat=50.83398
var lon=14.05214
var zoom=13
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);
// Layer mit GPX-Track Start
var lgpx = new OpenLayers.Layer.Vector("Mückentour", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "Mückentour.gpx",
format: new OpenLayers.Format.GPX()
}),
style: {strokeColor: "black", strokeWidth: 5, strokeOpacity: 0.5},
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(lgpx);
//Layer mit GPX-Track Ende
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> |