h:De:OpenSeaMap in Website

Sprachen:	Deutsch	English

Du kannst OpenSeaMap auf verschiedene Arten in die Website einbinden:

Inhaltsverzeichnis

1 Als statische Karte einbinden
2 Als Slippy-Map einbinden
3 Tile-Server
4 Drupal
5 Typo3

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)

HTML-Code zum Einbinden der Karte:


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

		<!-- 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">

			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 linkText = "Beschreibung auf SkipperGuide";
			
			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");
				// Osmarender
				layer_tah = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
				// 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_harbours = new OpenLayers.Layer.Markers("Häfen", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayOutsideMaxExtent:true});
				layer_harbours.setOpacity(0.8);
				
				map.addLayers([layer_mapnik, layer_tah, layer_seamark, layer_harbours]);
				jumpTo(lon, lat, zoom);

				// Update harbour layer
				refresh_oseamh();
			}

			// Map event listener moved
			function mapEventMove(event) {
				// Update harbour layer
				refresh_oseamh();
			}
	</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 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);

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)

h:De:OpenSeaMap in Website

Inhaltsverzeichnis

Als statische Karte einbinden

Als Slippy-Map einbinden

Tile-Server

Drupal

Typo3

Navigationsmenü

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Mehr

Suche

Navigation

Werkzeuge