rendered paste body<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <head> <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"> <title>DispoMap 2.0</title> <link rel="stylesheet" href="../openlayers/theme/default/style.css" type="text/css" > <link rel="stylesheet" href="../openlayers/Style.css" type="text/css" > <style type="text/css"> html, body, #map { width: 98%; height: 98%; } </style> <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAcSY2jieZpzNo47goFMbb9BRm2-sFo4H8yKCpv30MUpUHZmhCHRRAGAkte8SGDtYVWGO8FTC4rAYBOw" type="text/javascript"></script> <script type="text/javascript" src="../openlayers/OpenLayers.js"></script> <script type="text/javascript"> var MARKER_Z_INDEX = 40; var DIAMETER = 200; var P4326 = new OpenLayers.Projection("EPSG:4326"); var P900913 = new OpenLayers.Projection("EPSG:900913"); var selectedFeatureID = "None"; var map, layer, selectedFeature, dragFeature, selectControl; function init() { var options = { projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326"), units: "m", maxResolution: 156543.0339, maxExtent: new OpenLayers.Bounds(-20037508, -20037508,20037508, 20037508.34) }; map = new OpenLayers.Map("map", options); map.addControl(new OpenLayers.Control.LayerSwitcher()); var gmap = new OpenLayers.Layer.Google("Google Streets", // the default { numZoomLevels: 20, sphericalMercator:true }); var kurz = new OpenLayers.Layer.Vector("60km", { projection: map.displayProjection, strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.HTTP({ url: "http://maps.pytalhost.de/kml/60km.kml", format: new OpenLayers.Format.KML({ extractStyles: true, extractAttributes: true }) }) }); var lang = new OpenLayers.Layer.Vector("120km", { projection: map.displayProjection, strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.HTTP({ url: "http://maps.pytalhost.de/kml/120km.kml", format: new OpenLayers.Format.KML({ extractStyles: true, extractAttributes: true }) }) }); var elite = new OpenLayers.Layer.Vector("Elite", { projection: map.displayProjection, strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.HTTP({ url: "http://maps.pytalhost.de/kml/elite.kml", format: new OpenLayers.Format.KML({ extractStyles: true, extractAttributes: true }) }) }); map.addLayers([gmap, kurz, lang, elite]); map.setCenter(new OpenLayers.LonLat(13.373623, 52.513714).transform(P4326, P900913), 12); layer = new OpenLayers.Layer.Vector("Fahrzeuge", { styleMap: new OpenLayers.StyleMap({ "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({ externalGraphic: "${icon}", label: "${name} -- ${mstatus}", graphicOpacity: 1, graphicZIndex: MARKER_Z_INDEX, pointRadius: 35 }, OpenLayers.Feature.Vector.style["default"])), "select": new OpenLayers.Style({ //externalGraphic: "../img/fahrzeuge/*", pointRadius: 50, }) }) }); map.addLayer(layer); map.addControl(new OpenLayers.Control.PanZoomBar()); map.addControl(new OpenLayers.Control.MouseDefaults()); map.addControl(new OpenLayers.Control.KeyboardDefaults()); map.addControl(new OpenLayers.Control.MousePosition()); // Add a drag feature control to move features around. var dragFeature = new OpenLayers.Control.DragFeature(layer); map.addControl(dragFeature); dragFeature.activate(); dragFeature.handlers['drag'].stopDown = false; dragFeature.handlers['drag'].stopUp = false; dragFeature.handlers['drag'].stopClick = false; dragFeature.handlers['feature'].stopDown = false; dragFeature.handlers['feature'].stopUp = false; dragFeature.handlers['feature'].stopClick = false; var click = new OpenLayers.Control.Click(); map.addControl(click); click.activate(); selectControl = new OpenLayers.Control.SelectFeature([layer], { clickout: true, toggle: false, multiple: false, hover: false, toggleKey: "ctrlKey", // ctrl key removes from selection multipleKey: "shiftKey" // shift key adds to selection }); var marker = new OpenLayers.Layer.Markers("Markers"); map.addLayer(marker); var p1 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p1.png"); var p2 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p2.png"); var p3 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p3.png"); var p4 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p4.png"); var p5 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p5.png"); var p6 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p6.png"); var p6a = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p6a.png"); var p7 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p7.png"); var p8 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p8.png"); var p9 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p9.png"); var p10 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p10.png"); var p11 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p11.png"); var p12 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p12.png"); var p13 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p13.png"); var p14 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p14.png"); var p14a = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p14a.png"); var p15 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p15.png"); var p16 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p16.png"); var p17 = new OpenLayers.Icon("../openlayers/img/fahrzeuge/p17.png"); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.37585, 52.51008).transform(P4326, P900913), p1)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.35016, 52.50311).transform(P4326, P900913), p2)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.27956, 52.51872).transform(P4326, P900913), p3)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.21976, 52.51351).transform(P4326, P900913), p4)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.19821, 52.46823).transform(P4326, P900913), p5)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.28578, 52.45255).transform(P4326, P900913), p6)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.28478, 52.45256).transform(P4326, P900913), p6a)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.26911, 52.40355).transform(P4326, P900913), p7)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.17405, 52.33031).transform(P4326, P900913), p8)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.26559, 52.29786).transform(P4326, P900913), p9)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.29237, 52.32011).transform(P4326, P900913), p10)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.28873, 52.35061).transform(P4326, P900913), p11)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.34564, 52.43596).transform(P4326, P900913), p12)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.36096, 52.44661).transform(P4326, P900913), p13)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.38636, 52.47179).transform(P4326, P900913), p14)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.38975, 52.47054).transform(P4326, P900913), p14a)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.44434, 52.50057).transform(P4326, P900913), p15)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.41490, 52.52062).transform(P4326, P900913), p16)); marker.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(13.35062, 52.51475).transform(P4326, P900913), p17)); map.addControl(selectControl); selectControl.activate(); /* ################################################################################ Fahrzeuge ################################################################################### */ var fahrzeuge = []; // P1 var A736 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.37585, 52.51008).transform(P4326, P900913)); A736.attributes = { name: "73/06", mstatus: "0", icon: "../openlayers/img/fahrzeuge/rtw.png", radius: 20 }; //P2 var A8541 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.35016, 52.50311).transform(P4326, P900913)); A8541.attributes = { name: "85/41", mstatus: "0", icon: "../openlayers/img/fahrzeuge/ktw.png", radius: 20 }; //P3 var A8561 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.27956, 52.51872).transform(P4326, P900913)); A8561.attributes = { name: "85/61", mstatus: "0", icon: "../openlayers/img/fahrzeuge/ktw.png", radius: 20 }; //p4 var A738 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.21976, 52.51351).transform(P4326, P900913)); A738.attributes = { name: "73/08", mstatus: "0", icon: "../openlayers/img/fahrzeuge/rtw.png", radius: 20 }; //P5 var A8961 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.19821, 52.46823).transform(P4326, P900913)); A8961.attributes = { name: "89/61", mstatus: "0", icon: "../openlayers/img/fahrzeuge/mobsan_ktw.png", radius: 20 }; //frei var A89a = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.20087, 52.44148).transform(P4326, P900913)); A89a.attributes = { name: "76/14", mstatus: "0", icon: "../openlayers/img/fahrzeuge/krad.png", radius: 20 }; //frei var A8931 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.24756, 52.46711).transform(P4326, P900913)); A8931.attributes = { name: "89/3*", mstatus: "0", icon: "../openlayers/img/fahrzeuge/mobsan_ktw.png", radius: 20 }; //p6 var A762 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.28578, 52.45255).transform(P4326, P900913)); A762.attributes = { name: "76/02", mstatus: "0", icon: "../openlayers/img/fahrzeuge/krad.png", radius: 20 }; //p7 var A8532 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.26911, 52.40355).transform(P4326, P900913)); A8532.attributes = { name: "85/32", mstatus: "0", icon: "../openlayers/img/fahrzeuge/ktw.png", radius: 20 }; //pfrei var A7613 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.24775, 52.38110).transform(P4326, P900913)); A7613.attributes = { name: "76/13", mstatus: "0", icon: "../openlayers/img/fahrzeuge/krad.png", radius: 20 }; //p8 var A85a = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.17405, 52.33031).transform(P4326, P900913)); A85a.attributes = { name: "85/01", mstatus: "0", icon: "../openlayers/img/fahrzeuge/ktw.png", radius: 20 }; //p9 var A85b = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.26559, 52.29786).transform(P4326, P900913)); A85b.attributes = { name: "85/02", mstatus: "0", icon: "../openlayers/img/fahrzeuge/ktw.png", radius: 20 }; //p10 var A8952 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.29237, 52.32011).transform(P4326, P900913)); A8952.attributes = { name: "89/52", mstatus: "0", icon: "../openlayers/img/fahrzeuge/mobsan_ktw.png", radius: 20 }; //p11 var A85c = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.28873, 52.35061).transform(P4326, P900913)); A85c.attributes = { name: "85/03", mstatus: "0", icon: "../openlayers/img/fahrzeuge/ktw.png", radius: 20 }; //p12 var A85d = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.34564, 52.43596).transform(P4326, P900913)); A85d.attributes = { name: "Rhein-Ruhr", mstatus: "0", icon: "../openlayers/img/fahrzeuge/ktw.png", radius: 20 }; //p13 var A834 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.36096, 52.44661).transform(P4326, P900913)); A834.attributes = { name: "73/04", mstatus: "0", icon: "../openlayers/img/fahrzeuge/rtw.png", radius: 20 }; //p14 var A76u = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.38636, 52.47179).transform(P4326, P900913)); A76u.attributes = { name: "Quad 76/*", mstatus: "0", icon: "../openlayers/img/fahrzeuge/krad.png", radius: 20 }; //p14a var A85e = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.38975, 52.47054).transform(P4326, P900913)); A85e.attributes = { name: "Duesseldorf", mstatus: "0", icon: "../openlayers/img/fahrzeuge/ktw.png", radius: 20 }; //14b var A761 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.40711, 52.48247).transform(P4326, P900913)); A761.attributes = { name: "76/01", mstatus: "0", icon: "../openlayers/img/fahrzeuge/krad.png", radius: 20 }; //14c var A76a = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.42470, 52.48616).transform(P4326, P900913)); A76a.attributes = { name: "76/03", mstatus: "0", icon: "../openlayers/img/fahrzeuge/krad.png", radius: 20 }; //p15 var A8951 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.44434, 52.50057).transform(P4326, P900913)); A8951.attributes = { name: "89/51", mstatus: "0", icon: "../openlayers/img/fahrzeuge/mobsan_ktw.png", radius: 20 }; //p16 var A85x = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.41490, 52.52062).transform(P4326, P900913)); A85x.attributes = { name: "85/*", mstatus: "0", icon: "../openlayers/img/fahrzeuge/ktw.png", radius: 20 }; //p16a var A7611 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.40964, 52.52897).transform(P4326, P900913)); A7611.attributes = { name: "76/11", mstatus: "0", icon: "../openlayers/img/fahrzeuge/krad.png", radius: 20 }; //p16b var A7612 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.37491, 52.52290).transform(P4326, P900913)); A7612.attributes = { name: "76/12", mstatus: "0", icon: "../openlayers/img/fahrzeuge/krad.png", radius: 20 }; //p17 var A85f = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(13.35062, 52.51475).transform(P4326, P900913)); A85f.attributes = { name: "Rhein-Ruhr", mstatus: "0", icon: "../openlayers/img/fahrzeuge/ktw.png", radius: 20 }; fahrzeuge.push(A736); fahrzeuge.push(A8541); fahrzeuge.push(A8561); fahrzeuge.push(A738); fahrzeuge.push(A8961); fahrzeuge.push(A76a); fahrzeuge.push(A762); fahrzeuge.push(A8532); fahrzeuge.push(A7613); fahrzeuge.push(A85a); fahrzeuge.push(A85b); fahrzeuge.push(A8952); fahrzeuge.push(A85c); fahrzeuge.push(A85d); fahrzeuge.push(A834); fahrzeuge.push(A76u); fahrzeuge.push(A85e); fahrzeuge.push(A761); fahrzeuge.push(A89a); fahrzeuge.push(A8951); fahrzeuge.push(A85x); fahrzeuge.push(A7611); fahrzeuge.push(A7612); fahrzeuge.push(A85f); layer.addFeatures(fahrzeuge); /*######################################################################################################## ########################################################################################################## ########################################################################################################## */ layer.events.on({ "featureselected": function(e) { var lonlat = map.getLonLatFromViewPortPx(e.xy); showSelectedStatus(e.feature); }, "featureunselected": function(e) { showUnSelectedStatus(e.feature); } }); } OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { defaultHandlerOptions: { 'single': true, 'double': false, 'pixelTolerance': 0, 'stopSingle': false, 'stopDouble': false }, initialize: function(options) { this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions); OpenLayers.Control.prototype.initialize.apply( this, arguments); this.handler = new OpenLayers.Handler.Click( this, { 'click': this.trigger }, this.handlerOptions); }, trigger: function(e) { if (document.getElementById('pointToggle').checked == true) { var lonlat = map.getLonLatFromViewPortPx(e.xy); var features = []; var myMarker = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat)); var MarkerLabel = document.getElementById("Name").value; var MarkerStatus = document.getElementById("mstatus").value; var MarkerIcon = document.getElementById("Icon").value; myMarker.attributes = { name: MarkerLabel, mstatus: MarkerStatus, icon: "../openlayers/img/fahrzeuge/" + MarkerIcon + ".png", radius: 20 }; features.push(myMarker); layer.addFeatures(features); } } }); function showSelectedStatus(feature) { selectedFeature = feature; document.getElementById("status").innerHTML = "Das ausgewählte Objekt befindet sich an dieser Position " + feature.geometry.getBounds().getCenterLonLat(); } function showUnSelectedStatus(feature) { document.getElementById("status").innerHTML = "Objekt " + feature.id; selectedFeature = "None"; } function DelMarker() { layer.removeFeatures(layer.selectedFeatures); } function EditMarker() { if (selectedFeature != "None") { layer.removeFeatures(layer.selectedFeatures); var features = []; var myMarker = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(selectedFeature.geometry.getBounds().getCenterLonLat().lon, selectedFeature.geometry.getBounds().getCenterLonLat().lat)); var MarkerLabel = document.getElementById("Name").value; var MarkerStatus = document.getElementById("mstatus").value; var MarkerIcon = document.getElementById("Icon").value; myMarker.attributes = { name: MarkerLabel, mstatus: MarkerStatus, icon: "../openlayers/img/fahrzeuge/" + MarkerIcon + ".png", radius: 10 }; features.push(myMarker); layer.addFeatures(features); } } function toggleControl(element) { for (key in controls) { var control = controls[key]; if (element.value == key && element.checked) { control.activate(); } else { control.deactivate(); } } } </script> </head> <body onload="init()"> <div id="map" class="smallmap"></div> <div id="docs"> <!-- Buttons und Felder zum bearbeiten 1. verschieben 2. erstellen 3. name 4. icon 5. löschen 6. ändern --> <input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);" checked="checked" > <label for="noneToggle">verschieben & bearbeiten |</label> <input type="radio" name="type" value="point" id="pointToggle" > <label for="pointToggle">anlegen |</label> <label for="Name"> Name</label> <input id="Name" type="text" size="5" maxlength="5" name="Name" value="Name" onchange="update()" > <label for="mstatus"> Status</label> <select name="mstatus" id="mstatus"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> <label for="Icon">Icon</label> <select name="Icon" id="Icon"> <option value="atw">ATW</option> <option value="krad">Krad</option> <option value="ktw">KTW</option> <option value="mobsan_ktw">MobSan KTW</option> <option value="mtw">MTW</option> <option value="rtw">RTW</option> <option value="SanStation">SanStation</option> <option value="blank">Andere</option> </select> <button onclick="DelMarker();">Löschen</button> <button onclick="EditMarker();">Ändern</button><br > </div> <div id="status"></div> <script type="text/javascript" src="http://view.binlayer.com/ad-12085.js"></script></body> </html>