OpenSeaMap Forum

For new registrations: Please create and activate an account. Afterwards send an email to forum.openseamap@gmail.com including a short message and your username to get write access to this forum. Thanks!
Für neue Registrierungen: Bitte erstelle einen neuen Account und schalte ihn frei. Anschließend sende eine kurze Mail mit deinem Nutzernamen an forum.openseamap@gmail.com um Schreibzugriff für dieses Forum zu bekommen. Danke!

You are not logged in.

#1 2012-10-04 11:53:46

Andreas_Kunz
Member
Registered: 2012-10-04
Posts: 2

Leider geht das einbinden der Karten nicht

Wollte heute mal die OpenSeaMap auf einer Seite von mir einbinden und habe den Code aus dem http://wiki.openseamap.org/index.php?ti … in_Website kopiert und auf meinem Testserver abgelegt.
Leider bleibt die Karte einfach nur weiss.

Vielleicht schaut sich das mal einer von Euch an.

Lieben Gruss aus Finnland

Andy

Offline

#2 2012-10-04 17:25:34

claas
Member
Registered: 2012-09-05
Posts: 2

Re: Leider geht das einbinden der Karten nicht

Hallo Andy,

der Wikiartikel beschreibt ja ziemlich viele Möglichkeiten zum Einbinden, welche hast du denn verwendet?

Offline

#3 2012-10-05 07:02:19

Andreas_Kunz
Member
Registered: 2012-10-04
Posts: 2

Re: Leider geht das einbinden der Karten nicht

claas wrote:

Hallo Andy,

der Wikiartikel beschreibt ja ziemlich viele Möglichkeiten zum Einbinden, welche hast du denn verwendet?


HTML-Code zum Einbinden der Karte:

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

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

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

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

			// Position and zoomlevel of the map
			var lon = 12.0915;
			var lat = 54.1878;
			var zoom = 15;
				
			var linkText = "Beschreibung auf SkipperGuide";
			
			function jumpTo(lon, lat, zoom) {
				var x = Lon2Merc(lon);
				var y = Lat2Merc(lat);
				map.setCenter(new OpenLayers.LonLat(x, y), zoom);
				return false;
			}

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

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

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

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

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

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

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

			function drawmap() {


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

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

				// Update harbour layer
				refresh_oseamh();
			}

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

</head>

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

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

</body>

</html>

Lieben Gruss aus Finnland

Andy

Offline

#4 2012-10-05 20:04:55

dom
Member
Registered: 2012-09-06
Posts: 15

Re: Leider geht das einbinden der Karten nicht

Habe den Code im Wiki aktualisiert. Die Karte und die Seezeichen sollten nun
angezeigt werden.

Leider besteht noch ein Problem bei der Anzeige der Häfen.

Offline

#5 2012-10-08 20:06:39

padde
Member
Registered: 2012-10-07
Posts: 7

Re: Leider geht das einbinden der Karten nicht

Das Problem mit den Häfen sehe ich auch bei mehreren anderen Punkten, die einen Hafen markieren. Gibt es da schon eine Lösung?

Offline

#6 2012-10-18 06:40:30

Markus
Administrator
Registered: 2012-09-04
Posts: 73
Website

Re: Leider geht das einbinden der Karten nicht

Und - funktioniert Deine Seite schon?
Schick doch mal einen Link :-)

Gruss, Markus

Offline

Board footer

Powered by FluxBB