h:De:OpenSeaMap in Website: Unterschied zwischen den Versionen
Markus (Diskussion | Beiträge) (Die Seite wurde neu angelegt: === Tile-Server === Der OpenSeaMap Tile-Server ist unter dieser URL zu erreichen: <pre> http://tiles.openseamap.org/seamark/ </pre> === Seezeichen-Layer === Der Seez...) |
Markus (Diskussion | Beiträge) |
||
| Zeile 1: | Zeile 1: | ||
| − | === Tile-Server | + | Du kannst OpenSeaMap auf zwei Arten in die Website einbinden: |
| + | __TOC__ | ||
| + | |||
| + | == Als statische Karte einbinden == | ||
| + | [[Image:MapFullscreen.png|right|200px]] | ||
| + | |||
| + | Am einfachsten zeigst Du ein statisches Bild, und verknüpfst es mit der Vollbildkarte von OpenSeaMap: | ||
| + | |||
| + | # suche in [http://OpenSeaMap.org/map OpenSeaMap] den passenden Kartenausschnitt | ||
| + | # drücke die Taste <code><Druck></code> (manchmal heisst sie auch "Print"), damit kopierst Du den ganzen Bildschirm <br>mit der Tastenkombination <code><Alt>-<Druck></code> kannst Du gezielt das gerade aktive Fenster kopieren | ||
| + | # öffne ein Bildbearbeitungsprogramm Deiner Wahl und füge den Screenschot mit <code><Strg-v></code> ein | ||
| + | # zeichne die gewünschten Informationen hinzu (Text, Linien, Kreise, Flächen) | ||
| + | # speichere das Bild auf Deinem Rechner | ||
| + | # lade das Bild auf Deinen Webserver | ||
| + | # binde das hochgeladene Bild in den Artikel ein: | ||
| + | |||
| + | <img src="<span style="background-color:yellow;">Pfad/Dateiname_des_Bildes</span>" alt="Alternativtext" width="Breite" height="Höhe"> | ||
| + | |||
| + | ; statische Karte mit der Vollbildkarte verlinken | ||
| + | <imagemap> | ||
| + | Image:MapFullscreen.png|right|200px|mit Link zur Vollbildkarte | ||
| + | default [http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=B0FTT&lang=de] | ||
| + | desc none | ||
| + | </imagemap> | ||
| + | |||
| + | Du kannst den Kartenausschnitt direkt mit OpenSeaMap verlinken. Dann öffnet sich mit einem Klick auf den Kartenausschnitt die Vollbildkarte von OpenSeaMap in einem neuen Fenster. Dort kann man dann beliebig zoomen und verschieben: | ||
| + | |||
| + | # suche in [http://OpenSeaMap.org/map OpenSeaMap] den passenden Kartenausschnitt | ||
| + | # kopiere auf der Karte unten rechts den Permalink mit <code><Strg-c></code> | ||
| + | # füge mit <code><Strg-v></code> den kopierten Permalink in den Code ein: | ||
| + | |||
| + | <a href="<span style="background-color:yellow;">Permalink</span>"> | ||
| + | <img src="Pfad/Dateiname_des_Bildes" alt="Alternativtext" width="Breite" height="Höhe"> | ||
| + | </a> | ||
| + | |||
| + | Beispiel: | ||
| + | <a href="<span style="background-color:yellow;"><nowiki>http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=B0FTT&lang=de</nowiki></span>"> | ||
| + | <img src="../MapFullscreen.png" alt="Teepott" von Warnemünde auf der Karte anzeigen" width="200" height="133"> | ||
| + | </a> | ||
| + | |||
| + | <br style="clear:both;" clear="all" /> | ||
| + | |||
| + | == Als Slippy-Map einbinden == | ||
| + | Du kannst OpenSeaMap auch dynamisch auf der Website einbinden. Der Benutzer sieht beim ersten Laden den von Dir ausgewählten Ausschnitt in entsprechender Zoomstufe. Darin kann er beliebig zoomen und verschieben. | ||
| + | |||
| + | <iframe width="<span style="background-color:yellow;">425</span>" height="<span style="background-color:yellow;">350</span>" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" | ||
| + | src=<nowiki>"http://www.openseamap.org</nowiki>/export/embed.html?bbox=<span style="background-color:yellow;">-2.01,43.15,13.85,53.35</span>&layer=mapnik" | ||
| + | style="border: 1px solid black"></iframe><br /><a href=<nowiki>"http://www.openseamap.org</nowiki>/?lat=<span style="background-color:yellow;">48.25</span>&lon=<span style="background-color:yellow;">5.92</span>&zoom=<span style="background-color:yellow;">5</span>&layers=B000FTFT">Größere Karte anzeigen</a> | ||
| + | |||
| + | Die gelb markierten Werte der Variablen haben folgende Bedeutung: | ||
| + | {|class="wikitable" | ||
| + | | width || Breite der Karte (Pixel) | ||
| + | |- | ||
| + | | height || Höhe der Karte (Pixel) | ||
| + | |- | ||
| + | | bbox || "Bounding-Box" (die 4 Ecken des Kartenausschnittes) | ||
| + | |- | ||
| + | | lat || geogr. Breite des Kartenmittelpunktes | ||
| + | |- | ||
| + | | lat || geogr. Länge des Kartenmittelpunktes | ||
| + | |- | ||
| + | | zoom || Zoomlevel der Karte (4...18) | ||
| + | |} | ||
| + | |||
| + | == Tile-Server == | ||
Der OpenSeaMap Tile-Server ist unter dieser URL zu erreichen: | Der OpenSeaMap Tile-Server ist unter dieser URL zu erreichen: | ||
<pre> | <pre> | ||
| Zeile 5: | Zeile 69: | ||
</pre> | </pre> | ||
| − | + | ; Seezeichen-Layer | |
Der Seezeichen-Layer wird mit folgenden Zeilen hinzugefügt: | Der Seezeichen-Layer wird mit folgenden Zeilen hinzugefügt: | ||
<pre> | <pre> | ||
Version vom 22. Dezember 2009, 12:36 Uhr
Du kannst OpenSeaMap auf zwei Arten in die Website einbinden:
Inhaltsverzeichnis
Als statische Karte einbinden
Am einfachsten zeigst Du ein statisches Bild, und verknüpfst es mit der Vollbildkarte von OpenSeaMap:
- suche in OpenSeaMap den passenden Kartenausschnitt
- drücke die Taste
<Druck>(manchmal heisst sie auch "Print"), damit kopierst Du den ganzen Bildschirm
mit der Tastenkombination<Alt>-<Druck>kannst Du gezielt das gerade aktive Fenster kopieren - öffne ein Bildbearbeitungsprogramm Deiner Wahl und füge den Screenschot mit
<Strg-v>ein - zeichne die gewünschten Informationen hinzu (Text, Linien, Kreise, Flächen)
- speichere das Bild auf Deinem Rechner
- lade das Bild auf Deinen Webserver
- binde das hochgeladene Bild in den Artikel ein:
<img src="Pfad/Dateiname_des_Bildes" alt="Alternativtext" width="Breite" height="Höhe">
- statische Karte mit der Vollbildkarte verlinken
<imagemap> Image:MapFullscreen.png|right|200px|mit Link zur Vollbildkarte default [1] desc none </imagemap>
Du kannst den Kartenausschnitt direkt mit OpenSeaMap verlinken. Dann öffnet sich mit einem Klick auf den Kartenausschnitt die Vollbildkarte von OpenSeaMap in einem neuen Fenster. Dort kann man dann beliebig zoomen und verschieben:
- suche in OpenSeaMap den passenden Kartenausschnitt
- kopiere auf der Karte unten rechts den Permalink mit
<Strg-c> - füge mit
<Strg-v>den kopierten Permalink in den Code ein:
<a href="Permalink">
<img src="Pfad/Dateiname_des_Bildes" alt="Alternativtext" width="Breite" height="Höhe">
</a>
Beispiel:
<a href="http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=B0FTT&lang=de">
<img src="../MapFullscreen.png" alt="Teepott" von Warnemünde auf der Karte anzeigen" width="200" height="133">
</a>
Als Slippy-Map einbinden
Du kannst OpenSeaMap auch dynamisch auf der Website einbinden. Der Benutzer sieht beim ersten Laden den von Dir ausgewählten Ausschnitt in entsprechender Zoomstufe. Darin kann er beliebig zoomen und verschieben.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openseamap.org/export/embed.html?bbox=-2.01,43.15,13.85,53.35&layer=mapnik" style="border: 1px solid black"></iframe>
<a href="http://www.openseamap.org/?lat=48.25&lon=5.92&zoom=5&layers=B000FTFT">Größere Karte anzeigen</a>
Die gelb markierten Werte der Variablen haben folgende Bedeutung:
| width | Breite der Karte (Pixel) |
| height | Höhe der Karte (Pixel) |
| bbox | "Bounding-Box" (die 4 Ecken des Kartenausschnittes) |
| lat | geogr. Breite des Kartenmittelpunktes |
| lat | geogr. Länge des Kartenmittelpunktes |
| zoom | Zoomlevel der Karte (4...18) |
Tile-Server
Der OpenSeaMap Tile-Server ist unter dieser URL zu erreichen:
http://tiles.openseamap.org/seamark/
- Seezeichen-Layer
Der Seezeichen-Layer wird mit folgenden Zeilen hinzugefügt:
var layer_seamark = new OpenLayers.Layer.TMS ( "seamark", "http://tiles.openseamap.org/seamark/",
{ numZoomLevels: 18, type: 'png', getURL:getTileURL, isBaseLayer:false, displayOutsideMaxExtent:true });
map.addLayer(layer_seamark);
