Hallo, ich habe mittels OpenLayers auf eine Karte Marker gesetzt. Diese Marker sollen nun ab einem bestimmten Zoomgrad angezeigt werden. Jetzt möchte ich den Zoograd nach jeder Betätigung des Mausrades oder der Pan-Zoombar auslesen. Kann mir jemand einen Tip geben, wie ich das angehen kann? Vielen Dank Jörg
Hallo, zum auslesen vom Zoomgrad kannst du folgende Funktion benutzen: var zoom = map.getZoom(); wie das jedoch einem Event hinterlegt wird weiss ich nicht genau. Schau Dir auch den Control MousePosition an. OpenLayers.Control.MousePosition(), Gruss Zapfen
Hallo, den event listener registrierst Du beim erstellen des Map Objekts.
map = new OpenLayers.Map ("map", { eventListeners: { "zoomend": mapEvent, } } );
Und der Funktionsprototype sieht dann so aus:
function mapEvent (event) {}
Grüßle, detlef
Vielen Dank erstmal für die Tips !!! Der Gedanke von “zottel” scheint die Richtung zu sein, da ich die Anweisungen von “zapfen” schon im Code integriert habe. Allerdings fehlen noch ein paar Infos: ** Zuerst wird die Map aufgebaut:** var control = new OpenLayers.Control(); var navControl = new OpenLayers.Control.Navigation(); var panzoom = new OpenLayers.Control.PanZoomBar(); navControl.deactivate; var map = new OpenLayers.Map(‘map’, {resolution: 0.703125, numZoomLevels: 9, minZoomLevel: 5, maxZoomLevel: 9}, { control: [new OpenLayers.Control.Attribution(), panzoom]}); map.addControl(navControl); // aktuelle Mausposition rechts, unten anzeigen var MousePos = new OpenLayers.Control.MousePosition(); //an die aktuelle map binden map.addControl(MousePos); ** dann der Layer darübergelegt:** var wms = new OpenLayers.Layer.WMS( “OpenLayers WMS”, “http://labs.metacarta.com/wms/vmap0”, {layers: ‘basic’, transparent: ‘on’} ); map.addLayers([wms]); dann habe ich den Event : map.events.register(‘zoomend’, null, displayZoom(map, geo_places, geo_data)); hier wird displayZoom() aufgerufen. In displayZoom() wird der Layer Markers aufgebaut. Die einzelenen Daten(lan, lot, Content usw.) halte ich in zwei JS-Array’s vor. Zu jedem einzelen Marker existiert ein Popup, welches beim überfahren mit der Maus(mouseover)aufklappt und beim zweiten überfahren zuklappt. Da ich nun auf der Übersicht (Europakarte) im ersten Aufruf(zoomlevel 4) zu viele Marker dargestellt bekomme, will ich diese Marker erst in tieferen Zoomlevels (5 oder 6) anzeigen lassen. Ab hier versuche ich eben den aktuellen, nach dem Zoom eingetreten Zoomlevel auszulesen. Das klappt aber wahrscheinlich nur über ein Event oder Handler ?? Viele Grüße Jörg
Du darfst keine Parameter beim binden des events angeben. Das muss so aussehen:
map.events.register('zoomend', null, displayZoom);
Wenn du die drei variablen nicht global deklarieren willst, musst du sie in ein Objekt packen und dies als zweiten Parameter, der jetzt null ist, angeben. Grüßle, detlef
Vielen Dank Detlef → Zottel !!! Das Zoomen funktioniert prima bis auf das Herauszoomen. Dort bleiben alle Marker abgebildet, die im Zoomlevel 1-5 nicht angezeigt werden sollen. Wahrscheinlich muss vor jeder neuen Aunsicht im nächst höheren Zoomlevel der Layer Markers oder jeder einzele Marker gelöscht werden. Schau wir mal !! Viele Grüße Jörg
Hallo nochmal, was passiert eigentlich bei einem Zoom, wie oben beschrieben, wennn pro Marker noch je ein Popup anhängt?Existieren die noch irgendwo, oder kann man die vernachlässigen? Jörg
Die Marker sind sozusagen fest mit dem Marker-Layer verbunden. Wenn sie in niedrigen Zoomstufen nicht sichtbar sein sollen, kannst Du den Layer über das visibility Attribut ausblenden.
Die Popups sind ja durch addPopup an die Karte gebunden. Wenn man sie nicht durch removePopup wieder frei gibt, sobald sie nicht mehr benötigt werden hätte man evtl. ein Speicherloch. Durch ein clearMarkers auf den Markerlayer werden die Popups nicht entfernt. Grüßle, detlef
Hallo Detlef, Die Marker sind sozusagen fest mit dem Marker-Layer verbunden. Wenn sie in niedrigen Zoomstufen nicht sichtbar sein sollen, kannst Du den Layer über das visibility Attribut ausblenden. Mit jedem Zoomlevel (5, 6, 7) möchte ich mehr Marker in die Karte legen, weil dann der Abstand zwischen den Markierungspunkten so groß ist, dass man vernüftig darauf navigieren kann. Wenn ich nun wieder in höhere Zoomlevel(von 6 auf 5 , von 5 auf 4 usw.) gelange, dann sollen die zuvor hinzugefügten Marker wieder verschwinden. Jetzt die Fragen: sollte man (oder kann man) - nach jedem Zoom den ganzen Layer löschen und einen neuen Layer Markers mit neuen Markern auflegen? - jeden nicht dazugehörenden Marker aus dem Layer löschen, je nachdem welchen Zoomlevel man gerade vorliegen hat? Viele Grüße Jörg
Hallo Jörg,
Ja,
Ja 
Funktionieren tut beides. Was von der Performace besser ist musst Du ausprobieren. Ich vermute, das das löschen einzelner Marker schneller geht, da laut Profiler ein großer Teil der Gesamtzeit mit der Änderung des DOMs drauf geht. So dauert z.B. die Darstellung von 500 Markern mit teils aufwendigen Popups bei meinem Rechner rund fünf Sekunden. Um der Markerfülle Herr zu werden lade ich sie dynamisch kachelweise nach und cache die Daten. Sobald die Marker zu weit außerhalb es Sichtfelds sind lösche ich die Marker. Das funktioniert eigentlich ganz flüssig. Grüßle, detlef
Hallo Detlef, es funktioniert prima ! Ich lösche den Layer und baue ihn je nach Zoomgrad wieder auf. So werden mir jeweils die erforderlichen Marker angezeigt. Wo soll ich denn die gute Flasche Wein hinschicken? Auf jeden Fall ertmal ein herzliches Dankeschön! Gruß Jörg
Hallo Jörg, freut mich zu hören, gern geschehen. Grüßle, detlef
Denkste!! der IE macht Probleme : wenn nach dem ersten Aufbau der Layer auf einen Marker navigiert wird, der ein größerers Popup (meinetwegen nach rechts oben) öffnet, verschiebt sich die Map. Danach kann ich durch überfahren des Markers mit der Maus den Popup nicht mehr schließen. Wenn ich zuerst, nach dem Aufbau der Marker, mit der Maus hineinzoome und dann den selben Marker 2 mal anfahre, funktionert das Schließen des Popups. Im Firefox und Opera tritt dieses Probleme nicht. Für die erste Darstellung der Marker eird eine Funktion displayZoom() aufgerufen.
function displayZoom() { var i=0; var j=0; zoomgrad= map.getZoom(); alert(zoomgrad); if (zoomgrad < 4) { zoomgrad = 4; map.zoomTo(zoomgrad); } places_len = geo_places.length; data_len = geo_data.length; markers = new OpenLayers.Layer.Markers( "Markers" ); map.addLayer(markers); markers.destroy(); markers = new OpenLayers.Layer.Markers( "Markers" ); map.addLayer(markers); markers.setVisibility(true); var size = new OpenLayers.Size(14,14); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var lonlat = map.getLonLatFromPixel(offset); var icon = new OpenLayers.Icon('../images/flag_yellow.png',size,offset); var keyword = this.fulltext; this.fulltext = "&keyword=" + this.fulltext; var toggle = "&toggle=1"; var stype = "&s_type=string"; for (i=0; i < places_len; i=i+6) { if (zoomgrad > 3) { if ((geo_places[i+3] == 1) ) { numberRecords=""; cloned_Icon= icon.clone(); marker = new OpenLayers.Marker(new OpenLayers.LonLat(geo_places[i], geo_places[i+1]), cloned_Icon); marker.setOpacity(1); popupContentHTML = ""; popupContentHTML = popupContentHTML + "<h6>"; popupContentHTML = popupContentHTML + geo_places[i+2] + ' : </h6>'; for (j=0; j < data_len; j=j+6) { if (geo_data[j+2] == geo_places[i+2]) { popupContentHTML = popupContentHTML + '<br /><a href="/test/index.html?id=' + geo_data[j+0] + this.fulltext + toggle + stype +'">'+geo_data[j+5]+'</a>'; numberRecords++; } } //popupContentHTML = popupContentHTML + "</h6>"; addMarker(markers, geo_places[i], geo_places[i+1], popupContentHTML, marker, map, numberRecords) } } } }
nach einem Zoom mit dem Mausrad wird über das Event:
map.events.register('zoomend', null, displayAfterZoom);
die zweite Funktion aufgerufen :
function displayAfterZoom() { var i =0; var j=0; zoomgrad= map.getZoom(); map.zoomTo(zoomgrad); //alert(zoomgrad); places_len = geo_places.length; data_len = geo_data.length; //alert(this.feature); markers.destroy(); //map.removePopup(this.popup); markers = new OpenLayers.Layer.Markers( "Markers" ); // markers an die aktuelle map binden map.addLayer(markers); markers.setVisibility(true); var size = new OpenLayers.Size(14,14); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var lonlat = map.getLonLatFromPixel(offset); var icon = new OpenLayers.Icon('../images/flag_yellow.png',size,offset); var keyword = this.fulltext; this.fulltext = "&keyword=" + this.fulltext; var toggle = "&toggle=1"; var stype = "&s_type=string"; for (i=0; i < places_len; i=i+6) { if (zoomgrad > 3) { if ((geo_places[i+3] == 1) ) { // Position des Markers festlegen numberRecords=""; cloned_Icon= icon.clone(); marker = new OpenLayers.Marker(new OpenLayers.LonLat(geo_places[i], geo_places[i+1]), cloned_Icon); marker.setOpacity(1); popupContentHTML = ""; popupContentHTML = popupContentHTML + "<h6>"; popupContentHTML = popupContentHTML + geo_places[i+2] + ' : </h6>'; for (j=0; j < data_len; j=j+6) { if (geo_data[j+2] == geo_places[i+2]) { popupContentHTML = popupContentHTML + '<br /><a href="/test/index.html?id=' + geo_data[j+0] + this.fulltext + toggle + stype +'">'+geo_data[j+5]+'</a>'; numberRecords++; } } //popupContentHTML = popupContentHTML + "</h6>"; addMarker(markers, geo_places[i], geo_places[i+1], popupContentHTML, marker, map, numberRecords) } }
} dazu noch die addMarker Funktion:
function addMarker(layer, lon, lat, popupContentHTML, marker, map, numberRecords) { var ll = new OpenLayers.LonLat((lon), (lat)); var feature = new OpenLayers.Feature(layer, ll); var mark = 0; this.feature = feature; feature.closeBox = false; feature.multiple = true; var ySize = (numberRecords*36)+90; feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(160, ySize) } ); feature.data.popupContentHTML = popupContentHTML; feature.data.overflow = "hidden"; var marker = new OpenLayers.Marker(ll); marker.feature = feature; var markerOver = function(evt) { if (this.popup == null) { if (markMarker == 0 && mark == 0) { this.popup = this.createPopup(this.closeBox); map.addPopup(this.popup); this.popup.show(); markMarker = 1; mark=1; } .... } marker.events.register("mouseover", feature, markerOver); layer.addMarker(marker); } {
Gruß Jörg
Im dritten Codeschnipsel muss es
for (i=0; i < places_len; i=i+6) { if (zoomgrad > 7){ ...
Gruß Jörg
Wie kann ich denn die Popups löschen? Gruß Jörg
Hallo Jörg, durch deine Code-Schnipsel steigt man nicht so einfach durch. Kann aber auch daran liegen, das ich von JavaScript und Openlayers eigentlich gar keine Ahnung habe 
Hast Du nicht irgendwo ein Repository oder ein Webseite, wo man sich das ganze am Stück ansehen könnte? Zu deinen Problemen habe ich keine direkte Lösung, aber zumindest ein paar Anmerkungen. Zum löschen von Popups: deineMap.removePopup (deinPopup); Ich packe mir dazu die Popups bei der Generierung in ein Array und wenn sie nicht mehr gebraucht werden gehe ich dann über das Array und löschen sie ein nach dem anderen. Solange sie eventuell noch gebraucht werden könnten aber nicht sichtbar sein sollen “toggle” ich die Sichtbarkeit. Mein onMarkerClick sieht so aus:
onMarkerClick = function (event) { if (this.popup == null) { this.popup = this.createPopup(true); this.popup.padding = 2; osmWolfMap.map.addPopup(this.popup, false); osmWolfMap.markers.popups.push (this.popup); this.popup.show(); } else { this.popup.toggle(); } OpenLayers.Event.stop(event); };
Zum Problem des nicht-Schließens bei dem Überfahren mit dem Mauszeiger: Solltest Du die Funktion das das Fenster verschoben wird, sobald das Popup nicht in einer Ecke angezeigt werden kann aktiviert habe, würde ich es einfach deaktivieren. Dein Popup müsste über die Hälfte des Bildschirms ausfüllen, bevor es zur Verschiebung kommt. Das sollte in den meisten Fällen reichen. Außerdem finde ich es vom Anwenderstandpunkt nicht so toll, das sich das Popup beim überfahren schließt. Da Du ja auch Text in Deinen Popups darstellst, will der Nutzer den evtl. auch durch Markieren mit der Maus kopieren. Das ist, wenn das Popup beim Überfahren geschlossen wird aber nicht möglich. Und dann gibt es in deinem Code das folgende, wo ich mich frage was das soll:
markers = new OpenLayers.Layer.Markers( "Markers" ); map.addLayer(markers); markers.destroy(); markers = new OpenLayers.Layer.Markers( "Markers" ); map.addLayer(markers);
Außerdem habe ich gesehen, das Du in deinem Code einige alerts drin hast. Diese können bei Problemen mit dem event-handling das Ergebnis verfälschen. Solange die alerts drin sind, die man ja anklicken muss funktioniert es, sobald man sie raus nimmt nicht mehr. Es ist sinnvoller sich eine logger-funktion zu schreiben, die debug-Ausgaben in ein textarea schreibt. Grüßle, detlef
Hallo Detlef, also, die Fehlfunktion bezieht sich nur auf den IE 7, und da auch nur nach dem ersten Aufruf der Marker, wenn das zu öffnende Popup die map verschiebt. In allen anderen Browsern funktioniert es. Vielleicht kann ich es Dir so erklären: 1. Beim Aufruf von index.html wird die Map in der Javascript-Funktion geo_init() erstellt und der Layer “countries_simpl” darüber gelegt. 2. Dann werden die Marker mittels der Funktion displayZoom() zum ersten mal gesetzt. Bemerkung: map.addLayer(markers); markers.destroy(); markers = new OpenLayers.Layer.Markers( “Markers” ); map.addLayer(markers); existiert nur zu Testzwecken, da bei dem nächsten Aufruf mit displayAfterZoom über das Event die Sache mit dem mouseover ja funktioniert. 3. Wenn nun die Maus auf einen Marker bewegt wird, dann geht ein Popup auf, in dem eine Ortsangabe und die dazugehörigen Einträge aus einer Datenbank als Lin dargestellt werden, Navigiere ich nun auf einen Link und klicke darauf, dann öffnet sich eine Seiten mit den entsprechenden Einträgen eine Archives. Live anzusehen auf http://www.zwangsarbeit.eu/ ->> dort hast Du oben Karteireiter. Hier bitte auf Archivbestände klicken. 4. Wenn ich jetzt mit dem Mausrad hineinzoome, dann kann ich auf den entsprechenden Marker (hier Berlin) navigieren, die Map wird verschoben und das püopupmit den Links zu Berlin wird angezeigt.Beim zweiten navigieren auf den Marker verschwindet das Popup wieder. Was seltsamerweise bei der Initialisierung nicht funktioniert. 5. Wenn ich weiter hineinzoome werden mir nun mehr Orte mit Archiveinträgen angezeigt. Das dient der besseren Übersicht. 6. Zoome ich retoure (also von Zoomlevel 7 auf 6 - 5 usw.) Dann wird die Anzahl der anzuzeigenden Orte wieder reduziert. Habe ich aber ein Popup geöffnet, zu dem in einem niedrigeren Zoomlevel kein Ort (Marker) abgebildet wird, dann bleibt das Popup stehen. Dieses oder eben alle will ich eliminieren! 7. Die “alerts” in dem Code dienen nur dem testen. Wenn man sie herausnimmt, dann funktioniert der Code genauso. 8. Aus den Funktionen displayZoom() und displayAfterZoom() wird die Funktion
function addMarker(layer, lon, lat, popupContentHTML, marker, map, numberRecords) { var ll = new OpenLayers.LonLat((lon), (lat)); var feature = new OpenLayers.Feature(layer, ll); var mark = 0; this.feature = feature; feature.closeBox = false; feature.multiple = true; var ySize = (numberRecords*36)+90; feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(160, ySize) } ); feature.data.popupContentHTML = popupContentHTML; feature.data.overflow = "hidden"; var marker = new OpenLayers.Marker(ll); marker.feature = feature; var markerOver = function(evt) { // markMarker = irgendein Marker ist markiert // mark = dieser Marker ist markiert if (this.popup == null) { if (markMarker == 0 && mark == 0) { this.popup = this.createPopup(this.closeBox); map.addPopup(this.popup); this.popup.show(); markMarker = 1; mark=1; } else if (markMarker == 0 && mark == 1) { markMarker = 1; mark = 1; } else if (markMarker == 1 && mark == 0) { markMarker = 1; mark = 0; } else if (markMarker == 1 && mark == 1) { markMarker = 1; mark = 1; } } else if (this.popup != null) { if (markMarker == 0 && mark == 0) { this.popup.toggle(); this.popup.show(); markMarker = 1; mark = 1; } else if (markMarker == 0 && mark == 1) { this.popup.visible(true); markMarker = 0; mark = 0; } else if (markMarker == 1 && mark == 0) { this.popup.visible(false); markMarker = 1; mark = 0; } else if (markMarker == 1 && mark == 1) { this.popup.toggle(); this.popup.visible(false); markMarker = 0; mark = 0; } } }; marker.events.register("mouseover", feature, markerOver); layer.addMarker(marker); }
aufgerufen. Hie werden die Marker gesetzt und die Popup’s an die Marker gebunden. Die Variablen markMarker = 0; sagen aus bei 0 ist kein anderer Marker ein Popup geöffnet hat. Bei 1 ist ein anderer Marker einen Popup geöffnet hat. mark = 0; besagt, das der eigenen Marker kein Popup geöffent hat und mark=1 heißt, daß der eigene Marker ein Popup geöffnet hat. Du kannst Dir die ganze Geschichte ja mal anschauen. Viele Grüße Jörg
Hallo Jörg, ich habe den Code mal ein wenig abgeändert. Es ist jetzt zwar nicht mehr genau das was Du ursprünglich wolltest, aber es funktioniert Um zu sehen, was ich geändert habe solltest Du einen diff drüber machen, da ich auch einige Sachen angepasst habe um es bei mir ausprobieren zu können. Bislang habe ich es nur mit dem FireFox getestet. Die FramedCloud Marker machen anscheinend Probleme. Die “Nase” an der Sprechblase ist ja eine Grafik die mehr oder weniger quadratisch ist. Diese liegt im DOM über den Markern und teilweise auch von der Fläche. Folglich schluckt sie alle Events die eigentlich an den Marker gehen sollten.Ich habe es umschifft, indem ich einfach einen anderen Popup-Type gesetzt habe. Ein weiteres Problem könnte gewesen sein, das Du in der init_geo function einen Marker-Layer erstellt hast und dann direkt im displayZoom einen zweiten. Des weiteren habe ich mal eingebaut, das die Popups beim Zommen verschwinden. Wenn Du immer nur ein Popup angezeigt habe willst, musst Du die Popups mit
map.addPopup(this.popup, true);
hinzufügen. Dann wird automatisch ein offenes Popup geschlossen, wenn ein anderes geöffnet wird. Das mit den Überstreichen der Marker hatte ich falsch verstanden. Ich dachte es bezieht sich nicht auf den Marker sondern auf das Popup. Die Funktion, das es mit Überstreichen funktioniert habe ich noch nicht eingebaut. Eigentlich nichts zum Thema, aber ist mir trotzdem aufgefallen 
: die Links in den Popups würde ich target=_blank angeben, damit sich die Links in einem neuen Fenster / Tab öffnen. Ansonsten verlässt man mit dem Anklicken ja die Seite und bei der Rückkehr ist dann die Karte wieder in der Ausgangsposition. Die Berechnung der Fenstergröße der Popups habe ich zugunsten eines ‘autoSize’ rausgekickt. Außerdem habe ich einiges an überflüssigen Code entfernt, da es schwer zu lesen war. Ich hoffe es hilft, Grüßle, detlef
var define_round; var markMarker = 0; function toggle_info(field_id) { if ( document.getElementById(field_id).className == 'infoHidden' ) { document.getElementById(field_id).className = 'infoBox'; } else { document.getElementById(field_id).className = 'infoHidden'; } } // Auf-/Zuklappfunktion Beim Start ist das Feld zugeklappt function hiding(field_id, src_id) { if (document.getElementById(field_id).className == 'infoHidden') { document.getElementById(field_id).className = 'infoBox'; document.getElementById(src_id).src = "/zwangsarbeit/images/up_alt.gif"; } else { document.getElementById(field_id).className = 'infoHidden'; document.getElementById(src_id).src = "/zwangsarbeit/images/down_alt.gif"; } } // Auf-/Zuklappfunktion beim Start ist das Feld aufgeklappt function hide(field_id, src_id) { if (document.getElementById(field_id).className == 'infoBox') { document.getElementById(field_id).className = 'infoHidden'; document.getElementById(src_id).src = "/zwangsarbeit/images/down_alt.gif"; //showed2 = false; } else { document.getElementById(field_id).className = 'infoBox'; document.getElementById(src_id).src = "/zwangsarbeit/images/up_alt.gif"; //showed2 = true; } } /************************************************************************ ************** 12.02.2008 JW Zwangsarbeiterportal ********************** **************************************************************************/ function bund_anzeigen(f) { var staaten_id = f.staat.value; var bundes_id = f.bund.value; var s = 0; var i = 0; var field_disabled = true; //if country was selected empty the array's of federation and district f.bund.options.length = null; f.kreis.options.length = null; for (var j = 0; j <= (bundesland.length-1); j += 3) { if ((bundesland[j+2]) == staaten_id || (bundesland[j+2])== 0) { if (bundesland[j] == 40) { f.bund.options[i] = new Option((bundesland[j+1]), 0, true); } f.bund.options[i] = new Option((bundesland[j+1]), bundesland[j], false); s = 1; i++; } } if (f.bund.options.length > 1) { document.getElementById('bund').disabled = false; document.getElementById('kreis').disabled = true; } else if (f.bund.options.length == 1) { document.getElementById('bund').disabled = true; document.getElementById('kreis').disabled = true; } else { document.getElementById('bund').disabled = true; document.getElementById('kreis').disabled = true; } for (var j = 0; j <= kreis.length-1; j += 3) { if (kreis[j+2] == bundes_id || (kreis[j+2]) == 0) { f.kreis.options[i] = new Option((kreis[j+1]), kreis[j], false, false); if (kreis[j] == 421) { f.kreis.options[i] = new Option((kreis[j+1]), 0, true, true); } i++; } } if (f.kreis.value == 421) { document.getElementById('kreis').disabled = true; document.getElementById('kreis').value = '--- Auswahl ---'; } countries_id = document.getElementById('staat').value; if (countries_id) { document.getElementById('bund').value = 40; } } function kreis_anzeigen(f) { f.kreis.options.length = null; var bundes_id = f.bund.value; var i = 0; for (var j = 0; j <= kreis.length-1; j += 3) { if (kreis[j+2] == bundes_id || (kreis[j+2])== 0) { if (kreis[j] == 421) { f.kreis.options[i] = new Option((kreis[j+1]), 0, true); } f.kreis.options[i] = new Option((kreis[j+1]), kreis[j], false); i++; } } if (f.kreis.options.length > 1) { document.getElementById('kreis').disabled = false; document.getElementById('kreis').selected = 421; } else if (f.kreis.options.length == 1) { document.getElementById('kreis').disabled = true; } else { document.getElementById('kreis').disabled = true; document.getElementById('kreis').value = 421; } fed_id = document.getElementById('bund').value; if (fed_id != 421) { document.getElementById('kreis').value = 421; } } function seite_laden(f) { var kreis_select = f.kreis.value; } function kind_laden(f) { var kind_select = f.kind.value; } function paging($arr, $paging_elem) { } function submitForm( form_id ) { document.getElementById( form_id ).submit(); return true; } function submitHiddenForm( id, url ) { document.getElementById(id).action = url; document.getElementById(id).submit(); return true; } function $paginator(sonderarr) { alert(erg); } // ****************************************************************** var markerPopups = []; function removeMarkerPopups () { for (var i = 0; i < markerPopups.length; i++) map.removePopup (markerPopups[i]); } // Popup auf die Marker erstellen function addMarker(layer, lon, lat, popupContentHTML, marker, map, numberRecords) { var ll = new OpenLayers.LonLat((lon), (lat)); var feature = new OpenLayers.Feature(layer, ll); var mark = 0; this.feature = feature; feature.closeBox = true; feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {'autoSize' : true, 'panMapIfOutOfView' : true}); feature.data.popupContentHTML = popupContentHTML; feature.data.overflow = "hidden"; var marker = new OpenLayers.Marker(ll); marker.feature = feature; onMarkerClick = function (event) { if (this.popup == null) { this.popup = this.createPopup(true); this.popup.padding = 2; map.addPopup(this.popup, false); markerPopups.push (this.popup); this.popup.show(); } else { this.popup.toggle(); this.markMarker = 0; this.mark = 0; } OpenLayers.Event.stop(event); }; marker.events.register("click", feature, onMarkerClick); layer.addMarker(marker); } //******************* // Marker setzten und Popup erstellen function displayZoom() { var i=0; var j=0; removeMarkerPopups (); zoomgrad= map.getZoom(); // alert(zoomgrad); if (zoomgrad < 4) { zoomgrad = 4; } map.zoomTo(zoomgrad); places_len = geo_places.length; data_len = geo_data.length; markers = new OpenLayers.Layer.Markers( "Markers" ); map.addLayer(markers); markers.setVisibility(true); var size = new OpenLayers.Size(14,14); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var lonlat = map.getLonLatFromPixel(offset); var icon = new OpenLayers.Icon('../images/flag_yellow.png',size,offset); var keyword = this.fulltext; this.fulltext = "&keyword=" + this.fulltext; var toggle = "&toggle=1"; var stype = "&s_type=string"; for (i=0; i < places_len; i=i+6) { if (zoomgrad > 3) { if ((geo_places[i+3] == 1) ) { // Position des Markers festlegen numberRecords=0; cloned_Icon= icon.clone(); marker = new OpenLayers.Marker(new OpenLayers.LonLat(geo_places[i], geo_places[i+1]), cloned_Icon); marker.setOpacity(1); popupContentHTML = ""; popupContentHTML = popupContentHTML + "<h6>"; popupContentHTML = popupContentHTML + geo_places[i+2] + ' : </h6>'; for (j=0; j < data_len; j=j+6) { if (geo_data[j+2] == geo_places[i+2]) { popupContentHTML = popupContentHTML + '<br /><a href="/zwangsarbeit/archiv/archivdaten/index.html?id=' + geo_data[j+0] + this.fulltext + toggle + stype +'">'+geo_data[j+5]+'</a>'; numberRecords++; } } //popupContentHTML = popupContentHTML + "</h6>"; addMarker(markers, geo_places[i], geo_places[i+1], popupContentHTML, marker, map, numberRecords) } } } } //******************* function displayAfterZoom() { var i =0; var j=0; removeMarkerPopups (); zoomgrad= map.getZoom(); map.zoomTo(zoomgrad); //alert(zoomgrad); places_len = geo_places.length; data_len = geo_data.length; if (markers) { markers.destroy(); } markers = new OpenLayers.Layer.Markers( "Markers" ); // markers an die aktuelle map binden map.addLayer(markers); markers.setVisibility(true); var size = new OpenLayers.Size(14,14); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var lonlat = map.getLonLatFromPixel(offset); var icon = new OpenLayers.Icon('../images/flag_yellow.png',size,offset); var keyword = this.fulltext; this.fulltext = "&keyword=" + this.fulltext; var toggle = "&toggle=1"; var stype = "&s_type=string"; for (i=0; i < places_len; i=i+6) { if (zoomgrad > 3) { if ((geo_places[i+3] == 1) ) { // Position des Markers festlegen numberRecords=0; cloned_Icon= icon.clone(); marker = new OpenLayers.Marker(new OpenLayers.LonLat(geo_places[i], geo_places[i+1]), cloned_Icon); marker.setOpacity(1); popupContentHTML = ""; popupContentHTML = popupContentHTML + "<h6>"; popupContentHTML = popupContentHTML + geo_places[i+2] + ' : </h6>'; for (j=0; j < data_len; j=j+6) { if (geo_data[j+2] == geo_places[i+2]) { popupContentHTML = popupContentHTML + '<br /><a href="/zwangsarbeit/archiv/archivdaten/index.html?id=' + geo_data[j+0] + this.fulltext + toggle + stype +'">'+geo_data[j+5]+'</a>'; numberRecords++; } } //popupContentHTML = popupContentHTML + "</h6>"; addMarker(markers, geo_places[i], geo_places[i+1], popupContentHTML, marker, map, numberRecords) } } if (zoomgrad > 5) { if ((geo_places[i+3] == 1) || (geo_places[i+3] == 2) ) { // Position des Markers festlegen numberRecords=0; cloned_Icon= icon.clone(); marker = new OpenLayers.Marker(new OpenLayers.LonLat(geo_places[i], geo_places[i+1]), cloned_Icon); marker.setOpacity(1); popupContentHTML = ""; popupContentHTML = popupContentHTML + "<h6>"; popupContentHTML = popupContentHTML + geo_places[i+2] + ' : </h6>'; for (j=0; j < data_len; j=j+6) { if (geo_data[j+2] == geo_places[i+2]) { popupContentHTML = popupContentHTML + '<br /><a href="/zwangsarbeit/archiv/archivdaten/index.html?id=' + geo_data[j+0] + this.fulltext + toggle + stype +'">'+geo_data[j+5]+'</a>'; numberRecords++; } } //popupContentHTML = popupContentHTML + "</h6>"; addMarker(markers, geo_places[i], geo_places[i+1], popupContentHTML, marker, map, numberRecords) } } if (zoomgrad > 7) { if ((geo_places[i+3] == 1) || (geo_places[i+3] == 2) || (geo_places[i+3] == 3) ) { // Position des Markers festlegen numberRecords=0; cloned_Icon= icon.clone(); marker = new OpenLayers.Marker(new OpenLayers.LonLat(geo_places[i], geo_places[i+1]), cloned_Icon); marker.setOpacity(1); popupContentHTML = ""; popupContentHTML = popupContentHTML + "<h6>"; popupContentHTML = popupContentHTML + geo_places[i+2] + ' : </h6>'; for (j=0; j < data_len; j=j+6) { if (geo_data[j+2] == geo_places[i+2]) { popupContentHTML = popupContentHTML + '<br /><a href="/zwangsarbeit/archiv/archivdaten/index.html?id=' + geo_data[j+0] + this.fulltext + toggle + stype +'">'+geo_data[j+5]+'</a>'; numberRecords++; } } //popupContentHTML = popupContentHTML + "</h6>"; addMarker(markers, geo_places[i], geo_places[i+1], popupContentHTML, marker, map, numberRecords) } } } } function init_geo() { // Kartenmitte und Zoomstufe var lon = 15; var lat = 53; var i =0; var j=0; var popupContentHTML = ""; var markMarker = 0; var places_len; // Definieren der Map incl controls var control = new OpenLayers.Control(); var navControl = new OpenLayers.Control.Navigation(); var panzoom = new OpenLayers.Control.PanZoomBar(); var mousePos = new OpenLayers.Control.MousePosition(); var map = new OpenLayers.Map('map', {resolution: 0.703125, numZoomLevels: 9}, { control: [new OpenLayers.Control.Attribution(), panzoom, navControl, mousePos]}); // aktuelle Mausposition var lonlat = map.getLonLatFromPixel(mousePos); // definieren des Markericons var wms = new OpenLayers.Layer.WMS( "Staaten Europas", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic', transparent: 'on'} ); // Definieren der WMS-Map von Ariadne Mapserver //var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://ariadne/cgi-bin/mapserv.sh?map=/depot/www/htdocs/workshop/mapdatei.map", {layers: 'countries,bld,staedte', transparent: 'on'} ); // ZoomBar lang anzeigen map.addLayers([wms]); this.map = map; displayZoom(); map.addControl(new OpenLayers.Control.LayerSwitcher()); //map.events.register('popupclose', null, displayZoom); zoomgrad = map.getZoom(); // Darstellung Europa, zentriert map.setCenter(new OpenLayers.LonLat(lon, lat), zoomgrad); // Zoom auf die maximale Darstelung (wir in Mapfile angegebene) : Darstellung Europa if (!map.getCenter()) map.zoomToMaxExtent(); map.events.register('zoomend', null, displayAfterZoom); }
Hallo Detlef, nachdem ich den Code für die Popup’s eingebaut habe funktioniert die Geschichte. Dein letztes Posting mit meinem modifizierten javascript.js habe ich ausprobiert. Nach dem Aufbau der Marker kann ich beliebig viele Popup’s für einen Marker gleichzeitig öffnen. Ich habe es jetz bei der oben beschriebenen onMarkerClick() Funktion belassen. Ein schönes Wochenende wünscht Dir Jörg !!
An: @Zottel
Hallo,
Mich würde ja brennend der code interessieren, mit dem dynamisch die Marker aus und
eingeblendet werden!!!
(Also die nicht benötigten Marker außerhalb des Sichtbereiches!!
Da ich 200-800 Marker anzeigen muss und das auch noch mit dem IE6 !!!
Dass schafft das System nicht mehr…)
Gruß
Byte