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

Aus OpenSeaMap-dev
Wechseln zu: Navigation, Suche
K (link auf con4gis-Handbuch korrigiert)
 
(6 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 
{|border="0" cellpadding="6" cellspacing="0" width="100%"
 
{|border="0" cellpadding="6" cellspacing="0" width="100%"
−
!style="background:#E3E3E3;" | [[de:OpenSeaMap_in_Website|Deutsch]]
+
!style="background:#E3E3E3;" | [[h:De:OpenSeaMap_in_Website|Deutsch]]
−
!style="background:#E3E3E3;" | [[OpenSeaMap_in_Website|English]]
+
!style="background:#E3E3E3;" | [[h:En:OpenSeaMap_in_Website|English]]
 
!style="background:#E3E3E3; width:100%;" |  
 
!style="background:#E3E3E3; width:100%;" |  
 
|}
 
|}
Zeile 23: Zeile 23:
 
  <img src="<span style="background-color:yellow;">Pfad/Dateiname_des_Bildes</span>" alt="Alternativtext" width="Breite" height="Höhe">
 
  <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  
+
=== statische Karte mit der Vollbildkarte verlinken ===
 
<imagemap>
 
<imagemap>
 
Image:MapFullscreen.png|right|200px|mit Link zur Vollbildkarte
 
Image:MapFullscreen.png|right|200px|mit Link zur Vollbildkarte
Zeile 48: Zeile 48:
  
 
[[Datei:Marker_in_URL.jpg|thumb|Marker mit Sprechblase]]
 
[[Datei:Marker_in_URL.jpg|thumb|Marker mit Sprechblase]]
−
; Vollbildkarte mit Marker und Sprechblase
+
 
−
[[De:Marker_in_URL|HoTo zur Anzeige eines Markers plus Text in einer Sprechblase]]
+
=== Vollbildkarte mit Marker und Sprechblase ===
 +
* [[h:De:Marker_in_URL|HowTo zur Anzeige eines Markers plus Text in einer Sprechblase]]
 
<div style="clear:both;"></div>
 
<div style="clear:both;"></div>
  
Zeile 74: Zeile 75:
 
|}
 
|}
  
−
HTML-Code zum Einbinden der Karte: <!--[[de:OpenSeaMap in Website/HTML|Hier ein fertiger HTML-Code zum Einbinden der Karte mit "copy&paste"]].-->
+
HTML-Code zum Einbinden der Karte: <!--[[h:De:OpenSeaMap in Website/HTML|Hier ein fertiger HTML-Code zum Einbinden der Karte mit "copy&paste"]].-->
  
 
<pre>
 
<pre>
Zeile 405: Zeile 406:
  
 
== Joomla ==
 
== Joomla ==
−
Plugin für Joomla:
+
Joomla enthält das Modul "Wrapper". Damit kann man ein iFrame erzeugen. Im iFrame wird dann OpenSeaMap als Slippymap eingebunden.
 +
 
 +
# Gehe auf "Extensions > Module Manager", klicke auf den grünen Button "New", wähle dann "Wrapper" (ganz unten in der Liste) für ein neues iFrame-Fenster.
 +
# Reiter "'''Details'''": <br> Gib dem iFrame den Titel "OpenSeaMap". Der Titel soll aber nicht angezeigt werden, schiebe den Schalter auf "Hide". <br> Wähle im DropDown-Feld "Position" den Ort, wo der iFrame erscheinen soll (ohne Position wird der iFrame nicht angezeigt).
 +
# Reiter "'''Basic Options'''": <br> URL: Siehe http://wiki.openseamap.org/wiki/De:Marker_in_URL <br> Keine Scroll Bars. Gib die Breite (Width) und Höhe (Height) für das iFrame-Fenster an (in Pixel oder %). Kein "Auto Height". "Frame Border" (Ramen) möchtest du haben.
 +
# Klicke auf den grünen Button "Speichern" und prüfe das Ergebnis.
 +
 
 +
(bitte genauer beschreiben...)
 +
 
  
−
[http://www.joomlaos.de/ Download (GPL)]
+
<!-- Plugin für Joomla: [http://www.joomlaos.de/ Download (GPL)] -->

Aktuelle Version vom 19. April 2023, 07:30 Uhr

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=BFTTFFTFFTF0FF&lang=de">
<img src="../MapFullscreen.png" alt="Teepott von Warnemünde auf der Karte anzeigen" width="200" height="133">
</a>


Marker mit Sprechblase

Vollbildkarte mit Marker und Sprechblase

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=BFTTFFTFFTF0FF">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)

HTML-Code zum Einbinden der Karte: 


<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>OpenSeaMap</title>


		<style type="text/css">
			.olImageLoadError {
				display: none !important;
			}
		</style>

		<!-- bring in the OpenLayers javascript library
			(here we bring it from the remote site, but you could
			easily serve up this javascript yourself) -->
		<script src="http://www.openlayers.org/api/OpenLayers.js"></script>

		<!-- bring in the OpenStreetMap OpenLayers layers.
			Using this hosted file will make sure we are kept up
			to date with any necessary changes -->
		<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
		<script type="text/javascript" src="http://map.openseamap.org/map/javascript/harbours.js"></script>
		<script type="text/javascript" src="http://map.openseamap.org/map/javascript/map_utils.js"></script>
		<script type="text/javascript" src="http://map.openseamap.org/map/javascript/utilities.js"></script>
		<script type="text/javascript">

			var map;
			var layer_mapnik;
			var layer_tah;
			var layer_seamark;
			var marker;

			// Position and zoomlevel of the map
			var lon = 12.0915;
			var lat = 54.1878;
			var zoom = 15;
				
			var linkTextSkipperGuide = "Beschreibung auf SkipperGuide";
			var linkTextWeatherHarbour = "Meteogramm";
			var language = 'de';

			
			function jumpTo(lon, lat, zoom) {
				var x = Lon2Merc(lon);
				var y = Lat2Merc(lat);
				map.setCenter(new OpenLayers.LonLat(x, y), zoom);
				return false;
			}

			function Lon2Merc(lon) {
				return 20037508.34 * lon / 180;
			}

			function Lat2Merc(lat) {
				var PI = 3.14159265358979323846;
				lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);
				return 20037508.34 * lat / 180;
			}

			function addMarker(layer, lon, lat, popupContentHTML) {
				var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));
				var feature = new OpenLayers.Feature(layer, ll);
				feature.closeBox = true;
				feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(260, 100) } );
				feature.data.popupContentHTML = popupContentHTML;
				feature.data.overflow = "hidden";

				marker = new OpenLayers.Marker(ll);
				marker.feature = feature;

				var markerClick = function(evt) {
					if (this.popup == null) {
						this.popup = this.createPopup(this.closeBox);
						map.addPopup(this.popup);
						this.popup.show();
					} else {
						this.popup.toggle();
					}
					OpenLayers.Event.stop(evt);
				};
				marker.events.register("mousedown", feature, markerClick);

				layer.addMarker(marker);
				map.addPopup(feature.createPopup(feature.closeBox));
			}

			function getTileURL(bounds) {
				var res = this.map.getResolution();
				var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
				var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
				var z = this.map.getZoom();
				var limit = Math.pow(2, z);
				if (y < 0 || y >= limit) {
					return null;
				} else {
					x = ((x % limit) + limit) % limit;
					url = this.url;
					path= z + "/" + x + "/" + y + "." + this.type;
					if (url instanceof Array) {
						url = this.selectUrl(path, url);
					}
					return url+path;
				}
			}

			function drawmap() {


				map = new OpenLayers.Map('map', {
					projection: new OpenLayers.Projection("EPSG:900913"),
					displayProjection: new OpenLayers.Projection("EPSG:4326"),
					eventListeners: {
						"moveend": mapEventMove,
						//"zoomend": mapEventZoom
					},
					controls: [
						new OpenLayers.Control.Navigation(),
						new OpenLayers.Control.ScaleLine({topOutUnits : "nmi", bottomOutUnits: "km", topInUnits: 'nmi', bottomInUnits: 'km', maxWidth: '40'}),
						new OpenLayers.Control.LayerSwitcher(),
						new OpenLayers.Control.MousePosition(),
						new OpenLayers.Control.PanZoomBar()],
						maxExtent:
						new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
					numZoomLevels: 18,
					maxResolution: 156543,
					units: 'meters'
				});

				// Add Layers to map-------------------------------------------------------------------------------------------------------
				// Mapnik
				layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
				// Seamark
				layer_seamark = new OpenLayers.Layer.TMS("Seezeichen", "http://tiles.openseamap.org/seamark/", { numZoomLevels: 18, type: 'png', getURL: getTileURL, isBaseLayer: false, displayOutsideMaxExtent: true});
				// Harbours
				layer_pois = new OpenLayers.Layer.Vector("Häfen", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayOutsideMaxExtent:true});
				layer_pois.setOpacity(0.8);
				
				map.addLayers([layer_mapnik, layer_seamark, layer_pois]);
				jumpTo(lon, lat, zoom);

				// Update harbour layer
				refreshHarbours();
			}

			// Map event listener moved
			function mapEventMove(event) {
				// Update harbour layer
				refreshHarbours();
			}
	</script>

</head>

<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="drawmap();">

    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
    <div style="width:100%; height:100%" id="map"></div>

</body>

</html>

Tile-Server

Der OpenSeaMap Tile-Server ist unter diesen URLs zu erreichen: 

http://t1.openseamap.org/seamark/ 
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://t1.openseamap.org/seamark/", 
{ numZoomLevels: 18, type: 'png', getURL:getTileURL, isBaseLayer:false, displayOutsideMaxExtent:true });
map.addLayer(layer_seamark);

OpenLayers 3

A very minimalistic version for OpenLayers 3. 

<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="build/ol.css" type="text/css">
        <style>
            .map {
              height: 500px;
              width: 100%;
            }
        </style>
        <script src="build/ol.js" type="text/javascript"></script>
        <title>OpenSeaMap Example</title>
    </head>
    <body>
        <div id="map" class="map"></div>
        <script type="text/javascript">
            var map = new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    }),
                    new ol.layer.Tile({
                        source: new ol.source.XYZ({
                            url: 'http://t1.openseamap.org/seamark/{z}/{x}/{y}.png'
                        })
                    })
                ],
                view: new ol.View2D({
                    center: ol.proj.transform([12.1, 54.18], 'EPSG:4326', 'EPSG:3857'),
                    zoom: 13
                })
            });
        </script>
    </body>
</html>

Drupal

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

TMS layer example
Map layers and taxonomy

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)

WordPress

Unter WordPress hat man die Möglichkeit das WP plugin OSM gemeinsam mit persönlichen Daten (POIs, GPX Routen, ...) zu nutzen, oder per IFRAM eine Karte einzubinden.

mit dem WP OSM Plugin

Das Erstellen einer Karte kann direkt im WordPress Backend gemacht werden:

Mit vier Schritten zur Karte im Blog

  1. WordPress OSM plugin installieren
  2. Kartenausschnit und Design unter "Einstellungen"=> "OSM" wählen
  3. Automatisch generierten Shortcode per Strg + C in die Zwischenablage kopieren
  4. Im Post oder Artikel den Shortcode per Strg + V einfügen

Features des OSM plugin

  • Einbinden von GPX und KML Dateien
  • Anzeigen von Markern per Markerfile
  • Anzeigen von verorteten Blogartikeln
  • Verändern von Kartengröße und Aussehen (Theme)
  • Einfügen von Popup Markern

Links zum WP OSM Plugin

Plugin Seite: http://wp-osm-plugin.HanBlog.net

Download Siete: http://http://wordpress.org/extend/plugins/osm/

Blog d. Entwicklers: http://www.HanBlog.net

Beispiel einer OpenSeaMap Karte mit integriertem Foto und GPX Tag: OpenSeaMap Karte mit dem OSM plugin in WordPress einbinden

mit Permalink in IFRAME

mit IFRAME

Mit „IFRAME“ kann man die Karte in einen WordPress-Artikel oder eine statische WordPress Seite einbinden. Erfahrene nutzen dazu die reine HTML-Ansicht des Texteditors (setzt voraus, dass man konsequent in der HTML Ansicht des Editors bleibt).

Einfacher geht's mit dem Plugin "PageView" (Download). Damit kann man jeden x-beliebigen Kartenausschnitt von OpernSeaMap in WordPress darstellen.

Plugin installieren

Entweder direkt aus dem Backend heraus oder über eine FTP-Verbindung direkt in das Plugin-Verzeichnis von WordPress. Dann das Plugin aktivieren - und schon können Karten von OpernSeaMap in WordPress eingebunden werden. Die Syntax dafür funktioniert über den so genannten WordPress “Shortcode”. 

[pageview url=“Permalink“]

Innerhalb der eckigen Klammern müssen alle Wörter kleingeschrieben werden, und die eigentliche Webadresse muss in Anführungszeichen stehen:

  1. wähle auf OpenSeaMap einen passenden Kartenausschnitt.
  2. wähle im Menü "Ansicht" die gewünschten Layer aus. Kopiere den "Permalink" unten rechts im Kartenfenster.
  3. fügen den Permalink in den Shortcode ein.

Damit werden alle Merkmale des Kartenausschnittes übernommen:
Position, Zoomlevel, Layer, Zoom-Funktion, Menü, Kartenübersicht unten rechts, Copyright Hinweis unten links.

Ansicht erweitern

Folgende Parameter können dem Shortcode mitgegeben werden:

title Für einen kurzen Titel des IFRAME oder der Karte
desc Abkürzung für Description, also einer kurzen Beschreibung
width darstellbare Breite des IFRAME.
Pixel bei bekannter Breite der zur Verfügung stehenden Fläche.
100% bei unbekannter Breite, dann passt sich die Karte automatisch über die volle Breite an.
height Höhe des IFRAME in Pixel (keine Prozenangaben).
border dünner Rahmen für das IFRAME. Kann mit CSS angepasst werden.
scrolling nicht benutzen (horizontale und vertikale Scrollbalken)
Beispiel
[pageview url="http://map.openseamap.org/map/?
zoom=14&lat=54.17958&lon=12.09869&layers=BFTFFFTFFFF0FFF"
height="400" width="95%"border="yes" title="Hafeneinfahrt Rostock"
desc="Beispielbeschreibung"]


Anmerkung: Zeile 1-4 beinhaltet dem kompletten Shortcode. Vermeide Zeilenumbrüche um Darstellungsfehler zu verhindern (hier ist der Code nur zum besseren Verständnis ausnahmsweise mit Zeilenumbrüchen dargestellt).

Die Kartenansicht kann man mit CSS noch individuell anpassen.

Quelle: Blog von Ralph, mit Kartenbeispielen

Contao

In der Contao Erweiterungsliste steht con4gis-Maps zur Verfügung:

con4gis-Maps baut auf OpenLayers. Über die Erweiterung lassen sich komplexe Geoinformationssysteme aufbauen. An eine Basiskarte können benutzerdefinierte Overlaykarten angebunden werden, also auch die Seezeichen. Für die Erweiterung gibt es ein Handbuch, auch mit einem Kapitel ' Erste Schritte - der schnellste Weg zur ersten Karte'. Hier die grobe Vorgehensweise:

  1. Eine Basiskarte anlegen
  2. Seezeichen über eine benutzerdefinierte Overlaykarte anbinden (Button rechts an der Basiskarte)
  3. Kartenprofil anlegen (Kartenwerkzeuge und Basiskarten bestimmen)
  4. Karte in der Kartenstruktur anlegen und mit dem Kartenprofil verknüpfen
  5. evtl. zusätzliche Kartenelemente aus OSM abrufen
  6. evtl. eigene Kartenelemente in die Karte eintragen
  7. Karte als Inhaltselement oder Modul auf der Website darstellen


Joomla

Joomla enthält das Modul "Wrapper". Damit kann man ein iFrame erzeugen. Im iFrame wird dann OpenSeaMap als Slippymap eingebunden.

  1. Gehe auf "Extensions > Module Manager", klicke auf den grünen Button "New", wähle dann "Wrapper" (ganz unten in der Liste) für ein neues iFrame-Fenster.
  2. Reiter "Details":
    Gib dem iFrame den Titel "OpenSeaMap". Der Titel soll aber nicht angezeigt werden, schiebe den Schalter auf "Hide".
    Wähle im DropDown-Feld "Position" den Ort, wo der iFrame erscheinen soll (ohne Position wird der iFrame nicht angezeigt).
  3. Reiter "Basic Options":
    URL: Siehe http://wiki.openseamap.org/wiki/De:Marker_in_URL
    Keine Scroll Bars. Gib die Breite (Width) und Höhe (Height) für das iFrame-Fenster an (in Pixel oder %). Kein "Auto Height". "Frame Border" (Ramen) möchtest du haben.
  4. Klicke auf den grünen Button "Speichern" und prüfe das Ergebnis.

(bitte genauer beschreiben...)


Abgerufen von „https://wiki.openseamap.org/index.php?title=h:De:OpenSeaMap_in_Website&oldid=397644“