<!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"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="./theme/default/style.css" type="text/css" /> <div id="map" style="width: 100%; height: 640px; margin: 0px; padding: 0px; padding-left: 0px;"></div> <title>Fahrzeuge</title> <script src="./OpenLayers.js" type="text/javascript"></script> <script type="text/javascript"> <!-- var zoomify_width = 10401; var zoomify_height = 13428; var zoomify_url = "./tiles/"; var MARKER_Z_INDEX = 11; var SHADOW_Z_INDEX = 10; var DIAMETER = 200; var NUMBER_OF_FEATURES_RTW = 5 var map, zoomify; function init(){ map = new OpenLayers.Map("map", options); // 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.addControl(new OpenLayers.Control.MousePosition()); map.addControl(new OpenLayers.Control.PanZoomBar()); map.addControl(new OpenLayers.Control.MouseDefaults()); map.addControl(new OpenLayers.Control.KeyboardDefaults()); //Try different renderer var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; // Adding a Vector Layer for RTW's rtw = new OpenLayers.Layer.Vector("RTW", { styleMap: new OpenLayers.StyleMap({ externalGraphic: "./img/marker.png", graphicZIndex: MARKER_Z_INDEX, pointRadius: 10 }), isBaseLayer: false, rendererOptions: {yOrdering: true}, renderers: renderer } ); map.addLayers([zoomify, rtw]); // Add a drag feature control var dragFeature = new OpenLayers.Control.DragFeature(rtw); map.addControl(dragFeature); dragFeature.activate(); map.zoomToMaxExtent(); drawFeatures(); } function drawFeatures() { rtw.removeFeatures(rtw.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 = []; for (var index = 0; index < NUMBER_OF_FEATURES_RTW; index++) { // Calculate a random x/y. Subtract half the diameter to make some // features negative. 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) ) ); } map.setBaseLayer(zoomify); rtw.addFeatures(features); }init();// --></script> </head> <body> <h1>Strecke des Velothon</h1></body></html>