<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>