124 lines
4.1 KiB
HTML
124 lines
4.1 KiB
HTML
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
|
|
<head>
|
||
|
|
<style type="text/css">
|
||
|
|
#map {
|
||
|
|
width: 400px;
|
||
|
|
height: 400px;
|
||
|
|
border: 0px;
|
||
|
|
padding: 0px;
|
||
|
|
//position: absolute;
|
||
|
|
}
|
||
|
|
div.event_map_info h1 {
|
||
|
|
font-size: small;
|
||
|
|
}
|
||
|
|
div.event_map_info li {
|
||
|
|
font-size: x-small;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
|
||
|
|
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
|
||
|
|
<!-- -->
|
||
|
|
<link rel="stylesheet" href="http://svn.openlayers.org/trunk/openlayers/theme/default/style.css" />
|
||
|
|
<link rel="stylesheet" href="http://svn.openlayers.org/trunk/openlayers/theme/default/framedCloud.css" />
|
||
|
|
<!-- -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
<!--
|
||
|
|
var map;
|
||
|
|
|
||
|
|
function init(){
|
||
|
|
map = new OpenLayers.Map('map',
|
||
|
|
{ maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
|
||
|
|
numZoomLevels: 19,
|
||
|
|
maxResolution: 156543.0399,
|
||
|
|
units: 'm',
|
||
|
|
projection: new OpenLayers.Projection("EPSG:900913"),
|
||
|
|
displayProjection: new OpenLayers.Projection("EPSG:4326"),
|
||
|
|
//controls: [],
|
||
|
|
});
|
||
|
|
|
||
|
|
var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik (updated weekly)");
|
||
|
|
|
||
|
|
// var layerTah = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
|
||
|
|
|
||
|
|
// map.addLayers([layerMapnik,layerTah]);
|
||
|
|
map.addLayer(layerMapnik);
|
||
|
|
|
||
|
|
OpenLayers.Feature.prototype.popupClass = OpenLayers.Popup.FramedCloud;
|
||
|
|
|
||
|
|
var pois = new OpenLayers.Layer.GML( "My Points", "./textfile.txt",
|
||
|
|
{ format: OpenLayers.Format.Text,
|
||
|
|
projection: new OpenLayers.Projection("EPSG:4326")}
|
||
|
|
);
|
||
|
|
|
||
|
|
map.addLayer(pois);
|
||
|
|
|
||
|
|
// add the popups
|
||
|
|
selectControl = new OpenLayers.Control.SelectFeature(pois,
|
||
|
|
{ onSelect: onFeatureSelect,
|
||
|
|
onUnselect: onFeatureUnselect,
|
||
|
|
toggle: true});
|
||
|
|
|
||
|
|
map.addControl(selectControl);
|
||
|
|
selectControl.activate();
|
||
|
|
|
||
|
|
// we don't need the layerswitch control
|
||
|
|
//map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||
|
|
|
||
|
|
var lonLat = new OpenLayers.LonLat(12.128275, 54.082004).transform(map.displayProjection, map.projection);
|
||
|
|
map.setCenter (lonLat, 12);
|
||
|
|
}
|
||
|
|
|
||
|
|
function onPopupClose(evt) {
|
||
|
|
selectControl.unselect(selectedFeature);
|
||
|
|
}
|
||
|
|
|
||
|
|
function onFeatureSelect(feature) {
|
||
|
|
selectedFeature = feature;
|
||
|
|
var content = '<div class="event_map_info">';
|
||
|
|
content += '<h1>' + feature.attributes.title + '</h1>';
|
||
|
|
/* the description contains six attributes:
|
||
|
|
* time/date
|
||
|
|
* place
|
||
|
|
* address
|
||
|
|
* organisation
|
||
|
|
* details
|
||
|
|
* url
|
||
|
|
*/
|
||
|
|
var items = feature.attributes.description.split('#', 6);
|
||
|
|
content += '<ul>';
|
||
|
|
content += '<li>Wann: ' + items[0] + '</li>';
|
||
|
|
content += '<li>Ort: ' + items[1] + '</li>';
|
||
|
|
content += '<li>Adresse: ' + items[2] + '</li>';
|
||
|
|
content += '<li>Veranstalter: ' + items[3] + '</li>';
|
||
|
|
content += '<li>Details: ' + items[4] + '</li>';
|
||
|
|
content += '<li><a href="' + items[5] + '" title="mehr Informationen">mehr ...</a></li>';
|
||
|
|
content += '</ul></div>';
|
||
|
|
// do naive protection against Javascript.
|
||
|
|
if (content.search("<script") != -1) {
|
||
|
|
content = "Content contained Javascript! Escaped content below.<br />" + content.replace(/</g, "<");
|
||
|
|
}
|
||
|
|
popup = new OpenLayers.Popup.FramedCloud("event",
|
||
|
|
feature.geometry.getBounds().getCenterLonLat(),
|
||
|
|
new OpenLayers.Size(100,100),
|
||
|
|
content,
|
||
|
|
null, true, onPopupClose);
|
||
|
|
feature.popup = popup;
|
||
|
|
map.addPopup(popup);
|
||
|
|
}
|
||
|
|
|
||
|
|
function onFeatureUnselect(feature) {
|
||
|
|
map.removePopup(feature.popup);
|
||
|
|
feature.popup.destroy();
|
||
|
|
feature.popup = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// -->
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body onload="init()">
|
||
|
|
<div id="map"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|