h:De:OpenSeaMap in Website: Unterschied zwischen den Versionen

Aus OpenSeaMap-dev
Wechseln zu: Navigation, Suche
(in Typo3)
(Als Slippy-Map einbinden)
Zeile 69: Zeile 69:
 
| zoom || Zoomlevel der Karte (4...18)
 
| zoom || Zoomlevel der Karte (4...18)
 
|}
 
|}
 +
 +
[[de:OpenSeaMap in Website/HTML|Hier ein fertiger HTML-Code zum Einbinden der Karte mit "copy&paste"]].
  
 
== Tile-Server ==
 
== Tile-Server ==

Version vom 31. März 2010, 10:19 Uhr

Sprachen: Deutsch English

Du kannst OpenSeaMap auf verschiedene Arten in die Website einbinden:

Als statische Karte einbinden

MapFullscreen.png

Am einfachsten zeigst Du ein statisches Bild, und verknüpfst es mit der Vollbildkarte von OpenSeaMap:

  1. suche in OpenSeaMap den passenden Kartenausschnitt
  2. 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
  3. öffne ein Bildbearbeitungsprogramm Deiner Wahl und füge den Screenschot mit <Strg-v> ein
  4. zeichne die gewünschten Informationen hinzu (Text, Linien, Kreise, Flächen)
  5. speichere das Bild auf Deinem Rechner
  6. lade das Bild auf Deinen Webserver
  7. 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:

  1. suche in OpenSeaMap den passenden Kartenausschnitt
  2. kopiere auf der Karte unten rechts den Permalink mit <Strg-c>
  3. 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)

Hier ein fertiger HTML-Code zum Einbinden der Karte mit "copy&paste".

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);

in Drupal

Im Drupal-Center-Forum gibt es folgende Lösungsideen mit MappingKit:

TMS layer example
Map layers and taxonomy

in Typo3

Im TYPO3 Extension Repository stehen 2 Extensions zur Verfügung:

  • rb_osmsimple (eigene Datensätze für Marker)
  • ods_osm (Koordinaten in fe_users und tt_address Datensätzen)