2013-08-11 21:03:59 +01:00
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
2014-06-11 18:06:23 +01:00
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
2013-08-11 21:03:59 +01:00
|
|
|
<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" />
|
|
|
|
|
|
2016-04-29 03:32:52 +01:00
|
|
|
<script src="/javascript/openlayers/OpenLayers.js"></script>
|
2016-04-29 10:21:01 +01:00
|
|
|
<script src="/javascript/openstreetmap/OpenStreetMap.js"></script>
|
|
|
|
|
<!-- script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script -->
|
2014-06-11 18:06:23 +01:00
|
|
|
<script src="util.js"></script>
|
2013-08-11 21:03:59 +01:00
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
//<![CDATA[
|
|
|
|
|
|
2014-06-11 18:06:23 +01:00
|
|
|
// Position and Zoomlevel of the map
|
|
|
|
|
var lon = 13.8081;
|
|
|
|
|
var lat = 47.6776;
|
2016-04-29 03:32:52 +01:00
|
|
|
var zoom = 12;
|
2014-06-11 18:06:23 +01:00
|
|
|
|
2013-08-11 21:03:59 +01:00
|
|
|
var map;
|
|
|
|
|
|
|
|
|
|
var showPopupOnHover = true;
|
2016-04-29 03:32:52 +01:00
|
|
|
text = new Array("Show instructions","Hide instructions");
|
2013-08-11 21:03:59 +01:00
|
|
|
|
|
|
|
|
function drawmap() {
|
|
|
|
|
OpenLayers.Lang.setCode('en');
|
|
|
|
|
|
|
|
|
|
map = new OpenLayers.Map('map', {
|
|
|
|
|
controls: [
|
2014-06-11 18:06:23 +01:00
|
|
|
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),
|
2013-08-11 21:03:59 +01:00
|
|
|
numZoomLevels: 18,
|
|
|
|
|
maxResolution: 156543,
|
2014-06-11 18:06:23 +01:00
|
|
|
units: 'meters',
|
|
|
|
|
projection: new OpenLayers.Projection("EPSG:900913"),
|
|
|
|
|
displayProjection: new OpenLayers.Projection("EPSG:4326")
|
|
|
|
|
} );
|
2013-08-11 21:03:59 +01:00
|
|
|
|
|
|
|
|
|
2014-06-11 18:06:23 +01:00
|
|
|
icons = new Array();
|
2016-04-29 03:32:52 +01:00
|
|
|
icons[0] = new Array('/javascript/openlayers/img/marker.png','21','25','0.5','1');
|
2013-08-11 21:03:59 +01:00
|
|
|
|
2014-06-11 18:06:23 +01:00
|
|
|
// Display layers
|
2013-08-11 21:03:59 +01:00
|
|
|
|
2014-06-11 18:06:23 +01:00
|
|
|
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
|
|
|
|
|
map.addLayer(layerMapnik);
|
2013-08-11 21:03:59 +01:00
|
|
|
|
2014-06-11 18:06:23 +01:00
|
|
|
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
|
|
|
|
|
map.addLayer(layerCycleMap);
|
|
|
|
|
|
|
|
|
|
layers = new Array();
|
|
|
|
|
layers.push(new Array(layerMapnik,'layerMapnik'));
|
|
|
|
|
layers.push(new Array(layerCycleMap,'layerCycleMap'));
|
2013-08-11 21:03:59 +01:00
|
|
|
|
|
|
|
|
//this isn't right yet - GPX points are not appearing
|
2014-06-11 18:06:23 +01:00
|
|
|
/*map.addLayer(
|
|
|
|
|
new OpenLayers.Layer.Markers("Entrances","ents.gpx",
|
2013-08-11 21:03:59 +01:00
|
|
|
{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")
|
|
|
|
|
}
|
|
|
|
|
)
|
2014-06-11 18:06:23 +01:00
|
|
|
);*/
|
|
|
|
|
|
|
|
|
|
var gpxStyles = new OpenLayers.StyleMap({
|
|
|
|
|
"default": new OpenLayers.Style({
|
|
|
|
|
pointRadius: "5", // sized according to type attribute
|
|
|
|
|
graphicName: "star",
|
2016-04-29 03:32:52 +01:00
|
|
|
label: "${name}",
|
2014-06-11 18:06:23 +01:00
|
|
|
labelAlign: "rb",
|
|
|
|
|
|
2016-04-29 03:32:52 +01:00
|
|
|
//labelAlign: "${align}",
|
2014-06-11 18:06:23 +01:00
|
|
|
//labelXOffset: "${xOffset}",
|
|
|
|
|
//labelYOffset: "${yOffset}",
|
|
|
|
|
labelOutlineColor: "white",
|
|
|
|
|
labelOutlineWidth: 3,
|
|
|
|
|
|
2016-04-29 03:32:52 +01:00
|
|
|
fontSize: 12,
|
2014-06-11 18:06:23 +01:00
|
|
|
fontFamily: "Arial",
|
|
|
|
|
fontColor: "brown",
|
|
|
|
|
labelYOffset: 10,
|
|
|
|
|
fillColor: "black",
|
2016-04-29 03:32:52 +01:00
|
|
|
|
|
|
|
|
strokeColor: "red",
|
2014-06-11 18:06:23 +01:00
|
|
|
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: "ents.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'));
|
|
|
|
|
|
2016-04-29 03:32:52 +01:00
|
|
|
// fit map to bounds of window and add start, finish pins (finish not working)
|
2014-06-11 18:06:23 +01:00
|
|
|
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'));
|
2013-08-11 21:03:59 +01:00
|
|
|
|
|
|
|
|
setLayer(1);
|
|
|
|
|
|
|
|
|
|
|
2016-04-29 03:32:52 +01:00
|
|
|
|
2013-08-11 21:03:59 +01:00
|
|
|
|
|
|
|
|
// Display markers
|
2014-06-11 18:06:23 +01:00
|
|
|
addMarker(layerMarkers,13.8248,47.6884,"<b>Stone Bridge</b><p />Not the real stone bridge: this is a demo",false,0);
|
2013-08-11 21:03:59 +01:00
|
|
|
|
|
|
|
|
geometries = new Array();
|
|
|
|
|
|
|
|
|
|
// Nochmal was..
|
2016-04-29 03:32:52 +01:00
|
|
|
map.setCenter(0, zoom, 1, 1);
|
2013-08-11 21:03:59 +01:00
|
|
|
jumpTo(lon, lat, zoom);
|
|
|
|
|
toggleInfo();
|
|
|
|
|
checkUtilVersion(4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//]]>
|
|
|
|
|
</script>
|
2014-06-11 18:06:23 +01:00
|
|
|
|
|
|
|
|
<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>
|
2013-08-11 21:03:59 +01:00
|
|
|
<body onload="drawmap();">
|
2016-04-29 03:32:52 +01:00
|
|
|
<div id="descriptionToggle" onclick="toggleInfo()">Show instructions</div>
|
2013-08-11 21:03:59 +01:00
|
|
|
<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>
|
