mirror of
https://expo.survex.com/repositories/expoweb/.git/
synced 2025-12-09 07:14:36 +00:00
move slippy map
This commit is contained in:
29
map/slippy/index-leaflet.html
Normal file
29
map/slippy/index-leaflet.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<script src="/javascript/leaflet/leaflet.js"></script>
|
||||
<link href="/javascript/leaflet/leaflet.css" rel="stylesheet"/>
|
||||
<div id="osm-map"></div>
|
||||
<script>
|
||||
// this file found on an expo laptop and put into the VCS in 2019
|
||||
// Where you want to render the map.
|
||||
var element = document.getElementById('osm-map');
|
||||
|
||||
// Height has to be set. You can do this in CSS too.
|
||||
element.style = 'height:300px;';
|
||||
|
||||
// Create Leaflet map on map element.
|
||||
var map = L.map(element);
|
||||
|
||||
// Add OSM tile leayer to the Leaflet map.
|
||||
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
// Target's GPS coordinates.
|
||||
// This is Budapest, why ?!
|
||||
var target = L.latLng('47.50737', '19.04611');
|
||||
|
||||
// Set map's center to target with zoom 14.
|
||||
map.setView(target, 14);
|
||||
|
||||
// Place a marker on the same location.
|
||||
L.marker(target).addTo(map);
|
||||
</script>
|
||||
210
map/slippy/index.html
Normal file
210
map/slippy/index.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!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>
|
||||
102
map/slippy/map.css
Normal file
102
map/slippy/map.css
Normal file
@@ -0,0 +1,102 @@
|
||||
@charset "utf-8";
|
||||
|
||||
html,body {
|
||||
background-color: #FFF;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Verdana, Arial, sans-serif;
|
||||
font-size: 1em;
|
||||
overflow: hidden;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0000FF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #000011;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 1em;
|
||||
color: #000;
|
||||
}
|
||||
.olFramedCloudPopupContent {
|
||||
font-size: 0.8em;
|
||||
font-family: Verdana, sans-serif;
|
||||
}
|
||||
#descriptionToggle {
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
z-index: 10000;
|
||||
left: 80px;
|
||||
height: 14px;
|
||||
border-left: 1px solid #000040;
|
||||
border-bottom: 1px solid #000040;
|
||||
border-right: 1px solid #000040;
|
||||
padding: 2px 10px;
|
||||
margin-right: 200px;
|
||||
background-color: #EEE;
|
||||
font-size: 12px;
|
||||
cursor: default;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#descriptionToggle:hover {
|
||||
background-color: #FFF;
|
||||
opacity: 1;
|
||||
}
|
||||
#description {
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
left: 80px;
|
||||
top: 18px;
|
||||
border: 1px solid #000040;
|
||||
padding: 10px 10px;
|
||||
margin-right: 200px;
|
||||
background-color: #FFF;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#attribution {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 5px 8px 1px 8px;
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
font-style: italic;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#layer {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 10px;
|
||||
z-index: 10002;
|
||||
}
|
||||
|
||||
#layer > div {
|
||||
border: 1px solid #000;
|
||||
background-color: #FFF;
|
||||
padding: 4px 5px;
|
||||
font-size: 0.7em;
|
||||
cursor: default;
|
||||
margin-bottom: 4px;
|
||||
|
||||
}
|
||||
#layer div:hover {
|
||||
}
|
||||
#layer .active {
|
||||
background-color: #EEF;
|
||||
}
|
||||
|
||||
.hide { display: none; }
|
||||
148
map/slippy/map.html
Normal file
148
map/slippy/map.html
Normal file
@@ -0,0 +1,148 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
|
||||
<style>
|
||||
.map {
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
#map .ol-zoom .ol-zoom-out {
|
||||
margin-top: 204px;
|
||||
}
|
||||
#map .ol-zoomslider {
|
||||
background-color: transparent;
|
||||
top: 2.3em;
|
||||
}
|
||||
|
||||
#map .ol-touch .ol-zoom .ol-zoom-out {
|
||||
margin-top: 212px;
|
||||
}
|
||||
#map .ol-touch .ol-zoomslider {
|
||||
top: 2.75em;
|
||||
}
|
||||
|
||||
#map .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
|
||||
#map .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
#map .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
|
||||
#map .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
|
||||
top: 232px;
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
|
||||
<title>Expo prospecting slippy map</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Expo prospecting slippy map</h2>
|
||||
<div id="map" class="map"></div>
|
||||
<div id="info"> </div>
|
||||
<script type="text/javascript">
|
||||
// import Map from 'ol/Map.js';
|
||||
// import View from 'ol/View.js';
|
||||
// import GPX from 'ol/format/GPX.js';
|
||||
// import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
|
||||
// import BingMaps from 'ol/source/BingMaps.js';
|
||||
// import VectorSource from 'ol/source/Vector.js';
|
||||
// import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
|
||||
var lon = 13.8081;
|
||||
var lat = 47.6776;
|
||||
var zoom = 14;
|
||||
|
||||
var style = {
|
||||
'Point': new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,255,0,0.4)'
|
||||
}),
|
||||
radius: 5,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ff0',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
}),
|
||||
'LineString': new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f00',
|
||||
width: 3
|
||||
})
|
||||
}),
|
||||
'MultiLineString': new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#0f0',
|
||||
width: 3
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
url: 'http://expo.survex.com/expofiles/gpslogs/essentials/essentials2019.gpx',
|
||||
format: new ol.format.GPX()
|
||||
}),
|
||||
style: function(feature) {
|
||||
return style[feature.getGeometry().getType()];
|
||||
}
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
//maxExtent: new ol.bounds(-20037508.34,-20037508.34,20037508.34, 20037508.34),
|
||||
numZoomLevels: 18,
|
||||
maxResolution: 156543,
|
||||
units: 'meters',
|
||||
//projection: new ol.projection("EPSG:900913"),
|
||||
//displayProjection: new ol.projection("EPSG:4326"),
|
||||
|
||||
target: 'map',
|
||||
layers: [
|
||||
// new ol.layer.Tile({
|
||||
// source: new ol.source.OSM()
|
||||
// }),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM({
|
||||
})
|
||||
}),
|
||||
vector
|
||||
],
|
||||
view: new ol.View({
|
||||
center: ol.proj.fromLonLat([lon, lat]),
|
||||
zoom: zoom
|
||||
})
|
||||
});
|
||||
|
||||
var displayFeatureInfo = function(pixel) {
|
||||
var features = [];
|
||||
map.forEachFeatureAtPixel(pixel, function(feature) {
|
||||
features.push(feature);
|
||||
});
|
||||
if (features.length > 0) {
|
||||
var info = [];
|
||||
var i, ii;
|
||||
for (i = 0, ii = features.length; i < ii; ++i) {
|
||||
info.push(features[i].get('name'));
|
||||
}
|
||||
document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
|
||||
map.getTarget().style.cursor = 'pointer';
|
||||
} else {
|
||||
document.getElementById('info').innerHTML = ' ';
|
||||
map.getTarget().style.cursor = '';
|
||||
}
|
||||
};
|
||||
|
||||
map.on('pointermove', function(evt) {
|
||||
if (evt.dragging) {
|
||||
return;
|
||||
}
|
||||
var pixel = map.getEventPixel(evt.originalEvent);
|
||||
displayFeatureInfo(pixel);
|
||||
});
|
||||
|
||||
map.on('click', function(evt) {
|
||||
displayFeatureInfo(evt.pixel);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
5
map/slippy/readme.txt
Normal file
5
map/slippy/readme.txt
Normal file
@@ -0,0 +1,5 @@
|
||||
This seems abandoned.
|
||||
|
||||
Like most stuff that relies on javascript, it very quickly goes out of date and stops working.
|
||||
It's why we try to minimize our use of javascript.
|
||||
Philip Sargent
|
||||
29
map/slippy/test.html
Normal file
29
map/slippy/test.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers Simplest Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="Map" style="height:250px"></div>
|
||||
<script src="/javascript/openlayers/OpenLayers.js"></script>
|
||||
<script>
|
||||
var lat = 47.6384400; // Altaussee
|
||||
var lon = 13.7627800;
|
||||
var zoom = 18;
|
||||
|
||||
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
|
||||
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
|
||||
var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
|
||||
|
||||
map = new OpenLayers.Map("Map");
|
||||
var mapnik = new OpenLayers.Layer.OSM();
|
||||
map.addLayer(mapnik);
|
||||
|
||||
var markers = new OpenLayers.Layer.Markers( "Markers" );
|
||||
map.addLayer(markers);
|
||||
markers.addMarker(new OpenLayers.Marker(position));
|
||||
|
||||
map.setCenter(position, zoom);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
277
map/slippy/util.js
Normal file
277
map/slippy/util.js
Normal file
@@ -0,0 +1,277 @@
|
||||
/*
|
||||
* Einige Funktionen die ursprünglich von http://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden stammen,
|
||||
* teilweise modifiziert
|
||||
*
|
||||
* Some functions from the example at http://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden, some
|
||||
* slightly modified
|
||||
*/
|
||||
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, showPopupOnLoad, iconId) {
|
||||
|
||||
// Koordinaten in LonLat umwandeln
|
||||
var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));
|
||||
|
||||
// Feature erstellen und konfigurieren (Popup und Marker)
|
||||
var feature = new OpenLayers.Feature(layer, ll);
|
||||
feature.closeBox = true;
|
||||
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(200, 120) } );
|
||||
feature.data.popupContentHTML = popupContentHTML;
|
||||
feature.data.overflow = "auto";
|
||||
feature.data.icon = makeIcon(iconId);
|
||||
|
||||
// Marker erstellen
|
||||
var marker = feature.createMarker();
|
||||
|
||||
/*
|
||||
* Handler Funktionen für die Mouse-Events
|
||||
*/
|
||||
// Click
|
||||
var markerClick = function(evt) {
|
||||
// Wenn das Popup nicht sichtbar ist, dann kann es nicht fest sichtbar sein
|
||||
if (!this.popup.visible())
|
||||
this.popup.clicked = false;
|
||||
if (this.popup.clicked == true) {
|
||||
this.popup.clicked = false;
|
||||
this.popup.hide();
|
||||
}
|
||||
else {
|
||||
this.popup.clicked = true;
|
||||
if (!this.popup.visible())
|
||||
this.popup.show();
|
||||
}
|
||||
OpenLayers.Event.stop(evt);
|
||||
};
|
||||
// Hover
|
||||
var markerHover = function(evt) {
|
||||
// Wenn das Popup nicht sichtbar ist, dann kann es nicht fest sichtbar sein
|
||||
if (!this.popup.visible())
|
||||
this.popup.clicked = false;
|
||||
if (!this.popup.clicked)
|
||||
this.popup.show();
|
||||
|
||||
OpenLayers.Event.stop(evt);
|
||||
}
|
||||
// Hover End
|
||||
var markerHoverEnd = function(evt) {
|
||||
if (!this.popup.clicked) {
|
||||
this.popup.hide();
|
||||
}
|
||||
OpenLayers.Event.stop(evt);
|
||||
}
|
||||
|
||||
// Events auf den Marker registrieren und als Objekt das Feature übergeben
|
||||
marker.events.register("mousedown", feature, markerClick);
|
||||
if (showPopupOnHover) {
|
||||
marker.events.register("mouseover", feature, markerHover);
|
||||
marker.events.register("mouseout", feature, markerHoverEnd);
|
||||
}
|
||||
|
||||
// Erstellten Marker der Ebene hinzufügen
|
||||
layer.addMarker(marker);
|
||||
|
||||
// Popup erstellen, der Karte hinzufügen und anzeigen, falls gewünscht
|
||||
map.addPopup(feature.createPopup(feature.closeBox));
|
||||
|
||||
if (showPopupOnLoad != true) {
|
||||
// Wenn das Popup nicht angezeigt werden soll, verstecken und auf 'nicht angeklickt' setzen
|
||||
feature.popup.hide();
|
||||
feature.popup.clicked = false;
|
||||
} else {
|
||||
// Das Popup wird direkt angezeigt und zwar solange bis man es explizit schließt
|
||||
feature.popup.clicked = true;
|
||||
}
|
||||
|
||||
return marker;
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* Creates a new marker icon
|
||||
*
|
||||
* using the icons-array (defined in the html-file)
|
||||
*
|
||||
* index
|
||||
* 0 address to the image
|
||||
* 1 width of the image
|
||||
* 2 height
|
||||
* 3 factor by which the image should be offset horizontally
|
||||
* 4 factor by which the image should be offset vertically
|
||||
*
|
||||
* please see the icon array itself for examples of values
|
||||
*/
|
||||
function makeIcon(iconId) {
|
||||
var size = new OpenLayers.Size(icons[iconId][1],icons[iconId][2]);
|
||||
var offset = new OpenLayers.Pixel(-(size.w*icons[iconId][3]), -(size.h*icons[iconId][4]));
|
||||
var icon = new OpenLayers.Icon(icons[iconId][0],size,offset);
|
||||
return icon;
|
||||
}
|
||||
|
||||
function getCycleTileURL(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;
|
||||
|
||||
return this.url + z + "/" + x + "/" + y + "." + this.type;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Funktion zum Zerlegen der URL um die Parameter zu erhalten (für den Permalink)
|
||||
* Splits the URL in its parameters
|
||||
*/
|
||||
function get_parameters() {
|
||||
// erzeugt für jeden in der url übergebenen parameter einen wert
|
||||
// bsp: x.htm?nachname=Munch&vorname=Alex&bildfile=wasserfall.jpg erzeugt
|
||||
// variable nachname mit wert Munch und
|
||||
// variable vorname mit wert Alex
|
||||
// variable bildfile mit wert wasserfall.jpg
|
||||
var hier = document.URL;
|
||||
var parameterzeile = hier.substr((hier.indexOf("?")+1));
|
||||
var trennpos;
|
||||
var endpos;
|
||||
var paramname;
|
||||
var paramwert;
|
||||
var parameters = new Object();
|
||||
while (parameterzeile != "") {
|
||||
trennpos = parameterzeile.indexOf("=");
|
||||
endpos = parameterzeile.indexOf("&");
|
||||
if (endpos < 0) { endpos = 500000; }
|
||||
paramname = parameterzeile.substr(0,trennpos);
|
||||
paramwert = parameterzeile.substring(trennpos+1,endpos);
|
||||
parameters[paramname] = paramwert;
|
||||
//eval (paramname + " = \"" + paramwert + "\"");
|
||||
parameterzeile = parameterzeile.substr(endpos+1);
|
||||
}
|
||||
return parameters;
|
||||
}
|
||||
|
||||
/*
|
||||
* Wie der Name schon sagt ebenfalls für den Permalink, überprüft ob die Parameter in der URL gefunden wurden und überschreibt
|
||||
* sie gegebenenfalls.
|
||||
* Checks the url for parameters of the permalink and overwrites the default values if necessary.
|
||||
*/
|
||||
function checkForPermalink() {
|
||||
var parameters = get_parameters();
|
||||
|
||||
if (parameters['zoom'] != null)
|
||||
zoom = parseInt(parameters['zoom']);
|
||||
if (parameters['lat'] != null)
|
||||
lat = parseFloat(parameters['lat']);
|
||||
if (parameters['lon'] != null)
|
||||
lon = parseFloat(parameters['lon']);
|
||||
}
|
||||
/*
|
||||
* Debugging Funktion
|
||||
*/
|
||||
function var_dump(obj) {
|
||||
if(typeof obj == "object") {
|
||||
return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;
|
||||
} else {
|
||||
return "Type: "+typeof(obj)+"\nValue: "+obj;
|
||||
}
|
||||
}//end function var_dump
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Für den Layer-Switcher mit Buttons
|
||||
*/
|
||||
function setLayer(id) {
|
||||
if (document.getElementById("layer") != null) {
|
||||
for (var i=0;i<layers.length;++i)
|
||||
document.getElementById(layers[i][1]).className = "";
|
||||
}
|
||||
varName = layers[id][0];
|
||||
name = layers[id][1];
|
||||
map.setBaseLayer(varName);
|
||||
if (document.getElementById("layer") != null)
|
||||
document.getElementById(name).className = "active";
|
||||
}
|
||||
/*
|
||||
* Schaltet die Beschreibung der Karte an- und aus.
|
||||
* Toggles the description of the map.
|
||||
*/
|
||||
function toggleInfo() {
|
||||
var state = document.getElementById('description').className;
|
||||
if (state == 'hide') {
|
||||
// Info anzeigen
|
||||
document.getElementById('description').className = '';
|
||||
document.getElementById('descriptionToggle').innerHTML = text[1];
|
||||
}
|
||||
else {
|
||||
// Info verstecken
|
||||
document.getElementById('description').className = 'hide';
|
||||
document.getElementById('descriptionToggle').innerHTML = text[0];
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Zeichnet verschiedene Arten von geometrischen Objekten
|
||||
* Draws different kinds of geometric objects
|
||||
*/
|
||||
|
||||
function drawLine(coordinates,style) {
|
||||
var linePoints = createPointsArrayFromCoordinates(coordinates);
|
||||
|
||||
var line = new OpenLayers.Geometry.LineString(linePoints);
|
||||
var vector = new OpenLayers.Feature.Vector(line,null,style);
|
||||
|
||||
layer_vectors.addFeatures(vector);
|
||||
return vector;
|
||||
}
|
||||
function drawPolygon(coordinates,style) {
|
||||
var points = createPointsArrayFromCoordinates(coordinates);
|
||||
|
||||
var linearRing = new OpenLayers.Geometry.LinearRing(points);
|
||||
var polygon = new OpenLayers.Geometry.Polygon([linearRing]);
|
||||
var vector = new OpenLayers.Feature.Vector(polygon,null,style);
|
||||
|
||||
layer_vectors.addFeatures(vector);
|
||||
return vector;
|
||||
}
|
||||
function createPointsArrayFromCoordinates(coordinates) {
|
||||
var points = new Array();
|
||||
for (var i=0;i<coordinates.length;++i) {
|
||||
var lonlat = new OpenLayers.LonLat(coordinates[i][0],coordinates[i][1]).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"))
|
||||
points.push(new OpenLayers.Geometry.Point(lonlat.lon,lonlat.lat))
|
||||
}
|
||||
return points;
|
||||
}
|
||||
|
||||
/*
|
||||
* Gibt eine Fehlermeldung aus, wenn die Version der JavaScript Datei nicht mit der erforderlichen übereinstimmt
|
||||
* Outputs an error if the version of the JavaScript-File does not match the required one
|
||||
*/
|
||||
|
||||
function checkUtilVersion(version) {
|
||||
var thisFileVersion = 4;
|
||||
if (version != thisFileVersion) {
|
||||
alert("map.html and util.js versions do not match.\n\nPlease reload the page using your browsers 'reload' feature.\n\nIf the problem persists and you are the owner of this site, you may need to update the map's files.");
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user