expo/expoweb
1
0
Fork 0
mirror of https://expo.survex.com/repositories/expoweb/.git/ synced 2024-11-24 16:21:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

A closer to working slippy map

Browse Source
This commit is contained in:
Sam 2014-06-11 18:06:23 +01:00
parent 46f3392bd7
commit e958efea3e
1 changed files with 138 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
map/index.html
View File

@ -1,21 +1,24 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!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="de" lang="de"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <head>
<title>Loser cave map</title> <title>Loser cave map</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="en" /> <meta http-equiv="content-language" content="en" />
<meta name="generator" content="Easymap" />
<link rel="stylesheet" type="text/css" href="map.css" />
<script type="text/javascript" src="javascript/openlayers/OpenLayers.min.js"></script> <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script> <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript" src="util.js"></script> <script src="util.js"></script>
<script type="text/javascript"> <script type="text/javascript">
//<![CDATA[ //<![CDATA[
// Position and Zoomlevel of the map
var lon = 13.8081;
var lat = 47.6776;
var zoom = 14;
var map; var map;
var showPopupOnHover = true; var showPopupOnHover = true;
@ -25,40 +28,59 @@ function drawmap() {
OpenLayers.Lang.setCode('en'); OpenLayers.Lang.setCode('en');
map = new OpenLayers.Map('map', { map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls: [ controls: [
new OpenLayers.Control.MouseDefaults(), new OpenLayers.Control.Navigation({zoomWheelEnabled : true}),
new OpenLayers.Control.Attribution()], new OpenLayers.Control.PanZoomBar(),
maxExtent: new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Bounds(-20037508.34,-20037508.34, new OpenLayers.Control.Attribution()],
20037508.34, 20037508.34), //new OpenLayers.Control.MouseDefaults(),
//new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34, 20037508.34),
numZoomLevels: 18, numZoomLevels: 18,
maxResolution: 156543, maxResolution: 156543,
units: 'meters' units: 'meters',
}); projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
// Display the control elements // Display the control elements
// This appear momentarily then dissappear. Not sure what's wrong. //map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.PanZoomBar()); //map.addControl(new OpenLayers.Control.Permalink('permalink'));
map.addControl(new OpenLayers.Control.Permalink('permalink')); //map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.ScaleLine()); //map.addControl(new OpenLayers.Control.LayerSwitcher());
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');
// Position and Zoomlevel of the map // Display layers
lon = 13.8081;
lat = 47.6776;
zoom = 14;
checkForPermalink(); //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'));
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
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'));
//this isn't right yet - GPX points are not appearing //this isn't right yet - GPX points are not appearing
map.addLayer( /*map.addLayer(
new OpenLayers.Layer.Vector("Entrances","ents.gpx", new OpenLayers.Layer.Markers("Entrances","ents.gpx",
{format: OpenLayers.Format.GPX({extractWaypoints: true}), {format: OpenLayers.Format.GPX({extractWaypoints: true}),
styleMap: new OpenLayers.StyleMap( styleMap: new OpenLayers.StyleMap(
{pointRadius: "5", label: "${wpt}", strokeColor: "#FF0000", strokeWidth: 3, strokeOpacity: 0.8} {pointRadius: "5", label: "${wpt}", strokeColor: "#FF0000", strokeWidth: 3, strokeOpacity: 0.8}
@ -66,42 +88,90 @@ map.addLayer(
projection: new OpenLayers.Projection("EPSG:4326") 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: "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'));
// 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));
});
// Display layers // 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'));
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: false } );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'));
setLayer(1); setLayer(1);
// Jump to the right location // Jump to the right location
jumpTo(lon,lat,zoom); jumpTo(lon,lat,zoom);
// Display marker icons // Display marker icons
icons = new Array(); //icons = new Array();
icons[0] = new Array('http://openlayers.org/api/img/marker.png','21','25','0.5','1'); //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[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[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'); //icons[10] = new Array('http://osmtools.de/easymap/images/haus_red.png','20','24','0.5','0.5');
// Display markers // Display markers
addMarker(layer_markers,13.8248,47.6884,"<b>Stone Bridge</b><p />Not the real stone bridge: this is a demo",false,0); 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(); geometries = new Array();
// Nochmal was.. // Nochmal was..
jumpTo(lon, lat, zoom); jumpTo(lon, lat, zoom);
toggleInfo(); toggleInfo();
@ -110,7 +180,27 @@ checkUtilVersion(4);
//]]> //]]>
</script> </script>
</head>
<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();"> <body onload="drawmap();">
<div id="descriptionToggle" onclick="toggleInfo()">Show map information</div> <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="description" class="hide">Expo prototype slippy map<br >Please mouseover<br >the pin markers.<br ></div>