https://wiki.openseamap.org/api.php?action=feedcontributions&user=Photoweblog&feedformat=atomOpenSeaMap-dev - Benutzerbeiträge [de]2024-03-29T15:57:37ZBenutzerbeiträgeMediaWiki 1.31.10https://wiki.openseamap.org/index.php?title=h:En:OpenSeaMap_in_Website&diff=145739h:En:OpenSeaMap in Website2019-12-08T08:30:57Z<p>Photoweblog: /* WordPress */ changed image size</p>
<hr />
<div>{|border="0" cellpadding="6" cellspacing="0" width="100%"<br />
!style="background:#E3E3E3;" | [[de:OpenSeaMap_in_Website|Deutsch]]<br />
!style="background:#E3E3E3;" | [[OpenSeaMap_in_Website|English]]<br />
!style="background:#E3E3E3; width:100%;" | <br />
|}<br />
<br />
You can include OpenSeaMap in various ways to the website: <br />
__TOC__<br />
<br />
== Embed as Static Map ==<br />
[[Image:MapFullscreen.png|right|thumb|200px|Static Map]]<br />
<br />
The easiest way you show a static image, and link it with the full map of OpenSeaMap:<br />
<br />
# Search in [http://OpenSeaMap.org/map OpenSeaMap] the appropriate map section<br />
# Press the key <code>Print</code>, so you copy the whole screen <br> with the key combination <code><Alt-Print></code> you can selectively copy the currently active window<br />
# Open an image editing program of your choice and add the screenshot with <code><Strg-v></code><br />
# Draw the desired information (text, lines, circles, areas) <br />
# Save the image on your computer<br />
# Load the image to your Web server<br />
# Include the uploaded image in the article:<br />
<br />
<img src="<span style="background-color:yellow;">Path/Filename_of_Image</span>" alt="Alternative_text" width="Width" height="Height"><br />
<br />
; Link a static map to the full screen map<br />
<imagemap><br />
Image:MapFullscreen.png|right|thumb|200px|with Link to Fullscreen Chart<br />
default [http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de]<br />
desc none<br />
</imagemap><br />
<br />
You can link the map directly to OpenSeaMap. So by clicking on the map you opens the fullscreen map of OpenSeaMap in a new window. There you can zoom and move freely:<br />
<br />
# Search in [http://OpenSeaMap.org/map OpenSeaMap] the appropriate map section<br />
# Copy the permalink (on the map bottom right) by <code><Ctrl-c></code><br />
# Add the full permalink to your code by <code><Strg-v></code><br />
<br />
<a href="<span style="background-color:yellow;">Permalink</span>"><br />
<img src="Path/Fileame_of_Image" alt="Alternative text" width="Width" height="Height"><br />
</a><br />
<br />
Example:<br />
<a href="<span style="background-color:yellow;"><nowiki>http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de</nowiki></span>"><br />
<img src="../MapFullscreen.png" alt="show 'Teepott Warnemünde' to the chart" width="200" height="133"><br />
</a><br />
<br />
<br style="clear:both;" clear="all" /><br />
<br />
[[Datei:Marker_in_URL.jpg|thumb|Marker with speech bubble]]<br />
; Fullscreen chart with Marker and speech bubble<br />
[[De:Marker_in_URL|HoTo for displaying a marker plus text in a speech bubble]]<br />
<div style="clear:both;"></div><br />
<br />
== Embed as Slippy-Map ==<br />
You can embed OpenSeaMap also dynamically on the site. Users will see your chosen section and the appropriate zoom level in the first load. He can zoom and move freely.<br />
<br />
<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" <br />
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" <br />
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=BFTTFFTFFTF0FF">Gr&#246;&#223;ere Karte anzeigen</a><br />
<br />
The yellow-marked values of the variables have the following meaning:<br />
{|class="wikitable"<br />
| width || With of the chart (pixel)<br />
|-<br />
| height || Height of the chart (pixel)<br />
|-<br />
| bbox || "Bounding-Box" (the 4 corners of the selected chart)<br />
|-<br />
| lat || Latitude of the chart center<br />
|-<br />
| lat || Longitude of the chart center<br />
|-<br />
| zoom || Zoomlevel of the chart (4...18)<br />
|}<br />
<br />
HTML code to embed in the map: <!--[[de:OpenSeaMap in Website/HTML|Here is a ready-made HTML code for embedding a chart by "copy & paste"]].--><br />
<br />
<pre><br />
<br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/><br />
<title>OpenSeaMap</title><br />
<br />
<br />
<style type="text/css"><br />
.olImageLoadError {<br />
display: none !important;<br />
}<br />
</style><br />
<br />
<!-- bring in the OpenLayers javascript library<br />
(here we bring it from the remote site, but you could<br />
easily serve up this javascript yourself) --><br />
<script src="http://www.openlayers.org/api/OpenLayers.js"></script><br />
<br />
<!-- bring in the OpenStreetMap OpenLayers layers.<br />
Using this hosted file will make sure we are kept up<br />
to date with any necessary changes --><br />
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/harbours.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/map_utils.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/utilities.js"></script><br />
<script type="text/javascript"><br />
<br />
var map;<br />
var layer_mapnik;<br />
var layer_tah;<br />
var layer_seamark;<br />
var marker;<br />
<br />
// Position and zoomlevel of the map<br />
var lon = 12.0915;<br />
var lat = 54.1878;<br />
var zoom = 15;<br />
<br />
var linkTextSkipperGuide = "Beschreibung auf SkipperGuide";<br />
var linkTextWeatherHarbour = "Meteogramm";<br />
var language = 'de';<br />
<br />
<br />
function jumpTo(lon, lat, zoom) {<br />
var x = Lon2Merc(lon);<br />
var y = Lat2Merc(lat);<br />
map.setCenter(new OpenLayers.LonLat(x, y), zoom);<br />
return false;<br />
}<br />
<br />
function Lon2Merc(lon) {<br />
return 20037508.34 * lon / 180;<br />
}<br />
<br />
function Lat2Merc(lat) {<br />
var PI = 3.14159265358979323846;<br />
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);<br />
return 20037508.34 * lat / 180;<br />
}<br />
<br />
function addMarker(layer, lon, lat, popupContentHTML) {<br />
var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));<br />
var feature = new OpenLayers.Feature(layer, ll);<br />
feature.closeBox = true;<br />
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(260, 100) } );<br />
feature.data.popupContentHTML = popupContentHTML;<br />
feature.data.overflow = "hidden";<br />
<br />
marker = new OpenLayers.Marker(ll);<br />
marker.feature = feature;<br />
<br />
var markerClick = function(evt) {<br />
if (this.popup == null) {<br />
this.popup = this.createPopup(this.closeBox);<br />
map.addPopup(this.popup);<br />
this.popup.show();<br />
} else {<br />
this.popup.toggle();<br />
}<br />
OpenLayers.Event.stop(evt);<br />
};<br />
marker.events.register("mousedown", feature, markerClick);<br />
<br />
layer.addMarker(marker);<br />
map.addPopup(feature.createPopup(feature.closeBox));<br />
}<br />
<br />
function getTileURL(bounds) {<br />
var res = this.map.getResolution();<br />
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));<br />
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));<br />
var z = this.map.getZoom();<br />
var limit = Math.pow(2, z);<br />
if (y < 0 || y >= limit) {<br />
return null;<br />
} else {<br />
x = ((x % limit) + limit) % limit;<br />
url = this.url;<br />
path= z + "/" + x + "/" + y + "." + this.type;<br />
if (url instanceof Array) {<br />
url = this.selectUrl(path, url);<br />
}<br />
return url+path;<br />
}<br />
}<br />
<br />
function drawmap() {<br />
<br />
<br />
map = new OpenLayers.Map('map', {<br />
projection: new OpenLayers.Projection("EPSG:900913"),<br />
displayProjection: new OpenLayers.Projection("EPSG:4326"),<br />
eventListeners: {<br />
"moveend": mapEventMove,<br />
//"zoomend": mapEventZoom<br />
},<br />
controls: [<br />
new OpenLayers.Control.Navigation(),<br />
new OpenLayers.Control.ScaleLine({topOutUnits : "nmi", bottomOutUnits: "km", topInUnits: 'nmi', bottomInUnits: 'km', maxWidth: '40'}),<br />
new OpenLayers.Control.LayerSwitcher(),<br />
new OpenLayers.Control.MousePosition(),<br />
new OpenLayers.Control.PanZoomBar()],<br />
maxExtent:<br />
new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),<br />
numZoomLevels: 18,<br />
maxResolution: 156543,<br />
units: 'meters'<br />
});<br />
<br />
// Add Layers to map-------------------------------------------------------------------------------------------------------<br />
// Mapnik<br />
layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");<br />
// Seamark<br />
layer_seamark = new OpenLayers.Layer.TMS("Seezeichen", "http://tiles.openseamap.org/seamark/", { numZoomLevels: 18, type: 'png', getURL: getTileURL, isBaseLayer: false, displayOutsideMaxExtent: true});<br />
// Harbours<br />
layer_pois = new OpenLayers.Layer.Vector("Häfen", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayOutsideMaxExtent:true});<br />
layer_pois.setOpacity(0.8);<br />
<br />
map.addLayers([layer_mapnik, layer_seamark, layer_pois]);<br />
jumpTo(lon, lat, zoom);<br />
<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
<br />
// Map event listener moved<br />
function mapEventMove(event) {<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
</script><br />
<br />
</head><br />
<br />
<!-- body.onload is called once the page is loaded (call the 'init' function) --><br />
<body onload="drawmap();"><br />
<br />
<!-- define a DIV into which the map will appear. Make it take up the whole window --><br />
<div style="width:100%; height:100%" id="map"></div><br />
<br />
</body><br />
<br />
</html><br />
</pre><br />
<br />
== Tile-Server ==<br />
The OpenSeaMap tile server is accessible at this URLs: <br />
<pre><br />
http://t1.openseamap.org/seamark/ <br />
http://tiles.openseamap.org/seamark/ <br />
</pre><br />
<br />
; Seamark-Layer <br />
The seamark-layer is added with the following lines:<br />
<pre><br />
var layer_seamark = new OpenLayers.Layer.TMS ( "seamark", "http://t1.openseamap.org/seamark/", <br />
{ numZoomLevels: 18, type: 'png', getURL:getTileURL, isBaseLayer:false, displayOutsideMaxExtent:true });<br />
map.addLayer(layer_seamark);<br />
</pre><br />
<br />
== WordPress ==<br />
[[Image:WordPress_OpenSeaMap_01.png|right|thumb|300px|WordPress OSM Plugin]]<br />
For WordPress there is a plugin based on OpenLayers 6.x to integrate slippy OpenSeaMaps.<br />
Some features are:<br />
: * add GPX and KML files<br />
: * add markers with html text popup<br />
: * customize controls (overviewmap, fullscreen, ...)<br />
<br />
Find more information here:<br />
: [http://wordpress.org/extend/plugins/osm/ WP OSM Plugin Downlaod @ WordPress.org] <br />
: [http://wp-osm-plugin.hanblog.net/ WP OSM Plugin Page]<br />
: [http://wp-osm-plugin.hanblog.net/display-openseamap/ Sample how to integrate OpenSeaMap in WordPress]<br />
<br />
== Drupal ==<br />
In the Drupal-Center-Forum you can find a module based on OpenLayers at [http://drupal.org/project/mappingkit MappingKit].<br />
<br />
== Typo3 ==<br />
<br />
In the TYPO3 Extension Repository you will find 2 extensions:<br />
: [https://extensions.typo3.org/extension/ods_osm/ ods_osm]<br />
: [https://extensions.typo3.org/extension/rb_osmsimple rb_osmsimple] <br />
<br />
[[Kategorie:Develop]]</div>Photowebloghttps://wiki.openseamap.org/index.php?title=h:En:OpenSeaMap_in_Website&diff=145738h:En:OpenSeaMap in Website2019-12-08T08:29:42Z<p>Photoweblog: /* WordPress */ added some features.</p>
<hr />
<div>{|border="0" cellpadding="6" cellspacing="0" width="100%"<br />
!style="background:#E3E3E3;" | [[de:OpenSeaMap_in_Website|Deutsch]]<br />
!style="background:#E3E3E3;" | [[OpenSeaMap_in_Website|English]]<br />
!style="background:#E3E3E3; width:100%;" | <br />
|}<br />
<br />
You can include OpenSeaMap in various ways to the website: <br />
__TOC__<br />
<br />
== Embed as Static Map ==<br />
[[Image:MapFullscreen.png|right|thumb|200px|Static Map]]<br />
<br />
The easiest way you show a static image, and link it with the full map of OpenSeaMap:<br />
<br />
# Search in [http://OpenSeaMap.org/map OpenSeaMap] the appropriate map section<br />
# Press the key <code>Print</code>, so you copy the whole screen <br> with the key combination <code><Alt-Print></code> you can selectively copy the currently active window<br />
# Open an image editing program of your choice and add the screenshot with <code><Strg-v></code><br />
# Draw the desired information (text, lines, circles, areas) <br />
# Save the image on your computer<br />
# Load the image to your Web server<br />
# Include the uploaded image in the article:<br />
<br />
<img src="<span style="background-color:yellow;">Path/Filename_of_Image</span>" alt="Alternative_text" width="Width" height="Height"><br />
<br />
; Link a static map to the full screen map<br />
<imagemap><br />
Image:MapFullscreen.png|right|thumb|200px|with Link to Fullscreen Chart<br />
default [http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de]<br />
desc none<br />
</imagemap><br />
<br />
You can link the map directly to OpenSeaMap. So by clicking on the map you opens the fullscreen map of OpenSeaMap in a new window. There you can zoom and move freely:<br />
<br />
# Search in [http://OpenSeaMap.org/map OpenSeaMap] the appropriate map section<br />
# Copy the permalink (on the map bottom right) by <code><Ctrl-c></code><br />
# Add the full permalink to your code by <code><Strg-v></code><br />
<br />
<a href="<span style="background-color:yellow;">Permalink</span>"><br />
<img src="Path/Fileame_of_Image" alt="Alternative text" width="Width" height="Height"><br />
</a><br />
<br />
Example:<br />
<a href="<span style="background-color:yellow;"><nowiki>http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de</nowiki></span>"><br />
<img src="../MapFullscreen.png" alt="show 'Teepott Warnemünde' to the chart" width="200" height="133"><br />
</a><br />
<br />
<br style="clear:both;" clear="all" /><br />
<br />
[[Datei:Marker_in_URL.jpg|thumb|Marker with speech bubble]]<br />
; Fullscreen chart with Marker and speech bubble<br />
[[De:Marker_in_URL|HoTo for displaying a marker plus text in a speech bubble]]<br />
<div style="clear:both;"></div><br />
<br />
== Embed as Slippy-Map ==<br />
You can embed OpenSeaMap also dynamically on the site. Users will see your chosen section and the appropriate zoom level in the first load. He can zoom and move freely.<br />
<br />
<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" <br />
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" <br />
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=BFTTFFTFFTF0FF">Gr&#246;&#223;ere Karte anzeigen</a><br />
<br />
The yellow-marked values of the variables have the following meaning:<br />
{|class="wikitable"<br />
| width || With of the chart (pixel)<br />
|-<br />
| height || Height of the chart (pixel)<br />
|-<br />
| bbox || "Bounding-Box" (the 4 corners of the selected chart)<br />
|-<br />
| lat || Latitude of the chart center<br />
|-<br />
| lat || Longitude of the chart center<br />
|-<br />
| zoom || Zoomlevel of the chart (4...18)<br />
|}<br />
<br />
HTML code to embed in the map: <!--[[de:OpenSeaMap in Website/HTML|Here is a ready-made HTML code for embedding a chart by "copy & paste"]].--><br />
<br />
<pre><br />
<br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/><br />
<title>OpenSeaMap</title><br />
<br />
<br />
<style type="text/css"><br />
.olImageLoadError {<br />
display: none !important;<br />
}<br />
</style><br />
<br />
<!-- bring in the OpenLayers javascript library<br />
(here we bring it from the remote site, but you could<br />
easily serve up this javascript yourself) --><br />
<script src="http://www.openlayers.org/api/OpenLayers.js"></script><br />
<br />
<!-- bring in the OpenStreetMap OpenLayers layers.<br />
Using this hosted file will make sure we are kept up<br />
to date with any necessary changes --><br />
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/harbours.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/map_utils.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/utilities.js"></script><br />
<script type="text/javascript"><br />
<br />
var map;<br />
var layer_mapnik;<br />
var layer_tah;<br />
var layer_seamark;<br />
var marker;<br />
<br />
// Position and zoomlevel of the map<br />
var lon = 12.0915;<br />
var lat = 54.1878;<br />
var zoom = 15;<br />
<br />
var linkTextSkipperGuide = "Beschreibung auf SkipperGuide";<br />
var linkTextWeatherHarbour = "Meteogramm";<br />
var language = 'de';<br />
<br />
<br />
function jumpTo(lon, lat, zoom) {<br />
var x = Lon2Merc(lon);<br />
var y = Lat2Merc(lat);<br />
map.setCenter(new OpenLayers.LonLat(x, y), zoom);<br />
return false;<br />
}<br />
<br />
function Lon2Merc(lon) {<br />
return 20037508.34 * lon / 180;<br />
}<br />
<br />
function Lat2Merc(lat) {<br />
var PI = 3.14159265358979323846;<br />
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);<br />
return 20037508.34 * lat / 180;<br />
}<br />
<br />
function addMarker(layer, lon, lat, popupContentHTML) {<br />
var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));<br />
var feature = new OpenLayers.Feature(layer, ll);<br />
feature.closeBox = true;<br />
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(260, 100) } );<br />
feature.data.popupContentHTML = popupContentHTML;<br />
feature.data.overflow = "hidden";<br />
<br />
marker = new OpenLayers.Marker(ll);<br />
marker.feature = feature;<br />
<br />
var markerClick = function(evt) {<br />
if (this.popup == null) {<br />
this.popup = this.createPopup(this.closeBox);<br />
map.addPopup(this.popup);<br />
this.popup.show();<br />
} else {<br />
this.popup.toggle();<br />
}<br />
OpenLayers.Event.stop(evt);<br />
};<br />
marker.events.register("mousedown", feature, markerClick);<br />
<br />
layer.addMarker(marker);<br />
map.addPopup(feature.createPopup(feature.closeBox));<br />
}<br />
<br />
function getTileURL(bounds) {<br />
var res = this.map.getResolution();<br />
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));<br />
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));<br />
var z = this.map.getZoom();<br />
var limit = Math.pow(2, z);<br />
if (y < 0 || y >= limit) {<br />
return null;<br />
} else {<br />
x = ((x % limit) + limit) % limit;<br />
url = this.url;<br />
path= z + "/" + x + "/" + y + "." + this.type;<br />
if (url instanceof Array) {<br />
url = this.selectUrl(path, url);<br />
}<br />
return url+path;<br />
}<br />
}<br />
<br />
function drawmap() {<br />
<br />
<br />
map = new OpenLayers.Map('map', {<br />
projection: new OpenLayers.Projection("EPSG:900913"),<br />
displayProjection: new OpenLayers.Projection("EPSG:4326"),<br />
eventListeners: {<br />
"moveend": mapEventMove,<br />
//"zoomend": mapEventZoom<br />
},<br />
controls: [<br />
new OpenLayers.Control.Navigation(),<br />
new OpenLayers.Control.ScaleLine({topOutUnits : "nmi", bottomOutUnits: "km", topInUnits: 'nmi', bottomInUnits: 'km', maxWidth: '40'}),<br />
new OpenLayers.Control.LayerSwitcher(),<br />
new OpenLayers.Control.MousePosition(),<br />
new OpenLayers.Control.PanZoomBar()],<br />
maxExtent:<br />
new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),<br />
numZoomLevels: 18,<br />
maxResolution: 156543,<br />
units: 'meters'<br />
});<br />
<br />
// Add Layers to map-------------------------------------------------------------------------------------------------------<br />
// Mapnik<br />
layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");<br />
// Seamark<br />
layer_seamark = new OpenLayers.Layer.TMS("Seezeichen", "http://tiles.openseamap.org/seamark/", { numZoomLevels: 18, type: 'png', getURL: getTileURL, isBaseLayer: false, displayOutsideMaxExtent: true});<br />
// Harbours<br />
layer_pois = new OpenLayers.Layer.Vector("Häfen", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayOutsideMaxExtent:true});<br />
layer_pois.setOpacity(0.8);<br />
<br />
map.addLayers([layer_mapnik, layer_seamark, layer_pois]);<br />
jumpTo(lon, lat, zoom);<br />
<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
<br />
// Map event listener moved<br />
function mapEventMove(event) {<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
</script><br />
<br />
</head><br />
<br />
<!-- body.onload is called once the page is loaded (call the 'init' function) --><br />
<body onload="drawmap();"><br />
<br />
<!-- define a DIV into which the map will appear. Make it take up the whole window --><br />
<div style="width:100%; height:100%" id="map"></div><br />
<br />
</body><br />
<br />
</html><br />
</pre><br />
<br />
== Tile-Server ==<br />
The OpenSeaMap tile server is accessible at this URLs: <br />
<pre><br />
http://t1.openseamap.org/seamark/ <br />
http://tiles.openseamap.org/seamark/ <br />
</pre><br />
<br />
; Seamark-Layer <br />
The seamark-layer is added with the following lines:<br />
<pre><br />
var layer_seamark = new OpenLayers.Layer.TMS ( "seamark", "http://t1.openseamap.org/seamark/", <br />
{ numZoomLevels: 18, type: 'png', getURL:getTileURL, isBaseLayer:false, displayOutsideMaxExtent:true });<br />
map.addLayer(layer_seamark);<br />
</pre><br />
<br />
== WordPress ==<br />
[[Image:WordPress_OpenSeaMap_01.png|right|thumb|200px|WordPress OSM Plugin]]<br />
For WordPress there is a plugin based on OpenLayers 6.x to integrate slippy OpenSeaMaps.<br />
Some features are:<br />
: * add GPX and KML files<br />
: * add markers with html text popup<br />
: * customize controls (overviewmap, fullscreen, ...)<br />
<br />
Find more information here:<br />
: [http://wordpress.org/extend/plugins/osm/ WP OSM Plugin Downlaod @ WordPress.org] <br />
: [http://wp-osm-plugin.hanblog.net/ WP OSM Plugin Page]<br />
: [http://wp-osm-plugin.hanblog.net/display-openseamap/ Sample how to integrate OpenSeaMap in WordPress]<br />
<br />
== Drupal ==<br />
In the Drupal-Center-Forum you can find a module based on OpenLayers at [http://drupal.org/project/mappingkit MappingKit].<br />
<br />
== Typo3 ==<br />
<br />
In the TYPO3 Extension Repository you will find 2 extensions:<br />
: [https://extensions.typo3.org/extension/ods_osm/ ods_osm]<br />
: [https://extensions.typo3.org/extension/rb_osmsimple rb_osmsimple] <br />
<br />
[[Kategorie:Develop]]</div>Photowebloghttps://wiki.openseamap.org/index.php?title=h:En:OpenSeaMap_in_Website&diff=145737h:En:OpenSeaMap in Website2019-12-08T08:27:20Z<p>Photoweblog: /* WordPress */ added image</p>
<hr />
<div>{|border="0" cellpadding="6" cellspacing="0" width="100%"<br />
!style="background:#E3E3E3;" | [[de:OpenSeaMap_in_Website|Deutsch]]<br />
!style="background:#E3E3E3;" | [[OpenSeaMap_in_Website|English]]<br />
!style="background:#E3E3E3; width:100%;" | <br />
|}<br />
<br />
You can include OpenSeaMap in various ways to the website: <br />
__TOC__<br />
<br />
== Embed as Static Map ==<br />
[[Image:MapFullscreen.png|right|thumb|200px|Static Map]]<br />
<br />
The easiest way you show a static image, and link it with the full map of OpenSeaMap:<br />
<br />
# Search in [http://OpenSeaMap.org/map OpenSeaMap] the appropriate map section<br />
# Press the key <code>Print</code>, so you copy the whole screen <br> with the key combination <code><Alt-Print></code> you can selectively copy the currently active window<br />
# Open an image editing program of your choice and add the screenshot with <code><Strg-v></code><br />
# Draw the desired information (text, lines, circles, areas) <br />
# Save the image on your computer<br />
# Load the image to your Web server<br />
# Include the uploaded image in the article:<br />
<br />
<img src="<span style="background-color:yellow;">Path/Filename_of_Image</span>" alt="Alternative_text" width="Width" height="Height"><br />
<br />
; Link a static map to the full screen map<br />
<imagemap><br />
Image:MapFullscreen.png|right|thumb|200px|with Link to Fullscreen Chart<br />
default [http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de]<br />
desc none<br />
</imagemap><br />
<br />
You can link the map directly to OpenSeaMap. So by clicking on the map you opens the fullscreen map of OpenSeaMap in a new window. There you can zoom and move freely:<br />
<br />
# Search in [http://OpenSeaMap.org/map OpenSeaMap] the appropriate map section<br />
# Copy the permalink (on the map bottom right) by <code><Ctrl-c></code><br />
# Add the full permalink to your code by <code><Strg-v></code><br />
<br />
<a href="<span style="background-color:yellow;">Permalink</span>"><br />
<img src="Path/Fileame_of_Image" alt="Alternative text" width="Width" height="Height"><br />
</a><br />
<br />
Example:<br />
<a href="<span style="background-color:yellow;"><nowiki>http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de</nowiki></span>"><br />
<img src="../MapFullscreen.png" alt="show 'Teepott Warnemünde' to the chart" width="200" height="133"><br />
</a><br />
<br />
<br style="clear:both;" clear="all" /><br />
<br />
[[Datei:Marker_in_URL.jpg|thumb|Marker with speech bubble]]<br />
; Fullscreen chart with Marker and speech bubble<br />
[[De:Marker_in_URL|HoTo for displaying a marker plus text in a speech bubble]]<br />
<div style="clear:both;"></div><br />
<br />
== Embed as Slippy-Map ==<br />
You can embed OpenSeaMap also dynamically on the site. Users will see your chosen section and the appropriate zoom level in the first load. He can zoom and move freely.<br />
<br />
<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" <br />
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" <br />
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=BFTTFFTFFTF0FF">Gr&#246;&#223;ere Karte anzeigen</a><br />
<br />
The yellow-marked values of the variables have the following meaning:<br />
{|class="wikitable"<br />
| width || With of the chart (pixel)<br />
|-<br />
| height || Height of the chart (pixel)<br />
|-<br />
| bbox || "Bounding-Box" (the 4 corners of the selected chart)<br />
|-<br />
| lat || Latitude of the chart center<br />
|-<br />
| lat || Longitude of the chart center<br />
|-<br />
| zoom || Zoomlevel of the chart (4...18)<br />
|}<br />
<br />
HTML code to embed in the map: <!--[[de:OpenSeaMap in Website/HTML|Here is a ready-made HTML code for embedding a chart by "copy & paste"]].--><br />
<br />
<pre><br />
<br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/><br />
<title>OpenSeaMap</title><br />
<br />
<br />
<style type="text/css"><br />
.olImageLoadError {<br />
display: none !important;<br />
}<br />
</style><br />
<br />
<!-- bring in the OpenLayers javascript library<br />
(here we bring it from the remote site, but you could<br />
easily serve up this javascript yourself) --><br />
<script src="http://www.openlayers.org/api/OpenLayers.js"></script><br />
<br />
<!-- bring in the OpenStreetMap OpenLayers layers.<br />
Using this hosted file will make sure we are kept up<br />
to date with any necessary changes --><br />
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/harbours.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/map_utils.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/utilities.js"></script><br />
<script type="text/javascript"><br />
<br />
var map;<br />
var layer_mapnik;<br />
var layer_tah;<br />
var layer_seamark;<br />
var marker;<br />
<br />
// Position and zoomlevel of the map<br />
var lon = 12.0915;<br />
var lat = 54.1878;<br />
var zoom = 15;<br />
<br />
var linkTextSkipperGuide = "Beschreibung auf SkipperGuide";<br />
var linkTextWeatherHarbour = "Meteogramm";<br />
var language = 'de';<br />
<br />
<br />
function jumpTo(lon, lat, zoom) {<br />
var x = Lon2Merc(lon);<br />
var y = Lat2Merc(lat);<br />
map.setCenter(new OpenLayers.LonLat(x, y), zoom);<br />
return false;<br />
}<br />
<br />
function Lon2Merc(lon) {<br />
return 20037508.34 * lon / 180;<br />
}<br />
<br />
function Lat2Merc(lat) {<br />
var PI = 3.14159265358979323846;<br />
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);<br />
return 20037508.34 * lat / 180;<br />
}<br />
<br />
function addMarker(layer, lon, lat, popupContentHTML) {<br />
var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));<br />
var feature = new OpenLayers.Feature(layer, ll);<br />
feature.closeBox = true;<br />
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(260, 100) } );<br />
feature.data.popupContentHTML = popupContentHTML;<br />
feature.data.overflow = "hidden";<br />
<br />
marker = new OpenLayers.Marker(ll);<br />
marker.feature = feature;<br />
<br />
var markerClick = function(evt) {<br />
if (this.popup == null) {<br />
this.popup = this.createPopup(this.closeBox);<br />
map.addPopup(this.popup);<br />
this.popup.show();<br />
} else {<br />
this.popup.toggle();<br />
}<br />
OpenLayers.Event.stop(evt);<br />
};<br />
marker.events.register("mousedown", feature, markerClick);<br />
<br />
layer.addMarker(marker);<br />
map.addPopup(feature.createPopup(feature.closeBox));<br />
}<br />
<br />
function getTileURL(bounds) {<br />
var res = this.map.getResolution();<br />
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));<br />
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));<br />
var z = this.map.getZoom();<br />
var limit = Math.pow(2, z);<br />
if (y < 0 || y >= limit) {<br />
return null;<br />
} else {<br />
x = ((x % limit) + limit) % limit;<br />
url = this.url;<br />
path= z + "/" + x + "/" + y + "." + this.type;<br />
if (url instanceof Array) {<br />
url = this.selectUrl(path, url);<br />
}<br />
return url+path;<br />
}<br />
}<br />
<br />
function drawmap() {<br />
<br />
<br />
map = new OpenLayers.Map('map', {<br />
projection: new OpenLayers.Projection("EPSG:900913"),<br />
displayProjection: new OpenLayers.Projection("EPSG:4326"),<br />
eventListeners: {<br />
"moveend": mapEventMove,<br />
//"zoomend": mapEventZoom<br />
},<br />
controls: [<br />
new OpenLayers.Control.Navigation(),<br />
new OpenLayers.Control.ScaleLine({topOutUnits : "nmi", bottomOutUnits: "km", topInUnits: 'nmi', bottomInUnits: 'km', maxWidth: '40'}),<br />
new OpenLayers.Control.LayerSwitcher(),<br />
new OpenLayers.Control.MousePosition(),<br />
new OpenLayers.Control.PanZoomBar()],<br />
maxExtent:<br />
new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),<br />
numZoomLevels: 18,<br />
maxResolution: 156543,<br />
units: 'meters'<br />
});<br />
<br />
// Add Layers to map-------------------------------------------------------------------------------------------------------<br />
// Mapnik<br />
layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");<br />
// Seamark<br />
layer_seamark = new OpenLayers.Layer.TMS("Seezeichen", "http://tiles.openseamap.org/seamark/", { numZoomLevels: 18, type: 'png', getURL: getTileURL, isBaseLayer: false, displayOutsideMaxExtent: true});<br />
// Harbours<br />
layer_pois = new OpenLayers.Layer.Vector("Häfen", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayOutsideMaxExtent:true});<br />
layer_pois.setOpacity(0.8);<br />
<br />
map.addLayers([layer_mapnik, layer_seamark, layer_pois]);<br />
jumpTo(lon, lat, zoom);<br />
<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
<br />
// Map event listener moved<br />
function mapEventMove(event) {<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
</script><br />
<br />
</head><br />
<br />
<!-- body.onload is called once the page is loaded (call the 'init' function) --><br />
<body onload="drawmap();"><br />
<br />
<!-- define a DIV into which the map will appear. Make it take up the whole window --><br />
<div style="width:100%; height:100%" id="map"></div><br />
<br />
</body><br />
<br />
</html><br />
</pre><br />
<br />
== Tile-Server ==<br />
The OpenSeaMap tile server is accessible at this URLs: <br />
<pre><br />
http://t1.openseamap.org/seamark/ <br />
http://tiles.openseamap.org/seamark/ <br />
</pre><br />
<br />
; Seamark-Layer <br />
The seamark-layer is added with the following lines:<br />
<pre><br />
var layer_seamark = new OpenLayers.Layer.TMS ( "seamark", "http://t1.openseamap.org/seamark/", <br />
{ numZoomLevels: 18, type: 'png', getURL:getTileURL, isBaseLayer:false, displayOutsideMaxExtent:true });<br />
map.addLayer(layer_seamark);<br />
</pre><br />
<br />
== WordPress ==<br />
[[Image:WordPress_OpenSeaMap_01.png|right|thumb|200px|WordPress OSM Plugin]]<br />
For WordPress there is a plugin based on OpenLayers 6.x to integrate slippy OpenSeaMaps:<br />
: [http://wordpress.org/extend/plugins/osm/ WP OSM Plugin Downlaod @ WordPress.org] <br />
: [http://wp-osm-plugin.hanblog.net/ WP OSM Plugin Page]<br />
: [http://wp-osm-plugin.hanblog.net/display-openseamap/ Sample how to integrate OpenSeaMap in WordPress]<br />
<br />
== Drupal ==<br />
In the Drupal-Center-Forum you can find a module based on OpenLayers at [http://drupal.org/project/mappingkit MappingKit].<br />
<br />
== Typo3 ==<br />
<br />
In the TYPO3 Extension Repository you will find 2 extensions:<br />
: [https://extensions.typo3.org/extension/ods_osm/ ods_osm]<br />
: [https://extensions.typo3.org/extension/rb_osmsimple rb_osmsimple] <br />
<br />
[[Kategorie:Develop]]</div>Photowebloghttps://wiki.openseamap.org/index.php?title=Datei:WordPress_OpenSeaMap_01.png&diff=145735Datei:WordPress OpenSeaMap 01.png2019-12-08T08:24:22Z<p>Photoweblog: OpenSeaMap in WordPress with WP OSM Plugin</p>
<hr />
<div>OpenSeaMap in WordPress with WP OSM Plugin</div>Photowebloghttps://wiki.openseamap.org/index.php?title=h:En:OpenSeaMap_in_Website&diff=145733h:En:OpenSeaMap in Website2019-12-08T08:17:34Z<p>Photoweblog: /* Typo3 */ added links</p>
<hr />
<div>{|border="0" cellpadding="6" cellspacing="0" width="100%"<br />
!style="background:#E3E3E3;" | [[de:OpenSeaMap_in_Website|Deutsch]]<br />
!style="background:#E3E3E3;" | [[OpenSeaMap_in_Website|English]]<br />
!style="background:#E3E3E3; width:100%;" | <br />
|}<br />
<br />
You can include OpenSeaMap in various ways to the website: <br />
__TOC__<br />
<br />
== Embed as Static Map ==<br />
[[Image:MapFullscreen.png|right|thumb|200px|Static Map]]<br />
<br />
The easiest way you show a static image, and link it with the full map of OpenSeaMap:<br />
<br />
# Search in [http://OpenSeaMap.org/map OpenSeaMap] the appropriate map section<br />
# Press the key <code>Print</code>, so you copy the whole screen <br> with the key combination <code><Alt-Print></code> you can selectively copy the currently active window<br />
# Open an image editing program of your choice and add the screenshot with <code><Strg-v></code><br />
# Draw the desired information (text, lines, circles, areas) <br />
# Save the image on your computer<br />
# Load the image to your Web server<br />
# Include the uploaded image in the article:<br />
<br />
<img src="<span style="background-color:yellow;">Path/Filename_of_Image</span>" alt="Alternative_text" width="Width" height="Height"><br />
<br />
; Link a static map to the full screen map<br />
<imagemap><br />
Image:MapFullscreen.png|right|thumb|200px|with Link to Fullscreen Chart<br />
default [http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de]<br />
desc none<br />
</imagemap><br />
<br />
You can link the map directly to OpenSeaMap. So by clicking on the map you opens the fullscreen map of OpenSeaMap in a new window. There you can zoom and move freely:<br />
<br />
# Search in [http://OpenSeaMap.org/map OpenSeaMap] the appropriate map section<br />
# Copy the permalink (on the map bottom right) by <code><Ctrl-c></code><br />
# Add the full permalink to your code by <code><Strg-v></code><br />
<br />
<a href="<span style="background-color:yellow;">Permalink</span>"><br />
<img src="Path/Fileame_of_Image" alt="Alternative text" width="Width" height="Height"><br />
</a><br />
<br />
Example:<br />
<a href="<span style="background-color:yellow;"><nowiki>http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de</nowiki></span>"><br />
<img src="../MapFullscreen.png" alt="show 'Teepott Warnemünde' to the chart" width="200" height="133"><br />
</a><br />
<br />
<br style="clear:both;" clear="all" /><br />
<br />
[[Datei:Marker_in_URL.jpg|thumb|Marker with speech bubble]]<br />
; Fullscreen chart with Marker and speech bubble<br />
[[De:Marker_in_URL|HoTo for displaying a marker plus text in a speech bubble]]<br />
<div style="clear:both;"></div><br />
<br />
== Embed as Slippy-Map ==<br />
You can embed OpenSeaMap also dynamically on the site. Users will see your chosen section and the appropriate zoom level in the first load. He can zoom and move freely.<br />
<br />
<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" <br />
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" <br />
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=BFTTFFTFFTF0FF">Gr&#246;&#223;ere Karte anzeigen</a><br />
<br />
The yellow-marked values of the variables have the following meaning:<br />
{|class="wikitable"<br />
| width || With of the chart (pixel)<br />
|-<br />
| height || Height of the chart (pixel)<br />
|-<br />
| bbox || "Bounding-Box" (the 4 corners of the selected chart)<br />
|-<br />
| lat || Latitude of the chart center<br />
|-<br />
| lat || Longitude of the chart center<br />
|-<br />
| zoom || Zoomlevel of the chart (4...18)<br />
|}<br />
<br />
HTML code to embed in the map: <!--[[de:OpenSeaMap in Website/HTML|Here is a ready-made HTML code for embedding a chart by "copy & paste"]].--><br />
<br />
<pre><br />
<br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/><br />
<title>OpenSeaMap</title><br />
<br />
<br />
<style type="text/css"><br />
.olImageLoadError {<br />
display: none !important;<br />
}<br />
</style><br />
<br />
<!-- bring in the OpenLayers javascript library<br />
(here we bring it from the remote site, but you could<br />
easily serve up this javascript yourself) --><br />
<script src="http://www.openlayers.org/api/OpenLayers.js"></script><br />
<br />
<!-- bring in the OpenStreetMap OpenLayers layers.<br />
Using this hosted file will make sure we are kept up<br />
to date with any necessary changes --><br />
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/harbours.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/map_utils.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/utilities.js"></script><br />
<script type="text/javascript"><br />
<br />
var map;<br />
var layer_mapnik;<br />
var layer_tah;<br />
var layer_seamark;<br />
var marker;<br />
<br />
// Position and zoomlevel of the map<br />
var lon = 12.0915;<br />
var lat = 54.1878;<br />
var zoom = 15;<br />
<br />
var linkTextSkipperGuide = "Beschreibung auf SkipperGuide";<br />
var linkTextWeatherHarbour = "Meteogramm";<br />
var language = 'de';<br />
<br />
<br />
function jumpTo(lon, lat, zoom) {<br />
var x = Lon2Merc(lon);<br />
var y = Lat2Merc(lat);<br />
map.setCenter(new OpenLayers.LonLat(x, y), zoom);<br />
return false;<br />
}<br />
<br />
function Lon2Merc(lon) {<br />
return 20037508.34 * lon / 180;<br />
}<br />
<br />
function Lat2Merc(lat) {<br />
var PI = 3.14159265358979323846;<br />
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);<br />
return 20037508.34 * lat / 180;<br />
}<br />
<br />
function addMarker(layer, lon, lat, popupContentHTML) {<br />
var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));<br />
var feature = new OpenLayers.Feature(layer, ll);<br />
feature.closeBox = true;<br />
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(260, 100) } );<br />
feature.data.popupContentHTML = popupContentHTML;<br />
feature.data.overflow = "hidden";<br />
<br />
marker = new OpenLayers.Marker(ll);<br />
marker.feature = feature;<br />
<br />
var markerClick = function(evt) {<br />
if (this.popup == null) {<br />
this.popup = this.createPopup(this.closeBox);<br />
map.addPopup(this.popup);<br />
this.popup.show();<br />
} else {<br />
this.popup.toggle();<br />
}<br />
OpenLayers.Event.stop(evt);<br />
};<br />
marker.events.register("mousedown", feature, markerClick);<br />
<br />
layer.addMarker(marker);<br />
map.addPopup(feature.createPopup(feature.closeBox));<br />
}<br />
<br />
function getTileURL(bounds) {<br />
var res = this.map.getResolution();<br />
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));<br />
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));<br />
var z = this.map.getZoom();<br />
var limit = Math.pow(2, z);<br />
if (y < 0 || y >= limit) {<br />
return null;<br />
} else {<br />
x = ((x % limit) + limit) % limit;<br />
url = this.url;<br />
path= z + "/" + x + "/" + y + "." + this.type;<br />
if (url instanceof Array) {<br />
url = this.selectUrl(path, url);<br />
}<br />
return url+path;<br />
}<br />
}<br />
<br />
function drawmap() {<br />
<br />
<br />
map = new OpenLayers.Map('map', {<br />
projection: new OpenLayers.Projection("EPSG:900913"),<br />
displayProjection: new OpenLayers.Projection("EPSG:4326"),<br />
eventListeners: {<br />
"moveend": mapEventMove,<br />
//"zoomend": mapEventZoom<br />
},<br />
controls: [<br />
new OpenLayers.Control.Navigation(),<br />
new OpenLayers.Control.ScaleLine({topOutUnits : "nmi", bottomOutUnits: "km", topInUnits: 'nmi', bottomInUnits: 'km', maxWidth: '40'}),<br />
new OpenLayers.Control.LayerSwitcher(),<br />
new OpenLayers.Control.MousePosition(),<br />
new OpenLayers.Control.PanZoomBar()],<br />
maxExtent:<br />
new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),<br />
numZoomLevels: 18,<br />
maxResolution: 156543,<br />
units: 'meters'<br />
});<br />
<br />
// Add Layers to map-------------------------------------------------------------------------------------------------------<br />
// Mapnik<br />
layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");<br />
// Seamark<br />
layer_seamark = new OpenLayers.Layer.TMS("Seezeichen", "http://tiles.openseamap.org/seamark/", { numZoomLevels: 18, type: 'png', getURL: getTileURL, isBaseLayer: false, displayOutsideMaxExtent: true});<br />
// Harbours<br />
layer_pois = new OpenLayers.Layer.Vector("Häfen", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayOutsideMaxExtent:true});<br />
layer_pois.setOpacity(0.8);<br />
<br />
map.addLayers([layer_mapnik, layer_seamark, layer_pois]);<br />
jumpTo(lon, lat, zoom);<br />
<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
<br />
// Map event listener moved<br />
function mapEventMove(event) {<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
</script><br />
<br />
</head><br />
<br />
<!-- body.onload is called once the page is loaded (call the 'init' function) --><br />
<body onload="drawmap();"><br />
<br />
<!-- define a DIV into which the map will appear. Make it take up the whole window --><br />
<div style="width:100%; height:100%" id="map"></div><br />
<br />
</body><br />
<br />
</html><br />
</pre><br />
<br />
== Tile-Server ==<br />
The OpenSeaMap tile server is accessible at this URLs: <br />
<pre><br />
http://t1.openseamap.org/seamark/ <br />
http://tiles.openseamap.org/seamark/ <br />
</pre><br />
<br />
; Seamark-Layer <br />
The seamark-layer is added with the following lines:<br />
<pre><br />
var layer_seamark = new OpenLayers.Layer.TMS ( "seamark", "http://t1.openseamap.org/seamark/", <br />
{ numZoomLevels: 18, type: 'png', getURL:getTileURL, isBaseLayer:false, displayOutsideMaxExtent:true });<br />
map.addLayer(layer_seamark);<br />
</pre><br />
<br />
== WordPress ==<br />
For WordPress there is a plugin based on OpenLayers 6.x to integrate slippy OpenSeaMaps:<br />
: [http://wordpress.org/extend/plugins/osm/ WP OSM Plugin Downlaod @ WordPress.org] <br />
: [http://wp-osm-plugin.hanblog.net/ WP OSM Plugin Page]<br />
: [http://wp-osm-plugin.hanblog.net/display-openseamap/ Sample how to integrate OpenSeaMap in WordPress]<br />
<br />
== Drupal ==<br />
In the Drupal-Center-Forum you can find a module based on OpenLayers at [http://drupal.org/project/mappingkit MappingKit].<br />
<br />
== Typo3 ==<br />
<br />
In the TYPO3 Extension Repository you will find 2 extensions:<br />
: [https://extensions.typo3.org/extension/ods_osm/ ods_osm]<br />
: [https://extensions.typo3.org/extension/rb_osmsimple rb_osmsimple] <br />
<br />
[[Kategorie:Develop]]</div>Photowebloghttps://wiki.openseamap.org/index.php?title=h:En:OpenSeaMap_in_Website&diff=145731h:En:OpenSeaMap in Website2019-12-08T08:13:41Z<p>Photoweblog: /* WordPress */ add some information</p>
<hr />
<div>{|border="0" cellpadding="6" cellspacing="0" width="100%"<br />
!style="background:#E3E3E3;" | [[de:OpenSeaMap_in_Website|Deutsch]]<br />
!style="background:#E3E3E3;" | [[OpenSeaMap_in_Website|English]]<br />
!style="background:#E3E3E3; width:100%;" | <br />
|}<br />
<br />
You can include OpenSeaMap in various ways to the website: <br />
__TOC__<br />
<br />
== Embed as Static Map ==<br />
[[Image:MapFullscreen.png|right|thumb|200px|Static Map]]<br />
<br />
The easiest way you show a static image, and link it with the full map of OpenSeaMap:<br />
<br />
# Search in [http://OpenSeaMap.org/map OpenSeaMap] the appropriate map section<br />
# Press the key <code>Print</code>, so you copy the whole screen <br> with the key combination <code><Alt-Print></code> you can selectively copy the currently active window<br />
# Open an image editing program of your choice and add the screenshot with <code><Strg-v></code><br />
# Draw the desired information (text, lines, circles, areas) <br />
# Save the image on your computer<br />
# Load the image to your Web server<br />
# Include the uploaded image in the article:<br />
<br />
<img src="<span style="background-color:yellow;">Path/Filename_of_Image</span>" alt="Alternative_text" width="Width" height="Height"><br />
<br />
; Link a static map to the full screen map<br />
<imagemap><br />
Image:MapFullscreen.png|right|thumb|200px|with Link to Fullscreen Chart<br />
default [http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de]<br />
desc none<br />
</imagemap><br />
<br />
You can link the map directly to OpenSeaMap. So by clicking on the map you opens the fullscreen map of OpenSeaMap in a new window. There you can zoom and move freely:<br />
<br />
# Search in [http://OpenSeaMap.org/map OpenSeaMap] the appropriate map section<br />
# Copy the permalink (on the map bottom right) by <code><Ctrl-c></code><br />
# Add the full permalink to your code by <code><Strg-v></code><br />
<br />
<a href="<span style="background-color:yellow;">Permalink</span>"><br />
<img src="Path/Fileame_of_Image" alt="Alternative text" width="Width" height="Height"><br />
</a><br />
<br />
Example:<br />
<a href="<span style="background-color:yellow;"><nowiki>http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de</nowiki></span>"><br />
<img src="../MapFullscreen.png" alt="show 'Teepott Warnemünde' to the chart" width="200" height="133"><br />
</a><br />
<br />
<br style="clear:both;" clear="all" /><br />
<br />
[[Datei:Marker_in_URL.jpg|thumb|Marker with speech bubble]]<br />
; Fullscreen chart with Marker and speech bubble<br />
[[De:Marker_in_URL|HoTo for displaying a marker plus text in a speech bubble]]<br />
<div style="clear:both;"></div><br />
<br />
== Embed as Slippy-Map ==<br />
You can embed OpenSeaMap also dynamically on the site. Users will see your chosen section and the appropriate zoom level in the first load. He can zoom and move freely.<br />
<br />
<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" <br />
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" <br />
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=BFTTFFTFFTF0FF">Gr&#246;&#223;ere Karte anzeigen</a><br />
<br />
The yellow-marked values of the variables have the following meaning:<br />
{|class="wikitable"<br />
| width || With of the chart (pixel)<br />
|-<br />
| height || Height of the chart (pixel)<br />
|-<br />
| bbox || "Bounding-Box" (the 4 corners of the selected chart)<br />
|-<br />
| lat || Latitude of the chart center<br />
|-<br />
| lat || Longitude of the chart center<br />
|-<br />
| zoom || Zoomlevel of the chart (4...18)<br />
|}<br />
<br />
HTML code to embed in the map: <!--[[de:OpenSeaMap in Website/HTML|Here is a ready-made HTML code for embedding a chart by "copy & paste"]].--><br />
<br />
<pre><br />
<br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/><br />
<title>OpenSeaMap</title><br />
<br />
<br />
<style type="text/css"><br />
.olImageLoadError {<br />
display: none !important;<br />
}<br />
</style><br />
<br />
<!-- bring in the OpenLayers javascript library<br />
(here we bring it from the remote site, but you could<br />
easily serve up this javascript yourself) --><br />
<script src="http://www.openlayers.org/api/OpenLayers.js"></script><br />
<br />
<!-- bring in the OpenStreetMap OpenLayers layers.<br />
Using this hosted file will make sure we are kept up<br />
to date with any necessary changes --><br />
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/harbours.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/map_utils.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/utilities.js"></script><br />
<script type="text/javascript"><br />
<br />
var map;<br />
var layer_mapnik;<br />
var layer_tah;<br />
var layer_seamark;<br />
var marker;<br />
<br />
// Position and zoomlevel of the map<br />
var lon = 12.0915;<br />
var lat = 54.1878;<br />
var zoom = 15;<br />
<br />
var linkTextSkipperGuide = "Beschreibung auf SkipperGuide";<br />
var linkTextWeatherHarbour = "Meteogramm";<br />
var language = 'de';<br />
<br />
<br />
function jumpTo(lon, lat, zoom) {<br />
var x = Lon2Merc(lon);<br />
var y = Lat2Merc(lat);<br />
map.setCenter(new OpenLayers.LonLat(x, y), zoom);<br />
return false;<br />
}<br />
<br />
function Lon2Merc(lon) {<br />
return 20037508.34 * lon / 180;<br />
}<br />
<br />
function Lat2Merc(lat) {<br />
var PI = 3.14159265358979323846;<br />
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);<br />
return 20037508.34 * lat / 180;<br />
}<br />
<br />
function addMarker(layer, lon, lat, popupContentHTML) {<br />
var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));<br />
var feature = new OpenLayers.Feature(layer, ll);<br />
feature.closeBox = true;<br />
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(260, 100) } );<br />
feature.data.popupContentHTML = popupContentHTML;<br />
feature.data.overflow = "hidden";<br />
<br />
marker = new OpenLayers.Marker(ll);<br />
marker.feature = feature;<br />
<br />
var markerClick = function(evt) {<br />
if (this.popup == null) {<br />
this.popup = this.createPopup(this.closeBox);<br />
map.addPopup(this.popup);<br />
this.popup.show();<br />
} else {<br />
this.popup.toggle();<br />
}<br />
OpenLayers.Event.stop(evt);<br />
};<br />
marker.events.register("mousedown", feature, markerClick);<br />
<br />
layer.addMarker(marker);<br />
map.addPopup(feature.createPopup(feature.closeBox));<br />
}<br />
<br />
function getTileURL(bounds) {<br />
var res = this.map.getResolution();<br />
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));<br />
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));<br />
var z = this.map.getZoom();<br />
var limit = Math.pow(2, z);<br />
if (y < 0 || y >= limit) {<br />
return null;<br />
} else {<br />
x = ((x % limit) + limit) % limit;<br />
url = this.url;<br />
path= z + "/" + x + "/" + y + "." + this.type;<br />
if (url instanceof Array) {<br />
url = this.selectUrl(path, url);<br />
}<br />
return url+path;<br />
}<br />
}<br />
<br />
function drawmap() {<br />
<br />
<br />
map = new OpenLayers.Map('map', {<br />
projection: new OpenLayers.Projection("EPSG:900913"),<br />
displayProjection: new OpenLayers.Projection("EPSG:4326"),<br />
eventListeners: {<br />
"moveend": mapEventMove,<br />
//"zoomend": mapEventZoom<br />
},<br />
controls: [<br />
new OpenLayers.Control.Navigation(),<br />
new OpenLayers.Control.ScaleLine({topOutUnits : "nmi", bottomOutUnits: "km", topInUnits: 'nmi', bottomInUnits: 'km', maxWidth: '40'}),<br />
new OpenLayers.Control.LayerSwitcher(),<br />
new OpenLayers.Control.MousePosition(),<br />
new OpenLayers.Control.PanZoomBar()],<br />
maxExtent:<br />
new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),<br />
numZoomLevels: 18,<br />
maxResolution: 156543,<br />
units: 'meters'<br />
});<br />
<br />
// Add Layers to map-------------------------------------------------------------------------------------------------------<br />
// Mapnik<br />
layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");<br />
// Seamark<br />
layer_seamark = new OpenLayers.Layer.TMS("Seezeichen", "http://tiles.openseamap.org/seamark/", { numZoomLevels: 18, type: 'png', getURL: getTileURL, isBaseLayer: false, displayOutsideMaxExtent: true});<br />
// Harbours<br />
layer_pois = new OpenLayers.Layer.Vector("Häfen", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayOutsideMaxExtent:true});<br />
layer_pois.setOpacity(0.8);<br />
<br />
map.addLayers([layer_mapnik, layer_seamark, layer_pois]);<br />
jumpTo(lon, lat, zoom);<br />
<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
<br />
// Map event listener moved<br />
function mapEventMove(event) {<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
</script><br />
<br />
</head><br />
<br />
<!-- body.onload is called once the page is loaded (call the 'init' function) --><br />
<body onload="drawmap();"><br />
<br />
<!-- define a DIV into which the map will appear. Make it take up the whole window --><br />
<div style="width:100%; height:100%" id="map"></div><br />
<br />
</body><br />
<br />
</html><br />
</pre><br />
<br />
== Tile-Server ==<br />
The OpenSeaMap tile server is accessible at this URLs: <br />
<pre><br />
http://t1.openseamap.org/seamark/ <br />
http://tiles.openseamap.org/seamark/ <br />
</pre><br />
<br />
; Seamark-Layer <br />
The seamark-layer is added with the following lines:<br />
<pre><br />
var layer_seamark = new OpenLayers.Layer.TMS ( "seamark", "http://t1.openseamap.org/seamark/", <br />
{ numZoomLevels: 18, type: 'png', getURL:getTileURL, isBaseLayer:false, displayOutsideMaxExtent:true });<br />
map.addLayer(layer_seamark);<br />
</pre><br />
<br />
== WordPress ==<br />
For WordPress there is a plugin based on OpenLayers 6.x to integrate slippy OpenSeaMaps:<br />
: [http://wordpress.org/extend/plugins/osm/ WP OSM Plugin Downlaod @ WordPress.org] <br />
: [http://wp-osm-plugin.hanblog.net/ WP OSM Plugin Page]<br />
: [http://wp-osm-plugin.hanblog.net/display-openseamap/ Sample how to integrate OpenSeaMap in WordPress]<br />
<br />
== Drupal ==<br />
In the Drupal-Center-Forum you can find a module based on OpenLayers at [http://drupal.org/project/mappingkit MappingKit].<br />
<br />
== Typo3 ==<br />
<br />
In the TYPO3 Extension Repository you will find 2 extensions:<br />
* rb_osmsimple (separate records for markers)<br />
* ods_osm (Coordinates in fe_users and tt_address records)<br />
<br />
[[Kategorie:Develop]]</div>Photowebloghttps://wiki.openseamap.org/index.php?title=h:En:OpenSeaMap_in_Website&diff=145730h:En:OpenSeaMap in Website2019-12-08T08:12:49Z<p>Photoweblog: /* Drupal */ Removed dead links</p>
<hr />
<div>{|border="0" cellpadding="6" cellspacing="0" width="100%"<br />
!style="background:#E3E3E3;" | [[de:OpenSeaMap_in_Website|Deutsch]]<br />
!style="background:#E3E3E3;" | [[OpenSeaMap_in_Website|English]]<br />
!style="background:#E3E3E3; width:100%;" | <br />
|}<br />
<br />
You can include OpenSeaMap in various ways to the website: <br />
__TOC__<br />
<br />
== Embed as Static Map ==<br />
[[Image:MapFullscreen.png|right|thumb|200px|Static Map]]<br />
<br />
The easiest way you show a static image, and link it with the full map of OpenSeaMap:<br />
<br />
# Search in [http://OpenSeaMap.org/map OpenSeaMap] the appropriate map section<br />
# Press the key <code>Print</code>, so you copy the whole screen <br> with the key combination <code><Alt-Print></code> you can selectively copy the currently active window<br />
# Open an image editing program of your choice and add the screenshot with <code><Strg-v></code><br />
# Draw the desired information (text, lines, circles, areas) <br />
# Save the image on your computer<br />
# Load the image to your Web server<br />
# Include the uploaded image in the article:<br />
<br />
<img src="<span style="background-color:yellow;">Path/Filename_of_Image</span>" alt="Alternative_text" width="Width" height="Height"><br />
<br />
; Link a static map to the full screen map<br />
<imagemap><br />
Image:MapFullscreen.png|right|thumb|200px|with Link to Fullscreen Chart<br />
default [http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de]<br />
desc none<br />
</imagemap><br />
<br />
You can link the map directly to OpenSeaMap. So by clicking on the map you opens the fullscreen map of OpenSeaMap in a new window. There you can zoom and move freely:<br />
<br />
# Search in [http://OpenSeaMap.org/map OpenSeaMap] the appropriate map section<br />
# Copy the permalink (on the map bottom right) by <code><Ctrl-c></code><br />
# Add the full permalink to your code by <code><Strg-v></code><br />
<br />
<a href="<span style="background-color:yellow;">Permalink</span>"><br />
<img src="Path/Fileame_of_Image" alt="Alternative text" width="Width" height="Height"><br />
</a><br />
<br />
Example:<br />
<a href="<span style="background-color:yellow;"><nowiki>http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de</nowiki></span>"><br />
<img src="../MapFullscreen.png" alt="show 'Teepott Warnemünde' to the chart" width="200" height="133"><br />
</a><br />
<br />
<br style="clear:both;" clear="all" /><br />
<br />
[[Datei:Marker_in_URL.jpg|thumb|Marker with speech bubble]]<br />
; Fullscreen chart with Marker and speech bubble<br />
[[De:Marker_in_URL|HoTo for displaying a marker plus text in a speech bubble]]<br />
<div style="clear:both;"></div><br />
<br />
== Embed as Slippy-Map ==<br />
You can embed OpenSeaMap also dynamically on the site. Users will see your chosen section and the appropriate zoom level in the first load. He can zoom and move freely.<br />
<br />
<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" <br />
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" <br />
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=BFTTFFTFFTF0FF">Gr&#246;&#223;ere Karte anzeigen</a><br />
<br />
The yellow-marked values of the variables have the following meaning:<br />
{|class="wikitable"<br />
| width || With of the chart (pixel)<br />
|-<br />
| height || Height of the chart (pixel)<br />
|-<br />
| bbox || "Bounding-Box" (the 4 corners of the selected chart)<br />
|-<br />
| lat || Latitude of the chart center<br />
|-<br />
| lat || Longitude of the chart center<br />
|-<br />
| zoom || Zoomlevel of the chart (4...18)<br />
|}<br />
<br />
HTML code to embed in the map: <!--[[de:OpenSeaMap in Website/HTML|Here is a ready-made HTML code for embedding a chart by "copy & paste"]].--><br />
<br />
<pre><br />
<br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/><br />
<title>OpenSeaMap</title><br />
<br />
<br />
<style type="text/css"><br />
.olImageLoadError {<br />
display: none !important;<br />
}<br />
</style><br />
<br />
<!-- bring in the OpenLayers javascript library<br />
(here we bring it from the remote site, but you could<br />
easily serve up this javascript yourself) --><br />
<script src="http://www.openlayers.org/api/OpenLayers.js"></script><br />
<br />
<!-- bring in the OpenStreetMap OpenLayers layers.<br />
Using this hosted file will make sure we are kept up<br />
to date with any necessary changes --><br />
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/harbours.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/map_utils.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/utilities.js"></script><br />
<script type="text/javascript"><br />
<br />
var map;<br />
var layer_mapnik;<br />
var layer_tah;<br />
var layer_seamark;<br />
var marker;<br />
<br />
// Position and zoomlevel of the map<br />
var lon = 12.0915;<br />
var lat = 54.1878;<br />
var zoom = 15;<br />
<br />
var linkTextSkipperGuide = "Beschreibung auf SkipperGuide";<br />
var linkTextWeatherHarbour = "Meteogramm";<br />
var language = 'de';<br />
<br />
<br />
function jumpTo(lon, lat, zoom) {<br />
var x = Lon2Merc(lon);<br />
var y = Lat2Merc(lat);<br />
map.setCenter(new OpenLayers.LonLat(x, y), zoom);<br />
return false;<br />
}<br />
<br />
function Lon2Merc(lon) {<br />
return 20037508.34 * lon / 180;<br />
}<br />
<br />
function Lat2Merc(lat) {<br />
var PI = 3.14159265358979323846;<br />
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);<br />
return 20037508.34 * lat / 180;<br />
}<br />
<br />
function addMarker(layer, lon, lat, popupContentHTML) {<br />
var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));<br />
var feature = new OpenLayers.Feature(layer, ll);<br />
feature.closeBox = true;<br />
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(260, 100) } );<br />
feature.data.popupContentHTML = popupContentHTML;<br />
feature.data.overflow = "hidden";<br />
<br />
marker = new OpenLayers.Marker(ll);<br />
marker.feature = feature;<br />
<br />
var markerClick = function(evt) {<br />
if (this.popup == null) {<br />
this.popup = this.createPopup(this.closeBox);<br />
map.addPopup(this.popup);<br />
this.popup.show();<br />
} else {<br />
this.popup.toggle();<br />
}<br />
OpenLayers.Event.stop(evt);<br />
};<br />
marker.events.register("mousedown", feature, markerClick);<br />
<br />
layer.addMarker(marker);<br />
map.addPopup(feature.createPopup(feature.closeBox));<br />
}<br />
<br />
function getTileURL(bounds) {<br />
var res = this.map.getResolution();<br />
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));<br />
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));<br />
var z = this.map.getZoom();<br />
var limit = Math.pow(2, z);<br />
if (y < 0 || y >= limit) {<br />
return null;<br />
} else {<br />
x = ((x % limit) + limit) % limit;<br />
url = this.url;<br />
path= z + "/" + x + "/" + y + "." + this.type;<br />
if (url instanceof Array) {<br />
url = this.selectUrl(path, url);<br />
}<br />
return url+path;<br />
}<br />
}<br />
<br />
function drawmap() {<br />
<br />
<br />
map = new OpenLayers.Map('map', {<br />
projection: new OpenLayers.Projection("EPSG:900913"),<br />
displayProjection: new OpenLayers.Projection("EPSG:4326"),<br />
eventListeners: {<br />
"moveend": mapEventMove,<br />
//"zoomend": mapEventZoom<br />
},<br />
controls: [<br />
new OpenLayers.Control.Navigation(),<br />
new OpenLayers.Control.ScaleLine({topOutUnits : "nmi", bottomOutUnits: "km", topInUnits: 'nmi', bottomInUnits: 'km', maxWidth: '40'}),<br />
new OpenLayers.Control.LayerSwitcher(),<br />
new OpenLayers.Control.MousePosition(),<br />
new OpenLayers.Control.PanZoomBar()],<br />
maxExtent:<br />
new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),<br />
numZoomLevels: 18,<br />
maxResolution: 156543,<br />
units: 'meters'<br />
});<br />
<br />
// Add Layers to map-------------------------------------------------------------------------------------------------------<br />
// Mapnik<br />
layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");<br />
// Seamark<br />
layer_seamark = new OpenLayers.Layer.TMS("Seezeichen", "http://tiles.openseamap.org/seamark/", { numZoomLevels: 18, type: 'png', getURL: getTileURL, isBaseLayer: false, displayOutsideMaxExtent: true});<br />
// Harbours<br />
layer_pois = new OpenLayers.Layer.Vector("Häfen", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayOutsideMaxExtent:true});<br />
layer_pois.setOpacity(0.8);<br />
<br />
map.addLayers([layer_mapnik, layer_seamark, layer_pois]);<br />
jumpTo(lon, lat, zoom);<br />
<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
<br />
// Map event listener moved<br />
function mapEventMove(event) {<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
</script><br />
<br />
</head><br />
<br />
<!-- body.onload is called once the page is loaded (call the 'init' function) --><br />
<body onload="drawmap();"><br />
<br />
<!-- define a DIV into which the map will appear. Make it take up the whole window --><br />
<div style="width:100%; height:100%" id="map"></div><br />
<br />
</body><br />
<br />
</html><br />
</pre><br />
<br />
== Tile-Server ==<br />
The OpenSeaMap tile server is accessible at this URLs: <br />
<pre><br />
http://t1.openseamap.org/seamark/ <br />
http://tiles.openseamap.org/seamark/ <br />
</pre><br />
<br />
; Seamark-Layer <br />
The seamark-layer is added with the following lines:<br />
<pre><br />
var layer_seamark = new OpenLayers.Layer.TMS ( "seamark", "http://t1.openseamap.org/seamark/", <br />
{ numZoomLevels: 18, type: 'png', getURL:getTileURL, isBaseLayer:false, displayOutsideMaxExtent:true });<br />
map.addLayer(layer_seamark);<br />
</pre><br />
<br />
== WordPress ==<br />
In WordPress Blog there is a plugin to integrate slippy OpenSeaMaps:<br />
: [http://wordpress.org/extend/plugins/osm/ WP OSM Plugin Downlaod @ WordPress.org] <br />
: [http://wp-osm-plugin.hanblog.net/ WP OSM Plugin Page]<br />
: [http://wp-osm-plugin.hanblog.net/display-openseamap/ Sample how to integrate OpenSeaMap in WordPress]<br />
<br />
== Drupal ==<br />
In the Drupal-Center-Forum you can find a module based on OpenLayers at [http://drupal.org/project/mappingkit MappingKit].<br />
<br />
== Typo3 ==<br />
<br />
In the TYPO3 Extension Repository you will find 2 extensions:<br />
* rb_osmsimple (separate records for markers)<br />
* ods_osm (Coordinates in fe_users and tt_address records)<br />
<br />
[[Kategorie:Develop]]</div>Photowebloghttps://wiki.openseamap.org/index.php?title=h:En:OpenSeaMap_in_Website&diff=2531h:En:OpenSeaMap in Website2014-01-12T13:16:35Z<p>Photoweblog: added WordPress OSM Plugin, removed Osmarender, corrected new OpenSeaMap tile server</p>
<hr />
<div>{|border="0" cellpadding="6" cellspacing="0" width="100%"<br />
!style="background:#E3E3E3;" | [[de:OpenSeaMap_in_Website|Deutsch]]<br />
!style="background:#E3E3E3;" | [[OpenSeaMap_in_Website|English]]<br />
!style="background:#E3E3E3; width:100%;" | <br />
|}<br />
<br />
You can include OpenSeaMap in various ways to the website: <br />
__TOC__<br />
<br />
== Embed as Static Map ==<br />
[[Image:MapFullscreen.png|right|thumb|200px|Static Map]]<br />
<br />
The easiest way you show a static image, and link it with the full map of OpenSeaMap:<br />
<br />
# Search in [http://OpenSeaMap.org/map OpenSeaMap] the appropriate map section<br />
# Press the key <code>Print</code>, so you copy the whole screen <br> with the key combination <code><Alt-Print></code> you can selectively copy the currently active window<br />
# Open an image editing program of your choice and add the screenshot with <code><Strg-v></code><br />
# Draw the desired information (text, lines, circles, areas) <br />
# Save the image on your computer<br />
# Load the image to your Web server<br />
# Include the uploaded image in the article:<br />
<br />
<img src="<span style="background-color:yellow;">Path/Filename_of_Image</span>" alt="Alternative_text" width="Width" height="Height"><br />
<br />
; Link a static map to the full screen map<br />
<imagemap><br />
Image:MapFullscreen.png|right|thumb|200px|with Link to Fullscreen Chart<br />
default [http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de]<br />
desc none<br />
</imagemap><br />
<br />
You can link the map directly to OpenSeaMap. So by clicking on the map you opens the fullscreen map of OpenSeaMap in a new window. There you can zoom and move freely:<br />
<br />
# Search in [http://OpenSeaMap.org/map OpenSeaMap] the appropriate map section<br />
# Copy the permalink (on the map bottom right) by <code><Ctrl-c></code><br />
# Add the full permalink to your code by <code><Strg-v></code><br />
<br />
<a href="<span style="background-color:yellow;">Permalink</span>"><br />
<img src="Path/Fileame_of_Image" alt="Alternative text" width="Width" height="Height"><br />
</a><br />
<br />
Example:<br />
<a href="<span style="background-color:yellow;"><nowiki>http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de</nowiki></span>"><br />
<img src="../MapFullscreen.png" alt="show 'Teepott Warnemünde' to the chart" width="200" height="133"><br />
</a><br />
<br />
<br style="clear:both;" clear="all" /><br />
<br />
[[Datei:Marker_in_URL.jpg|thumb|Marker with speech bubble]]<br />
; Fullscreen chart with Marker and speech bubble<br />
[[De:Marker_in_URL|HoTo for displaying a marker plus text in a speech bubble]]<br />
<div style="clear:both;"></div><br />
<br />
== Embed as Slippy-Map ==<br />
You can embed OpenSeaMap also dynamically on the site. Users will see your chosen section and the appropriate zoom level in the first load. He can zoom and move freely.<br />
<br />
<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" <br />
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" <br />
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=BFTTFFTFFTF0FF">Gr&#246;&#223;ere Karte anzeigen</a><br />
<br />
The yellow-marked values of the variables have the following meaning:<br />
{|class="wikitable"<br />
| width || With of the chart (pixel)<br />
|-<br />
| height || Height of the chart (pixel)<br />
|-<br />
| bbox || "Bounding-Box" (the 4 corners of the selected chart)<br />
|-<br />
| lat || Latitude of the chart center<br />
|-<br />
| lat || Longitude of the chart center<br />
|-<br />
| zoom || Zoomlevel of the chart (4...18)<br />
|}<br />
<br />
HTML code to embed in the map: <!--[[de:OpenSeaMap in Website/HTML|Here is a ready-made HTML code for embedding a chart by "copy & paste"]].--><br />
<br />
<pre><br />
<br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/><br />
<title>OpenSeaMap</title><br />
<br />
<!-- bring in the OpenLayers javascript library<br />
(here we bring it from the remote site, but you could<br />
easily serve up this javascript yourself) --><br />
<script src="http://www.openlayers.org/api/OpenLayers.js"></script><br />
<br />
<!-- bring in the OpenStreetMap OpenLayers layers.<br />
Using this hosted file will make sure we are kept up<br />
to date with any necessary changes --><br />
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/harbours.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/map_utils.js"></script><br />
<script type="text/javascript"><br />
<br />
var map;<br />
var layer_mapnik;<br />
var layer_seamark;<br />
var marker;<br />
<br />
// Position and zoomlevel of the map<br />
var lon = 12.0915;<br />
var lat = 54.1878;<br />
var zoom = 15;<br />
<br />
var linkText = "Description by SkipperGuide";<br />
<br />
function jumpTo(lon, lat, zoom) {<br />
var x = Lon2Merc(lon);<br />
var y = Lat2Merc(lat);<br />
map.setCenter(new OpenLayers.LonLat(x, y), zoom);<br />
return false;<br />
}<br />
<br />
function Lon2Merc(lon) {<br />
return 20037508.34 * lon / 180;<br />
}<br />
<br />
function Lat2Merc(lat) {<br />
var PI = 3.14159265358979323846;<br />
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);<br />
return 20037508.34 * lat / 180;<br />
}<br />
<br />
function addMarker(layer, lon, lat, popupContentHTML) {<br />
var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));<br />
var feature = new OpenLayers.Feature(layer, ll);<br />
feature.closeBox = true;<br />
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(260, 100) } );<br />
feature.data.popupContentHTML = popupContentHTML;<br />
feature.data.overflow = "hidden";<br />
<br />
marker = new OpenLayers.Marker(ll);<br />
marker.feature = feature;<br />
<br />
var markerClick = function(evt) {<br />
if (this.popup == null) {<br />
this.popup = this.createPopup(this.closeBox);<br />
map.addPopup(this.popup);<br />
this.popup.show();<br />
} else {<br />
this.popup.toggle();<br />
}<br />
OpenLayers.Event.stop(evt);<br />
};<br />
marker.events.register("mousedown", feature, markerClick);<br />
<br />
layer.addMarker(marker);<br />
map.addPopup(feature.createPopup(feature.closeBox));<br />
}<br />
<br />
function getTileURL(bounds) {<br />
var res = this.map.getResolution();<br />
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));<br />
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));<br />
var z = this.map.getZoom();<br />
var limit = Math.pow(2, z);<br />
if (y < 0 || y >= limit) {<br />
return null;<br />
} else {<br />
x = ((x % limit) + limit) % limit;<br />
url = this.url;<br />
path= z + "/" + x + "/" + y + "." + this.type;<br />
if (url instanceof Array) {<br />
url = this.selectUrl(path, url);<br />
}<br />
return url+path;<br />
}<br />
}<br />
<br />
function drawmap() {<br />
<br />
<br />
map = new OpenLayers.Map('map', {<br />
projection: new OpenLayers.Projection("EPSG:900913"),<br />
displayProjection: new OpenLayers.Projection("EPSG:4326"),<br />
eventListeners: {<br />
"moveend": mapEventMove,<br />
//"zoomend": mapEventZoom<br />
},<br />
controls: [<br />
new OpenLayers.Control.Navigation(),<br />
new OpenLayers.Control.ScaleLine({topOutUnits : "nmi", bottomOutUnits: "km", topInUnits: 'nmi', bottomInUnits: 'km', maxWidth: '40'}),<br />
new OpenLayers.Control.LayerSwitcher(),<br />
new OpenLayers.Control.MousePosition(),<br />
new OpenLayers.Control.PanZoomBar()],<br />
maxExtent:<br />
new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),<br />
numZoomLevels: 18,<br />
maxResolution: 156543,<br />
units: 'meters'<br />
});<br />
<br />
// Add Layers to map-------------------------------------------------------------------------------------------------------<br />
// Mapnik<br />
layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");<br />
// Seamark<br />
layer_seamark = new OpenLayers.Layer.TMS("Seezeichen", "http://t1.openseamap.org/seamark/", { numZoomLevels: 18, type: 'png', getURL: getTileURL, isBaseLayer: false, displayOutsideMaxExtent: true});<br />
// Harbours<br />
layer_harbours = new OpenLayers.Layer.Markers("Häfen", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayOutsideMaxExtent:true});<br />
layer_harbours.setOpacity(0.8);<br />
<br />
map.addLayers([layer_mapnik, layer_seamark, layer_harbours]);<br />
jumpTo(lon, lat, zoom);<br />
<br />
// Update harbour layer<br />
refresh_oseamh();<br />
}<br />
<br />
// Map event listener moved<br />
function mapEventMove(event) {<br />
// Update harbour layer<br />
refresh_oseamh();<br />
}<br />
</script><br />
<br />
</head><br />
<br />
<!-- body.onload is called once the page is loaded (call the 'init' function) --><br />
<body onload="drawmap();"><br />
<br />
<!-- define a DIV into which the map will appear. Make it take up the whole window --><br />
<div style="width:100%; height:100%" id="map"></div><br />
<br />
</body><br />
<br />
</html><br />
</pre><br />
<br />
== Tile-Server ==<br />
The OpenSeaMap tile server is accessible at this URL: <br />
<pre><br />
http://tiles.openseamap.org/seamark/ <br />
</pre><br />
<br />
; Seamark-Layer <br />
The seamark-layer is added with the following lines:<br />
<pre><br />
var layer_seamark = new OpenLayers.Layer.TMS ( "seamark", "http://t1.openseamap.org/seamark/", <br />
{ numZoomLevels: 18, type: 'png', getURL:getTileURL, isBaseLayer:false, displayOutsideMaxExtent:true });<br />
map.addLayer(layer_seamark);<br />
</pre><br />
<br />
== WordPress ==<br />
In WordPress Blog there is a plugin to intetrage slippy OpenSeaMaps:<br />
: [http://wordpress.org/extend/plugins/osm/ WP OSM Plugin Downlaod @ WordPress.org] <br />
: [http://wp-osm-plugin.hanblog.net/ WP OSM Plugin Page]<br />
: [http://wp-osm-plugin.hanblog.net/display-openseamap/ Sample how to integrate OpenSeaMap in WordPress]<br />
<br />
== Drupal ==<br />
In the Drupal-Center-Forum you can find some solutions with [http://drupal.org/project/mappingkit MappingKit]:<br />
: [http://aardbodem.nl/?q=node/82 TMS layer example] <br />
: [http://aardbodem.nl/?q=node/51 Map layers and taxonomy]<br />
<br />
== Typo3 ==<br />
<br />
In TYPO3 Extension Repository you will find 2 extensions:<br />
* rb_osmsimple (own records for markers)<br />
* ods_osm (Coordinates in fe_users and tt_address records)<br />
<br />
[[Kategorie:Develop]]</div>Photowebloghttps://wiki.openseamap.org/index.php?title=h:De:OpenSeaMap_in_Website&diff=2404h:De:OpenSeaMap in Website2013-11-23T10:53:55Z<p>Photoweblog: /* Links zum WP OSM Plugin */</p>
<hr />
<div>{|border="0" cellpadding="6" cellspacing="0" width="100%"<br />
!style="background:#E3E3E3;" | [[de:OpenSeaMap_in_Website|Deutsch]]<br />
!style="background:#E3E3E3;" | [[OpenSeaMap_in_Website|English]]<br />
!style="background:#E3E3E3; width:100%;" | <br />
|}<br />
<br />
Du kannst OpenSeaMap auf verschiedene Arten in die Website einbinden: <br />
__TOC__<br />
<br />
== Als statische Karte einbinden ==<br />
[[Image:MapFullscreen.png|right|200px]]<br />
<br />
Am einfachsten zeigst Du ein statisches Bild, und verknüpfst es mit der Vollbildkarte von OpenSeaMap:<br />
<br />
# suche in [http://OpenSeaMap.org/map OpenSeaMap] den passenden Kartenausschnitt<br />
# 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<br />
# öffne ein Bildbearbeitungsprogramm Deiner Wahl und füge den Screenschot mit <code><Strg-v></code> ein<br />
# zeichne die gewünschten Informationen hinzu (Text, Linien, Kreise, Flächen)<br />
# speichere das Bild auf Deinem Rechner<br />
# lade das Bild auf Deinen Webserver<br />
# binde das hochgeladene Bild in den Artikel ein:<br />
<br />
<img src="<span style="background-color:yellow;">Pfad/Dateiname_des_Bildes</span>" alt="Alternativtext" width="Breite" height="Höhe"><br />
<br />
; statische Karte mit der Vollbildkarte verlinken <br />
<imagemap><br />
Image:MapFullscreen.png|right|200px|mit Link zur Vollbildkarte<br />
default [http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de]<br />
desc none<br />
</imagemap><br />
<br />
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: <br />
<br />
# suche in [http://OpenSeaMap.org/map OpenSeaMap] den passenden Kartenausschnitt<br />
# kopiere auf der Karte unten rechts den Permalink mit <code><Strg-c></code> <br />
# füge mit <code><Strg-v></code> den kopierten Permalink in den Code ein:<br />
<br />
<a href="<span style="background-color:yellow;">Permalink</span>"><br />
<img src="Pfad/Dateiname_des_Bildes" alt="Alternativtext" width="Breite" height="Höhe"><br />
</a><br />
<br />
Beispiel:<br />
<a href="<span style="background-color:yellow;"><nowiki>http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de</nowiki></span>"><br />
<img src="../MapFullscreen.png" alt="Teepott von Warnemünde auf der Karte anzeigen" width="200" height="133"><br />
</a><br />
<br />
<br style="clear:both;" clear="all" /><br />
<br />
[[Datei:Marker_in_URL.jpg|thumb|Marker mit Sprechblase]]<br />
; Vollbildkarte mit Marker und Sprechblase<br />
[[De:Marker_in_URL|HoTo zur Anzeige eines Markers plus Text in einer Sprechblase]]<br />
<div style="clear:both;"></div><br />
<br />
== Als Slippy-Map einbinden ==<br />
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.<br />
<br />
<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" <br />
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" <br />
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=BFTTFFTFFTF0FF">Gr&#246;&#223;ere Karte anzeigen</a><br />
<br />
Die gelb markierten Werte der Variablen haben folgende Bedeutung:<br />
{|class="wikitable"<br />
| width || Breite der Karte (Pixel)<br />
|-<br />
| height || Höhe der Karte (Pixel)<br />
|-<br />
| bbox || "Bounding-Box" (die 4 Ecken des Kartenausschnittes)<br />
|-<br />
| lat || geogr. Breite des Kartenmittelpunktes<br />
|-<br />
| lat || geogr. Länge des Kartenmittelpunktes<br />
|-<br />
| zoom || Zoomlevel der Karte (4...18)<br />
|}<br />
<br />
HTML-Code zum Einbinden der Karte: <!--[[de:OpenSeaMap in Website/HTML|Hier ein fertiger HTML-Code zum Einbinden der Karte mit "copy&paste"]].--><br />
<br />
<pre><br />
<br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/><br />
<title>OpenSeaMap</title><br />
<br />
<br />
<style type="text/css"><br />
.olImageLoadError {<br />
display: none !important;<br />
}<br />
</style><br />
<br />
<!-- bring in the OpenLayers javascript library<br />
(here we bring it from the remote site, but you could<br />
easily serve up this javascript yourself) --><br />
<script src="http://www.openlayers.org/api/OpenLayers.js"></script><br />
<br />
<!-- bring in the OpenStreetMap OpenLayers layers.<br />
Using this hosted file will make sure we are kept up<br />
to date with any necessary changes --><br />
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/harbours.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/map_utils.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/utilities.js"></script><br />
<script type="text/javascript"><br />
<br />
var map;<br />
var layer_mapnik;<br />
var layer_tah;<br />
var layer_seamark;<br />
var marker;<br />
<br />
// Position and zoomlevel of the map<br />
var lon = 12.0915;<br />
var lat = 54.1878;<br />
var zoom = 15;<br />
<br />
var linkTextSkipperGuide = "Beschreibung auf SkipperGuide";<br />
var linkTextWeatherHarbour = "Meteogramm";<br />
var language = 'de';<br />
<br />
<br />
function jumpTo(lon, lat, zoom) {<br />
var x = Lon2Merc(lon);<br />
var y = Lat2Merc(lat);<br />
map.setCenter(new OpenLayers.LonLat(x, y), zoom);<br />
return false;<br />
}<br />
<br />
function Lon2Merc(lon) {<br />
return 20037508.34 * lon / 180;<br />
}<br />
<br />
function Lat2Merc(lat) {<br />
var PI = 3.14159265358979323846;<br />
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);<br />
return 20037508.34 * lat / 180;<br />
}<br />
<br />
function addMarker(layer, lon, lat, popupContentHTML) {<br />
var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));<br />
var feature = new OpenLayers.Feature(layer, ll);<br />
feature.closeBox = true;<br />
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(260, 100) } );<br />
feature.data.popupContentHTML = popupContentHTML;<br />
feature.data.overflow = "hidden";<br />
<br />
marker = new OpenLayers.Marker(ll);<br />
marker.feature = feature;<br />
<br />
var markerClick = function(evt) {<br />
if (this.popup == null) {<br />
this.popup = this.createPopup(this.closeBox);<br />
map.addPopup(this.popup);<br />
this.popup.show();<br />
} else {<br />
this.popup.toggle();<br />
}<br />
OpenLayers.Event.stop(evt);<br />
};<br />
marker.events.register("mousedown", feature, markerClick);<br />
<br />
layer.addMarker(marker);<br />
map.addPopup(feature.createPopup(feature.closeBox));<br />
}<br />
<br />
function getTileURL(bounds) {<br />
var res = this.map.getResolution();<br />
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));<br />
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));<br />
var z = this.map.getZoom();<br />
var limit = Math.pow(2, z);<br />
if (y < 0 || y >= limit) {<br />
return null;<br />
} else {<br />
x = ((x % limit) + limit) % limit;<br />
url = this.url;<br />
path= z + "/" + x + "/" + y + "." + this.type;<br />
if (url instanceof Array) {<br />
url = this.selectUrl(path, url);<br />
}<br />
return url+path;<br />
}<br />
}<br />
<br />
function drawmap() {<br />
<br />
<br />
map = new OpenLayers.Map('map', {<br />
projection: new OpenLayers.Projection("EPSG:900913"),<br />
displayProjection: new OpenLayers.Projection("EPSG:4326"),<br />
eventListeners: {<br />
"moveend": mapEventMove,<br />
//"zoomend": mapEventZoom<br />
},<br />
controls: [<br />
new OpenLayers.Control.Navigation(),<br />
new OpenLayers.Control.ScaleLine({topOutUnits : "nmi", bottomOutUnits: "km", topInUnits: 'nmi', bottomInUnits: 'km', maxWidth: '40'}),<br />
new OpenLayers.Control.LayerSwitcher(),<br />
new OpenLayers.Control.MousePosition(),<br />
new OpenLayers.Control.PanZoomBar()],<br />
maxExtent:<br />
new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),<br />
numZoomLevels: 18,<br />
maxResolution: 156543,<br />
units: 'meters'<br />
});<br />
<br />
// Add Layers to map-------------------------------------------------------------------------------------------------------<br />
// Mapnik<br />
layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");<br />
// Seamark<br />
layer_seamark = new OpenLayers.Layer.TMS("Seezeichen", "http://tiles.openseamap.org/seamark/", { numZoomLevels: 18, type: 'png', getURL: getTileURL, isBaseLayer: false, displayOutsideMaxExtent: true});<br />
// Harbours<br />
layer_pois = new OpenLayers.Layer.Vector("Häfen", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayOutsideMaxExtent:true});<br />
layer_pois.setOpacity(0.8);<br />
<br />
map.addLayers([layer_mapnik, layer_seamark, layer_pois]);<br />
jumpTo(lon, lat, zoom);<br />
<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
<br />
// Map event listener moved<br />
function mapEventMove(event) {<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
</script><br />
<br />
</head><br />
<br />
<!-- body.onload is called once the page is loaded (call the 'init' function) --><br />
<body onload="drawmap();"><br />
<br />
<!-- define a DIV into which the map will appear. Make it take up the whole window --><br />
<div style="width:100%; height:100%" id="map"></div><br />
<br />
</body><br />
<br />
</html><br />
</pre><br />
<br />
== Tile-Server ==<br />
Der OpenSeaMap Tile-Server ist unter dieser URL zu erreichen: <br />
<pre><br />
http://tiles.openseamap.org/seamark/ <br />
</pre><br />
<br />
; Seezeichen-Layer <br />
Der Seezeichen-Layer wird mit folgenden Zeilen hinzugefügt:<br />
<pre><br />
var layer_seamark = new OpenLayers.Layer.TMS ( "seamark", "http://tiles.openseamap.org/seamark/", <br />
{ numZoomLevels: 18, type: 'png', getURL:getTileURL, isBaseLayer:false, displayOutsideMaxExtent:true });<br />
map.addLayer(layer_seamark);<br />
</pre><br />
<br />
== OpenLayers 3 ==<br />
A very minimalistic version for OpenLayers 3.<br />
<pre><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<link rel="stylesheet" href="build/ol.css" type="text/css"><br />
<style><br />
.map {<br />
height: 500px;<br />
width: 100%;<br />
}<br />
</style><br />
<script src="build/ol.js" type="text/javascript"></script><br />
<title>OpenSeaMap Example</title><br />
</head><br />
<body><br />
<div id="map" class="map"></div><br />
<script type="text/javascript"><br />
var map = new ol.Map({<br />
target: 'map',<br />
layers: [<br />
new ol.layer.Tile({<br />
source: new ol.source.OSM()<br />
}),<br />
new ol.layer.Tile({<br />
source: new ol.source.XYZ({<br />
url: 'http://t1.openseamap.org/seamark/{z}/{x}/{y}.png'<br />
})<br />
})<br />
],<br />
view: new ol.View2D({<br />
center: ol.proj.transform([12.1, 54.18], 'EPSG:4326', 'EPSG:3857'),<br />
zoom: 13<br />
})<br />
});<br />
</script><br />
</body><br />
</html><br />
</pre><br />
<br />
== Drupal ==<br />
Im Drupal-Center-Forum gibt es folgende Lösungsideen mit [http://drupal.org/project/mappingkit MappingKit]:<br />
: [http://aardbodem.nl/?q=node/82 TMS layer example] <br />
: [http://aardbodem.nl/?q=node/51 Map layers and taxonomy]<br />
<br />
== Typo3 ==<br />
<br />
Im TYPO3 Extension Repository stehen 2 Extensions zur Verfügung:<br />
* rb_osmsimple (eigene Datensätze für Marker)<br />
* ods_osm (Koordinaten in fe_users und tt_address Datensätzen)<br />
<br />
[[Kategorie:Develop]]<br />
<br />
== WordPress ==<br />
Unter WordPress hat man die Möglichkeit das [http://wp-osm-plugin.HanBlog.net WP plugin OSM] gemeinsam mit persönlichen Daten (POIs, GPX Routen, ...) zu nutzen, oder per IFRAM eine Karte einzubinden.<br />
=== mit dem WP OSM Plugin ===<br />
Das Erstellen einer Karte kann direkt im WordPress Backend gemacht werden:<br />
<br />
==== Mit vier Schritten zur Karte im Blog ====<br />
# WordPress OSM plugin installieren<br />
# Kartenausschnit und Design unter "Einstellungen"=> "OSM" wählen<br />
# Automatisch generierten Shortcode per Strg + C in die Zwischenablage kopieren<br />
# Im Post oder Artikel den Shortcode per Strg + V einfügen<br />
<br />
==== Features des OSM plugin====<br />
* Einbinden von GPX und KML Dateien<br />
* Anzeigen von Markern per Markerfile<br />
* Anzeigen von verorteten Blogartikeln<br />
* Verändern von Kartengröße und Aussehen (Theme)<br />
* Einfügen von Popup Markern<br />
<br />
==== Links zum WP OSM Plugin ====<br />
Plugin Seite: http://wp-osm-plugin.HanBlog.net <br />
<br />
Download Siete: http://http://wordpress.org/extend/plugins/osm/ <br />
<br />
Blog d. Entwicklers: http://www.HanBlog.net<br />
<br />
Beispiel einer OpenSeaMap Karte mit integriertem Foto und GPX Tag: [http://www.hanblog.net/?p=4380 OpenSeaMap Karte mit dem OSM plugin in WordPress einbinden]<br />
<br />
=== mit Permalink in IFRAME ===<br />
; mit IFRAME<br />
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). <br />
<br />
Einfacher geht's mit dem Plugin [http://urbangiraffe.com/plugins/pageview/ "PageView"] ([http://wordpress.org/extend/plugins/pageview/installation/ Download]). Damit kann man jeden x-beliebigen Kartenausschnitt von OpernSeaMap in WordPress darstellen.<br />
<br />
; Plugin installieren<br />
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”.<br />
<br />
[pageview url=“<span style="background-color:yellow;"><nowiki>Permalink</nowiki></span>“]<br />
<br />
Innerhalb der eckigen Klammern müssen alle Wörter kleingeschrieben werden, und die eigentliche Webadresse muss in Anführungszeichen stehen:<br />
<br />
# wähle auf [http://map.openseamap.org/map/?zoom=14&lat=54.18385&lon=12.08612&layers=BFTTFFTFFTF0FF OpenSeaMap] einen passenden Kartenausschnitt. <br />
# wähle im Menü "Ansicht" die gewünschten Layer aus. Kopiere den "Permalink" unten rechts im Kartenfenster. <br />
# fügen den Permalink in den Shortcode ein.<br />
Damit werden alle Merkmale des Kartenausschnittes übernommen: <br>Position, Zoomlevel, Layer, Zoom-Funktion, Menü, Kartenübersicht unten rechts, Copyright Hinweis unten links.<br />
<br />
; Ansicht erweitern<br />
Folgende Parameter können dem Shortcode mitgegeben werden:<br />
<br />
{| class="wikitable"<br />
| title || Für einen kurzen Titel des IFRAME oder der Karte<br />
|-<br />
| desc || Abkürzung für Description, also einer kurzen Beschreibung<br />
|-<br />
| width || darstellbare Breite des IFRAME. <br>Pixel bei bekannter Breite der zur Verfügung stehenden Fläche. <br>100% bei unbekannter Breite, dann passt sich die Karte automatisch über die volle Breite an.<br />
|-<br />
| height || Höhe des IFRAME in Pixel (keine Prozenangaben).<br />
|-<br />
| border || dünner Rahmen für das IFRAME. Kann mit CSS angepasst werden.<br />
|-<br />
| scrolling || nicht benutzen (horizontale und vertikale Scrollbalken)<br />
|}<br />
<br />
; Beispiel<br />
<br />
[pageview url="<span style="background-color:yellow;"><nowiki>http://map.openseamap.org/map/?</nowiki></span><br />
<span style="background-color:yellow;">zoom=14&amp;lat=54.17958&amp;lon=12.09869&amp;layers=BFTFFFTFFFF0FFF</span>"<br />
height="<span style="background-color:yellow;">400</span>" width="<span style="background-color:yellow;">95%</span>"border="<span style="background-color:yellow;">yes</span>" title="<span style="background-color:yellow;">Hafeneinfahrt Rostock</span>"<br />
desc="<span style="background-color:yellow;">Beispielbeschreibung</span>"]<br />
<br />
<br />
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).<br />
<br />
Die Kartenansicht kann man mit CSS noch individuell anpassen. <br />
<br />
Quelle: [http://www.projektq7-webworker.de/opernseamap-karten-ganz-einfach-in-wordpress-einbinden/ Blog von Ralph, mit Kartenbeispielen]<br />
<br />
== Joomla ==<br />
?</div>Photowebloghttps://wiki.openseamap.org/index.php?title=h:De:OpenSeaMap_in_Website&diff=2403h:De:OpenSeaMap in Website2013-11-23T10:53:41Z<p>Photoweblog: /* WordPress */</p>
<hr />
<div>{|border="0" cellpadding="6" cellspacing="0" width="100%"<br />
!style="background:#E3E3E3;" | [[de:OpenSeaMap_in_Website|Deutsch]]<br />
!style="background:#E3E3E3;" | [[OpenSeaMap_in_Website|English]]<br />
!style="background:#E3E3E3; width:100%;" | <br />
|}<br />
<br />
Du kannst OpenSeaMap auf verschiedene Arten in die Website einbinden: <br />
__TOC__<br />
<br />
== Als statische Karte einbinden ==<br />
[[Image:MapFullscreen.png|right|200px]]<br />
<br />
Am einfachsten zeigst Du ein statisches Bild, und verknüpfst es mit der Vollbildkarte von OpenSeaMap:<br />
<br />
# suche in [http://OpenSeaMap.org/map OpenSeaMap] den passenden Kartenausschnitt<br />
# 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<br />
# öffne ein Bildbearbeitungsprogramm Deiner Wahl und füge den Screenschot mit <code><Strg-v></code> ein<br />
# zeichne die gewünschten Informationen hinzu (Text, Linien, Kreise, Flächen)<br />
# speichere das Bild auf Deinem Rechner<br />
# lade das Bild auf Deinen Webserver<br />
# binde das hochgeladene Bild in den Artikel ein:<br />
<br />
<img src="<span style="background-color:yellow;">Pfad/Dateiname_des_Bildes</span>" alt="Alternativtext" width="Breite" height="Höhe"><br />
<br />
; statische Karte mit der Vollbildkarte verlinken <br />
<imagemap><br />
Image:MapFullscreen.png|right|200px|mit Link zur Vollbildkarte<br />
default [http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de]<br />
desc none<br />
</imagemap><br />
<br />
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: <br />
<br />
# suche in [http://OpenSeaMap.org/map OpenSeaMap] den passenden Kartenausschnitt<br />
# kopiere auf der Karte unten rechts den Permalink mit <code><Strg-c></code> <br />
# füge mit <code><Strg-v></code> den kopierten Permalink in den Code ein:<br />
<br />
<a href="<span style="background-color:yellow;">Permalink</span>"><br />
<img src="Pfad/Dateiname_des_Bildes" alt="Alternativtext" width="Breite" height="Höhe"><br />
</a><br />
<br />
Beispiel:<br />
<a href="<span style="background-color:yellow;"><nowiki>http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de</nowiki></span>"><br />
<img src="../MapFullscreen.png" alt="Teepott von Warnemünde auf der Karte anzeigen" width="200" height="133"><br />
</a><br />
<br />
<br style="clear:both;" clear="all" /><br />
<br />
[[Datei:Marker_in_URL.jpg|thumb|Marker mit Sprechblase]]<br />
; Vollbildkarte mit Marker und Sprechblase<br />
[[De:Marker_in_URL|HoTo zur Anzeige eines Markers plus Text in einer Sprechblase]]<br />
<div style="clear:both;"></div><br />
<br />
== Als Slippy-Map einbinden ==<br />
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.<br />
<br />
<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" <br />
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" <br />
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=BFTTFFTFFTF0FF">Gr&#246;&#223;ere Karte anzeigen</a><br />
<br />
Die gelb markierten Werte der Variablen haben folgende Bedeutung:<br />
{|class="wikitable"<br />
| width || Breite der Karte (Pixel)<br />
|-<br />
| height || Höhe der Karte (Pixel)<br />
|-<br />
| bbox || "Bounding-Box" (die 4 Ecken des Kartenausschnittes)<br />
|-<br />
| lat || geogr. Breite des Kartenmittelpunktes<br />
|-<br />
| lat || geogr. Länge des Kartenmittelpunktes<br />
|-<br />
| zoom || Zoomlevel der Karte (4...18)<br />
|}<br />
<br />
HTML-Code zum Einbinden der Karte: <!--[[de:OpenSeaMap in Website/HTML|Hier ein fertiger HTML-Code zum Einbinden der Karte mit "copy&paste"]].--><br />
<br />
<pre><br />
<br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/><br />
<title>OpenSeaMap</title><br />
<br />
<br />
<style type="text/css"><br />
.olImageLoadError {<br />
display: none !important;<br />
}<br />
</style><br />
<br />
<!-- bring in the OpenLayers javascript library<br />
(here we bring it from the remote site, but you could<br />
easily serve up this javascript yourself) --><br />
<script src="http://www.openlayers.org/api/OpenLayers.js"></script><br />
<br />
<!-- bring in the OpenStreetMap OpenLayers layers.<br />
Using this hosted file will make sure we are kept up<br />
to date with any necessary changes --><br />
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/harbours.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/map_utils.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/utilities.js"></script><br />
<script type="text/javascript"><br />
<br />
var map;<br />
var layer_mapnik;<br />
var layer_tah;<br />
var layer_seamark;<br />
var marker;<br />
<br />
// Position and zoomlevel of the map<br />
var lon = 12.0915;<br />
var lat = 54.1878;<br />
var zoom = 15;<br />
<br />
var linkTextSkipperGuide = "Beschreibung auf SkipperGuide";<br />
var linkTextWeatherHarbour = "Meteogramm";<br />
var language = 'de';<br />
<br />
<br />
function jumpTo(lon, lat, zoom) {<br />
var x = Lon2Merc(lon);<br />
var y = Lat2Merc(lat);<br />
map.setCenter(new OpenLayers.LonLat(x, y), zoom);<br />
return false;<br />
}<br />
<br />
function Lon2Merc(lon) {<br />
return 20037508.34 * lon / 180;<br />
}<br />
<br />
function Lat2Merc(lat) {<br />
var PI = 3.14159265358979323846;<br />
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);<br />
return 20037508.34 * lat / 180;<br />
}<br />
<br />
function addMarker(layer, lon, lat, popupContentHTML) {<br />
var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));<br />
var feature = new OpenLayers.Feature(layer, ll);<br />
feature.closeBox = true;<br />
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(260, 100) } );<br />
feature.data.popupContentHTML = popupContentHTML;<br />
feature.data.overflow = "hidden";<br />
<br />
marker = new OpenLayers.Marker(ll);<br />
marker.feature = feature;<br />
<br />
var markerClick = function(evt) {<br />
if (this.popup == null) {<br />
this.popup = this.createPopup(this.closeBox);<br />
map.addPopup(this.popup);<br />
this.popup.show();<br />
} else {<br />
this.popup.toggle();<br />
}<br />
OpenLayers.Event.stop(evt);<br />
};<br />
marker.events.register("mousedown", feature, markerClick);<br />
<br />
layer.addMarker(marker);<br />
map.addPopup(feature.createPopup(feature.closeBox));<br />
}<br />
<br />
function getTileURL(bounds) {<br />
var res = this.map.getResolution();<br />
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));<br />
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));<br />
var z = this.map.getZoom();<br />
var limit = Math.pow(2, z);<br />
if (y < 0 || y >= limit) {<br />
return null;<br />
} else {<br />
x = ((x % limit) + limit) % limit;<br />
url = this.url;<br />
path= z + "/" + x + "/" + y + "." + this.type;<br />
if (url instanceof Array) {<br />
url = this.selectUrl(path, url);<br />
}<br />
return url+path;<br />
}<br />
}<br />
<br />
function drawmap() {<br />
<br />
<br />
map = new OpenLayers.Map('map', {<br />
projection: new OpenLayers.Projection("EPSG:900913"),<br />
displayProjection: new OpenLayers.Projection("EPSG:4326"),<br />
eventListeners: {<br />
"moveend": mapEventMove,<br />
//"zoomend": mapEventZoom<br />
},<br />
controls: [<br />
new OpenLayers.Control.Navigation(),<br />
new OpenLayers.Control.ScaleLine({topOutUnits : "nmi", bottomOutUnits: "km", topInUnits: 'nmi', bottomInUnits: 'km', maxWidth: '40'}),<br />
new OpenLayers.Control.LayerSwitcher(),<br />
new OpenLayers.Control.MousePosition(),<br />
new OpenLayers.Control.PanZoomBar()],<br />
maxExtent:<br />
new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),<br />
numZoomLevels: 18,<br />
maxResolution: 156543,<br />
units: 'meters'<br />
});<br />
<br />
// Add Layers to map-------------------------------------------------------------------------------------------------------<br />
// Mapnik<br />
layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");<br />
// Seamark<br />
layer_seamark = new OpenLayers.Layer.TMS("Seezeichen", "http://tiles.openseamap.org/seamark/", { numZoomLevels: 18, type: 'png', getURL: getTileURL, isBaseLayer: false, displayOutsideMaxExtent: true});<br />
// Harbours<br />
layer_pois = new OpenLayers.Layer.Vector("Häfen", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayOutsideMaxExtent:true});<br />
layer_pois.setOpacity(0.8);<br />
<br />
map.addLayers([layer_mapnik, layer_seamark, layer_pois]);<br />
jumpTo(lon, lat, zoom);<br />
<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
<br />
// Map event listener moved<br />
function mapEventMove(event) {<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
</script><br />
<br />
</head><br />
<br />
<!-- body.onload is called once the page is loaded (call the 'init' function) --><br />
<body onload="drawmap();"><br />
<br />
<!-- define a DIV into which the map will appear. Make it take up the whole window --><br />
<div style="width:100%; height:100%" id="map"></div><br />
<br />
</body><br />
<br />
</html><br />
</pre><br />
<br />
== Tile-Server ==<br />
Der OpenSeaMap Tile-Server ist unter dieser URL zu erreichen: <br />
<pre><br />
http://tiles.openseamap.org/seamark/ <br />
</pre><br />
<br />
; Seezeichen-Layer <br />
Der Seezeichen-Layer wird mit folgenden Zeilen hinzugefügt:<br />
<pre><br />
var layer_seamark = new OpenLayers.Layer.TMS ( "seamark", "http://tiles.openseamap.org/seamark/", <br />
{ numZoomLevels: 18, type: 'png', getURL:getTileURL, isBaseLayer:false, displayOutsideMaxExtent:true });<br />
map.addLayer(layer_seamark);<br />
</pre><br />
<br />
== OpenLayers 3 ==<br />
A very minimalistic version for OpenLayers 3.<br />
<pre><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<link rel="stylesheet" href="build/ol.css" type="text/css"><br />
<style><br />
.map {<br />
height: 500px;<br />
width: 100%;<br />
}<br />
</style><br />
<script src="build/ol.js" type="text/javascript"></script><br />
<title>OpenSeaMap Example</title><br />
</head><br />
<body><br />
<div id="map" class="map"></div><br />
<script type="text/javascript"><br />
var map = new ol.Map({<br />
target: 'map',<br />
layers: [<br />
new ol.layer.Tile({<br />
source: new ol.source.OSM()<br />
}),<br />
new ol.layer.Tile({<br />
source: new ol.source.XYZ({<br />
url: 'http://t1.openseamap.org/seamark/{z}/{x}/{y}.png'<br />
})<br />
})<br />
],<br />
view: new ol.View2D({<br />
center: ol.proj.transform([12.1, 54.18], 'EPSG:4326', 'EPSG:3857'),<br />
zoom: 13<br />
})<br />
});<br />
</script><br />
</body><br />
</html><br />
</pre><br />
<br />
== Drupal ==<br />
Im Drupal-Center-Forum gibt es folgende Lösungsideen mit [http://drupal.org/project/mappingkit MappingKit]:<br />
: [http://aardbodem.nl/?q=node/82 TMS layer example] <br />
: [http://aardbodem.nl/?q=node/51 Map layers and taxonomy]<br />
<br />
== Typo3 ==<br />
<br />
Im TYPO3 Extension Repository stehen 2 Extensions zur Verfügung:<br />
* rb_osmsimple (eigene Datensätze für Marker)<br />
* ods_osm (Koordinaten in fe_users und tt_address Datensätzen)<br />
<br />
[[Kategorie:Develop]]<br />
<br />
== WordPress ==<br />
Unter WordPress hat man die Möglichkeit das [http://wp-osm-plugin.HanBlog.net WP plugin OSM] gemeinsam mit persönlichen Daten (POIs, GPX Routen, ...) zu nutzen, oder per IFRAM eine Karte einzubinden.<br />
=== mit dem WP OSM Plugin ===<br />
Das Erstellen einer Karte kann direkt im WordPress Backend gemacht werden:<br />
<br />
==== Mit vier Schritten zur Karte im Blog ====<br />
# WordPress OSM plugin installieren<br />
# Kartenausschnit und Design unter "Einstellungen"=> "OSM" wählen<br />
# Automatisch generierten Shortcode per Strg + C in die Zwischenablage kopieren<br />
# Im Post oder Artikel den Shortcode per Strg + V einfügen<br />
<br />
==== Features des OSM plugin====<br />
* Einbinden von GPX und KML Dateien<br />
* Anzeigen von Markern per Markerfile<br />
* Anzeigen von verorteten Blogartikeln<br />
* Verändern von Kartengröße und Aussehen (Theme)<br />
* Einfügen von Popup Markern<br />
<br />
==== Links zum WP OSM Plugin ====<br />
Plugin Seite: hhttp://wp-osm-plugin.HanBlog.net <br />
<br />
Download Siete: http://http://wordpress.org/extend/plugins/osm/ <br />
<br />
Blog d. Entwicklers: http://www.HanBlog.net<br />
<br />
Beispiel einer OpenSeaMap Karte mit integriertem Foto und GPX Tag: [http://www.hanblog.net/?p=4380 OpenSeaMap Karte mit dem OSM plugin in WordPress einbinden]<br />
<br />
<br />
=== mit Permalink in IFRAME ===<br />
; mit IFRAME<br />
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). <br />
<br />
Einfacher geht's mit dem Plugin [http://urbangiraffe.com/plugins/pageview/ "PageView"] ([http://wordpress.org/extend/plugins/pageview/installation/ Download]). Damit kann man jeden x-beliebigen Kartenausschnitt von OpernSeaMap in WordPress darstellen.<br />
<br />
; Plugin installieren<br />
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”.<br />
<br />
[pageview url=“<span style="background-color:yellow;"><nowiki>Permalink</nowiki></span>“]<br />
<br />
Innerhalb der eckigen Klammern müssen alle Wörter kleingeschrieben werden, und die eigentliche Webadresse muss in Anführungszeichen stehen:<br />
<br />
# wähle auf [http://map.openseamap.org/map/?zoom=14&lat=54.18385&lon=12.08612&layers=BFTTFFTFFTF0FF OpenSeaMap] einen passenden Kartenausschnitt. <br />
# wähle im Menü "Ansicht" die gewünschten Layer aus. Kopiere den "Permalink" unten rechts im Kartenfenster. <br />
# fügen den Permalink in den Shortcode ein.<br />
Damit werden alle Merkmale des Kartenausschnittes übernommen: <br>Position, Zoomlevel, Layer, Zoom-Funktion, Menü, Kartenübersicht unten rechts, Copyright Hinweis unten links.<br />
<br />
; Ansicht erweitern<br />
Folgende Parameter können dem Shortcode mitgegeben werden:<br />
<br />
{| class="wikitable"<br />
| title || Für einen kurzen Titel des IFRAME oder der Karte<br />
|-<br />
| desc || Abkürzung für Description, also einer kurzen Beschreibung<br />
|-<br />
| width || darstellbare Breite des IFRAME. <br>Pixel bei bekannter Breite der zur Verfügung stehenden Fläche. <br>100% bei unbekannter Breite, dann passt sich die Karte automatisch über die volle Breite an.<br />
|-<br />
| height || Höhe des IFRAME in Pixel (keine Prozenangaben).<br />
|-<br />
| border || dünner Rahmen für das IFRAME. Kann mit CSS angepasst werden.<br />
|-<br />
| scrolling || nicht benutzen (horizontale und vertikale Scrollbalken)<br />
|}<br />
<br />
; Beispiel<br />
<br />
[pageview url="<span style="background-color:yellow;"><nowiki>http://map.openseamap.org/map/?</nowiki></span><br />
<span style="background-color:yellow;">zoom=14&amp;lat=54.17958&amp;lon=12.09869&amp;layers=BFTFFFTFFFF0FFF</span>"<br />
height="<span style="background-color:yellow;">400</span>" width="<span style="background-color:yellow;">95%</span>"border="<span style="background-color:yellow;">yes</span>" title="<span style="background-color:yellow;">Hafeneinfahrt Rostock</span>"<br />
desc="<span style="background-color:yellow;">Beispielbeschreibung</span>"]<br />
<br />
<br />
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).<br />
<br />
Die Kartenansicht kann man mit CSS noch individuell anpassen. <br />
<br />
Quelle: [http://www.projektq7-webworker.de/opernseamap-karten-ganz-einfach-in-wordpress-einbinden/ Blog von Ralph, mit Kartenbeispielen]<br />
<br />
== Joomla ==<br />
?</div>Photowebloghttps://wiki.openseamap.org/index.php?title=h:De:OpenSeaMap_in_Website&diff=1707h:De:OpenSeaMap in Website2013-02-10T13:38:58Z<p>Photoweblog: WordPress OSM Plugin added</p>
<hr />
<div>{|border="0" cellpadding="6" cellspacing="0" width="100%"<br />
!style="background:#E3E3E3;" | [[de:OpenSeaMap_in_Website|Deutsch]]<br />
!style="background:#E3E3E3;" | [[OpenSeaMap_in_Website|English]]<br />
!style="background:#E3E3E3; width:100%;" | <br />
|}<br />
<br />
Du kannst OpenSeaMap auf verschiedene Arten in die Website einbinden: <br />
__TOC__<br />
<br />
== Als statische Karte einbinden ==<br />
[[Image:MapFullscreen.png|right|200px]]<br />
<br />
Am einfachsten zeigst Du ein statisches Bild, und verknüpfst es mit der Vollbildkarte von OpenSeaMap:<br />
<br />
# suche in [http://OpenSeaMap.org/map OpenSeaMap] den passenden Kartenausschnitt<br />
# 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<br />
# öffne ein Bildbearbeitungsprogramm Deiner Wahl und füge den Screenschot mit <code><Strg-v></code> ein<br />
# zeichne die gewünschten Informationen hinzu (Text, Linien, Kreise, Flächen)<br />
# speichere das Bild auf Deinem Rechner<br />
# lade das Bild auf Deinen Webserver<br />
# binde das hochgeladene Bild in den Artikel ein:<br />
<br />
<img src="<span style="background-color:yellow;">Pfad/Dateiname_des_Bildes</span>" alt="Alternativtext" width="Breite" height="Höhe"><br />
<br />
; statische Karte mit der Vollbildkarte verlinken <br />
<imagemap><br />
Image:MapFullscreen.png|right|200px|mit Link zur Vollbildkarte<br />
default [http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de]<br />
desc none<br />
</imagemap><br />
<br />
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: <br />
<br />
# suche in [http://OpenSeaMap.org/map OpenSeaMap] den passenden Kartenausschnitt<br />
# kopiere auf der Karte unten rechts den Permalink mit <code><Strg-c></code> <br />
# füge mit <code><Strg-v></code> den kopierten Permalink in den Code ein:<br />
<br />
<a href="<span style="background-color:yellow;">Permalink</span>"><br />
<img src="Pfad/Dateiname_des_Bildes" alt="Alternativtext" width="Breite" height="Höhe"><br />
</a><br />
<br />
Beispiel:<br />
<a href="<span style="background-color:yellow;"><nowiki>http://www.openseamap.org/map/?zoom=18&lat=54.18171&lon=12.08555&layers=BFTTFFTFFTF0FF&lang=de</nowiki></span>"><br />
<img src="../MapFullscreen.png" alt="Teepott von Warnemünde auf der Karte anzeigen" width="200" height="133"><br />
</a><br />
<br />
<br style="clear:both;" clear="all" /><br />
<br />
[[Datei:Marker_in_URL.jpg|thumb|Marker mit Sprechblase]]<br />
; Vollbildkarte mit Marker und Sprechblase<br />
[[De:Marker_in_URL|HoTo zur Anzeige eines Markers plus Text in einer Sprechblase]]<br />
<div style="clear:both;"></div><br />
<br />
== Als Slippy-Map einbinden ==<br />
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.<br />
<br />
<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" <br />
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" <br />
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=BFTTFFTFFTF0FF">Gr&#246;&#223;ere Karte anzeigen</a><br />
<br />
Die gelb markierten Werte der Variablen haben folgende Bedeutung:<br />
{|class="wikitable"<br />
| width || Breite der Karte (Pixel)<br />
|-<br />
| height || Höhe der Karte (Pixel)<br />
|-<br />
| bbox || "Bounding-Box" (die 4 Ecken des Kartenausschnittes)<br />
|-<br />
| lat || geogr. Breite des Kartenmittelpunktes<br />
|-<br />
| lat || geogr. Länge des Kartenmittelpunktes<br />
|-<br />
| zoom || Zoomlevel der Karte (4...18)<br />
|}<br />
<br />
HTML-Code zum Einbinden der Karte: <!--[[de:OpenSeaMap in Website/HTML|Hier ein fertiger HTML-Code zum Einbinden der Karte mit "copy&paste"]].--><br />
<br />
<pre><br />
<br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/><br />
<title>OpenSeaMap</title><br />
<br />
<br />
<style type="text/css"><br />
.olImageLoadError {<br />
display: none !important;<br />
}<br />
</style><br />
<br />
<!-- bring in the OpenLayers javascript library<br />
(here we bring it from the remote site, but you could<br />
easily serve up this javascript yourself) --><br />
<script src="http://www.openlayers.org/api/OpenLayers.js"></script><br />
<br />
<!-- bring in the OpenStreetMap OpenLayers layers.<br />
Using this hosted file will make sure we are kept up<br />
to date with any necessary changes --><br />
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/harbours.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/map_utils.js"></script><br />
<script type="text/javascript" src="http://map.openseamap.org/map/javascript/utilities.js"></script><br />
<script type="text/javascript"><br />
<br />
var map;<br />
var layer_mapnik;<br />
var layer_tah;<br />
var layer_seamark;<br />
var marker;<br />
<br />
// Position and zoomlevel of the map<br />
var lon = 12.0915;<br />
var lat = 54.1878;<br />
var zoom = 15;<br />
<br />
var linkTextSkipperGuide = "Beschreibung auf SkipperGuide";<br />
var linkTextWeatherHarbour = "Meteogramm";<br />
var language = 'de';<br />
<br />
<br />
function jumpTo(lon, lat, zoom) {<br />
var x = Lon2Merc(lon);<br />
var y = Lat2Merc(lat);<br />
map.setCenter(new OpenLayers.LonLat(x, y), zoom);<br />
return false;<br />
}<br />
<br />
function Lon2Merc(lon) {<br />
return 20037508.34 * lon / 180;<br />
}<br />
<br />
function Lat2Merc(lat) {<br />
var PI = 3.14159265358979323846;<br />
lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);<br />
return 20037508.34 * lat / 180;<br />
}<br />
<br />
function addMarker(layer, lon, lat, popupContentHTML) {<br />
var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));<br />
var feature = new OpenLayers.Feature(layer, ll);<br />
feature.closeBox = true;<br />
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(260, 100) } );<br />
feature.data.popupContentHTML = popupContentHTML;<br />
feature.data.overflow = "hidden";<br />
<br />
marker = new OpenLayers.Marker(ll);<br />
marker.feature = feature;<br />
<br />
var markerClick = function(evt) {<br />
if (this.popup == null) {<br />
this.popup = this.createPopup(this.closeBox);<br />
map.addPopup(this.popup);<br />
this.popup.show();<br />
} else {<br />
this.popup.toggle();<br />
}<br />
OpenLayers.Event.stop(evt);<br />
};<br />
marker.events.register("mousedown", feature, markerClick);<br />
<br />
layer.addMarker(marker);<br />
map.addPopup(feature.createPopup(feature.closeBox));<br />
}<br />
<br />
function getTileURL(bounds) {<br />
var res = this.map.getResolution();<br />
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));<br />
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));<br />
var z = this.map.getZoom();<br />
var limit = Math.pow(2, z);<br />
if (y < 0 || y >= limit) {<br />
return null;<br />
} else {<br />
x = ((x % limit) + limit) % limit;<br />
url = this.url;<br />
path= z + "/" + x + "/" + y + "." + this.type;<br />
if (url instanceof Array) {<br />
url = this.selectUrl(path, url);<br />
}<br />
return url+path;<br />
}<br />
}<br />
<br />
function drawmap() {<br />
<br />
<br />
map = new OpenLayers.Map('map', {<br />
projection: new OpenLayers.Projection("EPSG:900913"),<br />
displayProjection: new OpenLayers.Projection("EPSG:4326"),<br />
eventListeners: {<br />
"moveend": mapEventMove,<br />
//"zoomend": mapEventZoom<br />
},<br />
controls: [<br />
new OpenLayers.Control.Navigation(),<br />
new OpenLayers.Control.ScaleLine({topOutUnits : "nmi", bottomOutUnits: "km", topInUnits: 'nmi', bottomInUnits: 'km', maxWidth: '40'}),<br />
new OpenLayers.Control.LayerSwitcher(),<br />
new OpenLayers.Control.MousePosition(),<br />
new OpenLayers.Control.PanZoomBar()],<br />
maxExtent:<br />
new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),<br />
numZoomLevels: 18,<br />
maxResolution: 156543,<br />
units: 'meters'<br />
});<br />
<br />
// Add Layers to map-------------------------------------------------------------------------------------------------------<br />
// Mapnik<br />
layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");<br />
// Seamark<br />
layer_seamark = new OpenLayers.Layer.TMS("Seezeichen", "http://tiles.openseamap.org/seamark/", { numZoomLevels: 18, type: 'png', getURL: getTileURL, isBaseLayer: false, displayOutsideMaxExtent: true});<br />
// Harbours<br />
layer_pois = new OpenLayers.Layer.Vector("Häfen", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayOutsideMaxExtent:true});<br />
layer_pois.setOpacity(0.8);<br />
<br />
map.addLayers([layer_mapnik, layer_seamark, layer_pois]);<br />
jumpTo(lon, lat, zoom);<br />
<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
<br />
// Map event listener moved<br />
function mapEventMove(event) {<br />
// Update harbour layer<br />
refreshHarbours();<br />
}<br />
</script><br />
<br />
</head><br />
<br />
<!-- body.onload is called once the page is loaded (call the 'init' function) --><br />
<body onload="drawmap();"><br />
<br />
<!-- define a DIV into which the map will appear. Make it take up the whole window --><br />
<div style="width:100%; height:100%" id="map"></div><br />
<br />
</body><br />
<br />
</html><br />
</pre><br />
<br />
== Tile-Server ==<br />
Der OpenSeaMap Tile-Server ist unter dieser URL zu erreichen: <br />
<pre><br />
http://tiles.openseamap.org/seamark/ <br />
</pre><br />
<br />
; Seezeichen-Layer <br />
Der Seezeichen-Layer wird mit folgenden Zeilen hinzugefügt:<br />
<pre><br />
var layer_seamark = new OpenLayers.Layer.TMS ( "seamark", "http://tiles.openseamap.org/seamark/", <br />
{ numZoomLevels: 18, type: 'png', getURL:getTileURL, isBaseLayer:false, displayOutsideMaxExtent:true });<br />
map.addLayer(layer_seamark);<br />
</pre><br />
<br />
== Drupal ==<br />
Im Drupal-Center-Forum gibt es folgende Lösungsideen mit [http://drupal.org/project/mappingkit MappingKit]:<br />
: [http://aardbodem.nl/?q=node/82 TMS layer example] <br />
: [http://aardbodem.nl/?q=node/51 Map layers and taxonomy]<br />
<br />
== Typo3 ==<br />
<br />
Im TYPO3 Extension Repository stehen 2 Extensions zur Verfügung:<br />
* rb_osmsimple (eigene Datensätze für Marker)<br />
* ods_osm (Koordinaten in fe_users und tt_address Datensätzen)<br />
<br />
[[Kategorie:Develop]]<br />
<br />
== WordPress ==<br />
Unter WordPress hat man die Möglichkeit das [http://www.Fotomobil.at/wp-osm-plugin/ WP plugin OSM] gemeinsam mit persönlichen Daten (POIs, GPX Routen, ...) zu nutzen, oder per IFRAM eine Karte einzubinden.<br />
=== mit dem WP OSM Plugin ===<br />
Das Erstellen einer Karte kann direkt im WordPress Backend gemacht werden:<br />
<br />
==== Mit vier Schritten zur Karte im Blog ====<br />
# WordPress OSM plugin installieren<br />
# Kartenausschnit und Design unter "Einstellungen"=> "OSM" wählen<br />
# Automatisch generierten Shortcode per Strg + C in die Zwischenablage kopieren<br />
# Im Post oder Artikel den Shortcode per Strg + V einfügen<br />
<br />
==== Features des OSM plugin====<br />
* Einbinden von GPX und KML Dateien<br />
* Anzeigen von Markern per Markerfile<br />
* Anzeigen von verorteten Blogartikeln<br />
* Verändern von Kartengröße und Aussehen (Theme)<br />
* Einfügen von Popup Markern<br />
<br />
==== Links zum WP OSM Plugin ====<br />
Plugin Seite: http://www.Fotomobil.at/wp-osm-plugin <br />
<br />
Download Siete: http://http://wordpress.org/extend/plugins/osm/ <br />
<br />
Blog d. Entwicklers: http://www.HanBlog.net<br />
<br />
Beispiel einer OpenSeaMap Karte mit integriertem Foto und GPX Tag: [http://www.hanblog.net/?p=4380 OpenSeaMap Karte mit dem OSM plugin in WordPress einbinden]<br />
<br />
<br />
=== mit Permalink in IFRAME ===<br />
; mit IFRAME<br />
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). <br />
<br />
Einfacher geht's mit dem Plugin [http://urbangiraffe.com/plugins/pageview/ "PageView"] ([http://wordpress.org/extend/plugins/pageview/installation/ Download]). Damit kann man jeden x-beliebigen Kartenausschnitt von OpernSeaMap in WordPress darstellen.<br />
<br />
; Plugin installieren<br />
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”.<br />
<br />
[pageview url=“<span style="background-color:yellow;"><nowiki>Permalink</nowiki></span>“]<br />
<br />
Innerhalb der eckigen Klammern müssen alle Wörter kleingeschrieben werden, und die eigentliche Webadresse muss in Anführungszeichen stehen:<br />
<br />
# wähle auf [http://map.openseamap.org/map/?zoom=14&lat=54.18385&lon=12.08612&layers=BFTTFFTFFTF0FF OpenSeaMap] einen passenden Kartenausschnitt. <br />
# wähle im Menü "Ansicht" die gewünschten Layer aus. Kopiere den "Permalink" unten rechts im Kartenfenster. <br />
# fügen den Permalink in den Shortcode ein.<br />
Damit werden alle Merkmale des Kartenausschnittes übernommen: <br>Position, Zoomlevel, Layer, Zoom-Funktion, Menü, Kartenübersicht unten rechts, Copyright Hinweis unten links.<br />
<br />
; Ansicht erweitern<br />
Folgende Parameter können dem Shortcode mitgegeben werden:<br />
<br />
{| class="wikitable"<br />
| title || Für einen kurzen Titel des IFRAME oder der Karte<br />
|-<br />
| desc || Abkürzung für Description, also einer kurzen Beschreibung<br />
|-<br />
| width || darstellbare Breite des IFRAME. <br>Pixel bei bekannter Breite der zur Verfügung stehenden Fläche. <br>100% bei unbekannter Breite, dann passt sich die Karte automatisch über die volle Breite an.<br />
|-<br />
| height || Höhe des IFRAME in Pixel (keine Prozenangaben).<br />
|-<br />
| border || dünner Rahmen für das IFRAME. Kann mit CSS angepasst werden.<br />
|-<br />
| scrolling || nicht benutzen (horizontale und vertikale Scrollbalken)<br />
|}<br />
<br />
; Beispiel<br />
<br />
[pageview url="<span style="background-color:yellow;"><nowiki>http://map.openseamap.org/map/?</nowiki></span><br />
<span style="background-color:yellow;">zoom=14&amp;lat=54.17958&amp;lon=12.09869&amp;layers=BFTFFFTFFFF0FFF</span>"<br />
height="<span style="background-color:yellow;">400</span>" width="<span style="background-color:yellow;">95%</span>"border="<span style="background-color:yellow;">yes</span>" title="<span style="background-color:yellow;">Hafeneinfahrt Rostock</span>"<br />
desc="<span style="background-color:yellow;">Beispielbeschreibung</span>"]<br />
<br />
<br />
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).<br />
<br />
Die Kartenansicht kann man mit CSS noch individuell anpassen. <br />
<br />
Quelle: [http://www.projektq7-webworker.de/opernseamap-karten-ganz-einfach-in-wordpress-einbinden/ Blog von Ralph, mit Kartenbeispielen]</div>Photoweblog