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>
</body>
</html>