Schlagwort-Archive: OSM

Der Kartendienst Mapy.cz

Posted on by
2

OSM-Karten in WordPress-Blogs einbetten

Posted on by
2

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_txt kann 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.

OSM-Karten mit eigenen GPX-Tracks überlagern

Posted on by
Kommentar

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>