<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--############################# Informationen ################################## # Fuer jede Fahrzeugebene ist folgendes noetig: # # $EBENENNAME = new OpenLayers.Layer.Vector("$NAME_DER_EBENE", # { # styleMap: new OpenLayers.StyleMap({ # externalGraphic: "./img/$BILDNAME.png", # # graphiczIndex: MARKER_Z_INDEX, # # pointRadius: 10 # }), # isBaseLayer: false, # rendererOptions: {yOrdering: true}, # renderers: renderer # }); # # var dragFeature$NAME = new OpenLayers.Control.DragFeature($EBENENNAME); # map.addControl(dragFeature); # dragFeature.activate(); # # map.addLayer($EBENENNAME); # ################################################################################## # # Ebenfalls nötig ist ein angepasster drawFeatures() Block! --> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="stylesheet" href="./theme/default/style.css" type="text/css" /> <link rel="sytlesheet" href="Style.css" type="text/css"/> <style type="text/css"> html, body, #map { margin: 0; width: 100%; height: 100%; } #text { position: absolute; bottom: 1em; left: 1em; width: 512px; z-index: 20000; background-color: white; padding: 0 0.5em 0.5em 0.5em; } </style> <title>Fahrzeuge</title> <script src="./OpenLayers.js"></script> <script type="text/javascript"> var zoomify_width = 10401; var zoomify_height = 13428; var zoomify_url = "./velothonstrecke/"; var MARKER_Z_INDEX = 11; var DIAMETER = 200; var map, zoomify; function init(){ /* First we initialize the zoomify pyramid (to get number of tiers) */ var zoomify = new OpenLayers.Layer.Zoomify( "Zoomify", zoomify_url, new OpenLayers.Size( zoomify_width, zoomify_height ) ); zoomify.standardTileSize = 256; /* Map with raster coordinates (pixels) from Zoomify image */ var options = { controls: [], maxExtent: new OpenLayers.Bounds(0, 0, zoomify_width, zoomify_height), maxResolution: Math.pow(2, zoomify.numberOfTiers-1 ), numZoomLevels: zoomify.numberOfTiers, units: 'pixels', }; map = new OpenLayers.Map("map", options); map.addLayer(zoomify); map.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.PanZoomBar()); map.addControl(new OpenLayers.Control.MouseDefaults()); map.addControl(new OpenLayers.Control.KeyboardDefaults()); map.addControl(new OpenLayers.Control.LayerSwitcher()); // allow testing of specific renderers via "?renderer=Canvas", etc var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; /*####################################################################### # Es folgen die Aufrufprozeduren fuer die RTW's # # # ########################################################################*/ /*####################################################################### # 73/01 # # # ########################################################################*/ rtw_7301 = new OpenLayers.Layer.Vector("RTW 73/01", { styleMap: new OpenLayers.StyleMap({ externalGraphic: "./img/fahrzeuge/7301.png", graphiczIndex: MARKER_Z_INDEX, pointRadius: 20 }), isBaseLayer: false, rendererOptions: {yOrdering: true}, renderers: renderer }); var dragFeatureRTW7301 = new OpenLayers.Control.DragFeature(rtw_7301); map.addControl(dragFeatureRTW7301); dragFeatureRTW7301.activate(); map.addLayer(rtw_7301); map.setBaseLayer(zoomify); map.zoomToMaxExtent(); drawFeatures7301(); function drawFeatures7301() { rtw_7301.removeFeatures(rtw_7301.features); // Create features at random around the center. var center = map.getViewPortPxFromLonLat(map.getCenter()); // Add the ordering features. These are the gold ones that all have the same z-index // and succomb to y-ordering. var features = []; var x = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2); var y = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2); var pixel = new OpenLayers.Pixel(center.x + x, center.y + y); var lonLat = map.getLonLatFromViewPortPx(pixel); features.push( new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat) ) ); rtw_7301.addFeatures(features); } /*####################################################################### # 73/02 # # # ########################################################################*/ rtw_7302 = new OpenLayers.Layer.Vector("RTW 73/02", { styleMap: new OpenLayers.StyleMap({ externalGraphic: "./img/fahrzeuge/7302.png", graphiczIndex: MARKER_Z_INDEX, pointRadius: 20 }), isBaseLayer: false, rendererOptions: {yOrdering: true}, renderers: renderer }); var dragFeatureRTW7302 = new OpenLayers.Control.DragFeature(rtw_7302); map.addControl(dragFeatureRTW7302); dragFeatureRTW7302.activate(); map.addLayer(rtw_7302); map.setBaseLayer(zoomify); map.zoomToMaxExtent(); drawFeatures7302(); function drawFeatures7302() { rtw_7302.removeFeatures(rtw_7302.features); // Create features at random around the center. var center = map.getViewPortPxFromLonLat(map.getCenter()); // Add the ordering features. These are the gold ones that all have the same z-index // and succomb to y-ordering. var features = []; var x = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2); var y = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2); var pixel = new OpenLayers.Pixel(center.x + x, center.y + y); var lonLat = map.getLonLatFromViewPortPx(pixel); features.push( new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat) ) ); rtw_7302.addFeatures(features); } /*####################################################################### # 73/03 # # # ########################################################################*/ rtw_7303 = new OpenLayers.Layer.Vector("RTW 73/03", { styleMap: new OpenLayers.StyleMap({ externalGraphic: "./img/fahrzeuge/7303.png", graphiczIndex: MARKER_Z_INDEX, pointRadius: 20 }), isBaseLayer: false, rendererOptions: {yOrdering: true}, renderers: renderer }); var dragFeatureRTW7303 = new OpenLayers.Control.DragFeature(rtw_7303); map.addControl(dragFeatureRTW7303); dragFeatureRTW7303.activate(); map.addLayer(rtw_7303); map.setBaseLayer(zoomify); map.zoomToMaxExtent(); drawFeatures7303(); function drawFeatures7303() { rtw_7303.removeFeatures(rtw_7303.features); // Create features at random around the center. var center = map.getViewPortPxFromLonLat(map.getCenter()); // Add the ordering features. These are the gold ones that all have the same z-index // and succomb to y-ordering. var features = []; var x = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2); var y = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2); var pixel = new OpenLayers.Pixel(center.x + x, center.y + y); var lonLat = map.getLonLatFromViewPortPx(pixel); features.push( new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat) ) ); rtw_7303.addFeatures(features); } /*####################################################################### # 73/04 # # # ########################################################################*/ rtw_7304 = new OpenLayers.Layer.Vector("RTW 73/04", { styleMap: new OpenLayers.StyleMap({ externalGraphic: "./img/fahrzeuge/7304.png", graphiczIndex: MARKER_Z_INDEX, pointRadius: 20 }), isBaseLayer: false, rendererOptions: {yOrdering: true}, renderers: renderer }); var dragFeatureRTW7304 = new OpenLayers.Control.DragFeature(rtw_7304); map.addControl(dragFeatureRTW7304); dragFeatureRTW7304.activate(); map.addLayer(rtw_7304); map.setBaseLayer(zoomify); map.zoomToMaxExtent(); drawFeatures7304(); function drawFeatures7304() { rtw_7304.removeFeatures(rtw_7304.features); // Create features at random around the center. var center = map.getViewPortPxFromLonLat(map.getCenter()); // Add the ordering features. These are the gold ones that all have the same z-index // and succomb to y-ordering. var features = []; var x = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2); var y = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2); var pixel = new OpenLayers.Pixel(center.x + x, center.y + y); var lonLat = map.getLonLatFromViewPortPx(pixel); features.push( new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat) ) ); rtw_7304.addFeatures(features); } /*####################################################################### # 73/05 # # # ########################################################################*/ rtw_7305 = new OpenLayers.Layer.Vector("RTW 73/05", { styleMap: new OpenLayers.StyleMap({ externalGraphic: "./img/fahrzeuge/7305.png", graphiczIndex: MARKER_Z_INDEX, pointRadius: 20 }), isBaseLayer: false, rendererOptions: {yOrdering: true}, renderers: renderer }); var dragFeatureRTW7305 = new OpenLayers.Control.DragFeature(rtw_7305); map.addControl(dragFeatureRTW7305); dragFeatureRTW7305.activate(); map.addLayer(rtw_7305); map.setBaseLayer(zoomify); map.zoomToMaxExtent(); drawFeatures7305(); function drawFeatures7305() { rtw_7305.removeFeatures(rtw_7305.features); // Create features at random around the center. var center = map.getViewPortPxFromLonLat(map.getCenter()); // Add the ordering features. These are the gold ones that all have the same z-index // and succomb to y-ordering. var features = []; var x = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2); var y = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2); var pixel = new OpenLayers.Pixel(center.x + x, center.y + y); var lonLat = map.getLonLatFromViewPortPx(pixel); features.push( new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat) ) ); rtw_7305.addFeatures(features); } /*####################################################################### # Es folgen die Aufrufprozeduren fuer die KTW's # # # ########################################################################*/}</script> </head> <body onload="init()"><div id="map"></div> </body></html>