<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Loser cave map</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-language" content="en" /> <script src="/javascript/openlayers/OpenLayers.js"></script> <!-- <script src="/javascript/openstreetmap/OpenStreetMap.js"></script> --> <!-- <script src="util.js"></script> --> <script type="text/javascript"> //<![CDATA[ // Position and Zoomlevel of the map var lon = 13.8081; var lat = 47.6776; var zoom = 14; var map; var showPopupOnHover = true; text = new Array("Show map information","Hide map information"); function drawmap() { OpenLayers.Lang.setCode('en'); map = new OpenLayers.Map('map', { controls: [ new OpenLayers.Control.Navigation({zoomWheelEnabled : true}), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.Attribution()], //new OpenLayers.Control.MouseDefaults(), //new OpenLayers.Control.Attribution()], maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34, 20037508.34), numZoomLevels: 18, maxResolution: 156543, units: 'meters', projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326") } ); // Display the control elements //map.addControl(new OpenLayers.Control.PanZoomBar()); //map.addControl(new OpenLayers.Control.Permalink('permalink')); //map.addControl(new OpenLayers.Control.ScaleLine()); //map.addControl(new OpenLayers.Control.LayerSwitcher()); //checkForPermalink(); //icons = new Array(); //icons[0] = new Array('http://openlayers.org/api/img/marker.png','21','25','0.5','1'); // Display layers //layer_markers = new OpenLayers.Layer.Markers("Marker", { projection: new OpenLayers.Projection("EPSG:4326"),visibility: true, displayInLayerSwitcher: false }); //layer_vectors = new OpenLayers.Layer.Vector("Zeichnungen", { displayInLayerSwitcher: true } ); //map.addLayer(layer_vectors); //map.addLayer(layer_markers) //layers = new Array(); //layer_layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik"); //map.addLayer(layer_layerMapnik); //layers.push(new Array(layer_layerMapnik,'layer_layerMapnik')); //layer_layerCyclemap = new OpenLayers.Layer.OSM.CycleMap("Cyclemap"); //map.addLayer(layer_layerCyclemap); //layers.push(new Array(layer_layerCyclemap,'layer_layerCyclemap')); var layerMapnik = new OpenLayers.Layer.OSM(); map.addLayer(layerMapnik); //layerCycleMap = new OpenLayers.Layer.OSM("CycleMap"); //map.addLayer(layerCycleMap); //layers = new Array(); //layers.push(new Array(layerMapnik,'layerMapnik')); //layers.push(new Array(layerCycleMap,'layerCycleMap')); //this isn't right yet - GPX points are not appearing map.addLayer( new OpenLayers.Layer.Markers("Entrances","foobar.gpx", {format: OpenLayers.Format.GPX({extractWaypoints: true}), styleMap: new OpenLayers.StyleMap( {pointRadius: "5", label: "${wpt}", strokeColor: "#FF0000", strokeWidth: 3, strokeOpacity: 0.8} ), projection: new OpenLayers.Projection("EPSG:4326") } ) ); var gpxStyles = new OpenLayers.StyleMap({ "default": new OpenLayers.Style({ pointRadius: "5", // sized according to type attribute graphicName: "star", label: "${name}", labelAlign: "rb", //labelAlign: "${align}", //labelXOffset: "${xOffset}", //labelYOffset: "${yOffset}", labelOutlineColor: "white", labelOutlineWidth: 3, fontSize: 12, fontFamily: "Arial", fontColor: "brown", labelYOffset: 10, fillColor: "black", strokeColor: "red", strokeWidth: 3, strokeOpacity: 0.8 }), //"select": new OpenLayers.Style({ // fillColor: "#66ccff", // strokeColor: "#3399ff", // graphicZIndex: 10000 // }) }); var layerGPX = new OpenLayers.Layer.Vector("Entrances", { strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.HTTP({ url: "http://expo.survex.com/handbook/essentials.gpx", format: new OpenLayers.Format.GPX({extractWaypoints: true, extractRoutes: true, extractAttributes: true}) }), //style: {strokeColor: "red", strokeWidth: 3, strokeOpacity: 0.8}, styleMap: gpxStyles, projection: new OpenLayers.Projection("EPSG:4326") }); map.addLayer(layerGPX); //layers.push(new Array(layerGPX,'layerGPX')); // fit map to bounds of window and add start, finish pins (finish not working) layerGPX.events.register("loadend", layerGPX, function() { this.map.zoomToExtent(this.getDataExtent()); //var startPoint = this.features[0].geometry.components[0]; //layerMarkers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon)); //var endPoint = this.features[0].geometry.components[this.features[0].geometry.components.length - 1]; //layerMarkers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(endPoint.x, endPoint.y),icon2)); }); // another way to manually add marker. Give vars lon and lat values initially //var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); //map.setCenter(lonLat, zoom); // Markers layer must be last up if you want the hover over dialouge to work layerMarkers = new OpenLayers.Layer.Markers("Marker", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayInLayerSwitcher: false }); map.addLayer(layerMarkers); //layers.push(new Array(layerMarkers,'layerMarkers')); //setLayer(1); // Jump to the right location jumpTo(lon,lat,zoom); // Display marker icons //icons = new Array(); //icons[0] = new Array('http://openlayers.org/api/img/marker.png','21','25','0.5','1'); //icons[4] = new Array('http://osmtools.de/easymap/images/pin_red.png','16','28','0','1'); //icons[6] = new Array('http://osmtools.de/easymap/images/pin_green.png','16','28','0','1'); //icons[10] = new Array('http://osmtools.de/easymap/images/haus_red.png','20','24','0.5','0.5'); // Display markers addMarker(layerMarkers,13.8248,47.6884,"<b>Stone Bridge</b><p />Not the real stone bridge: this is a demo",false,0); geometries = new Array(); // Nochmal was.. jumpTo(lon, lat, zoom); toggleInfo(); checkUtilVersion(4); } //]]> </script> <link rel="stylesheet" href="map.css" type="text/css"> <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .mapposn { display: block; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; } --> </style></head> <body onload="drawmap();"> <div id="descriptionToggle" onclick="toggleInfo()">Show map information</div> <div id="description" class="hide">Expo prototype slippy map<br >Please mouseover<br >the pin markers.<br ></div> <div id="map"></div> <div class="hide"><p><p>If you see this text, you opened the map HTML-File without the necessary files.</p></div> </body> </html>