Probleme mit Markern in eingebundenen Karten

Communities Deutschland (Germany)
1

Hallo! Ich habe heute einige Stunden damit verbracht, folgende Probleme zu lösen, leider ohne Erfolg. Ich möchte erstens einen Marker setzen, die Grafik soll aber von mir stammen. Ausgangspunkt ist folgender Code, den ich aus dem OSM-wiki von DE_layers habe:

layer_markers = new OpenLayers.Layer.Markers("Address", { projection: new OpenLayers.Projection("EPSG:4326"),visibility: true, displayInLayerSwitcher: false });                  map.addLayer(layer_markers);  layer_markers.setVisibility(true); addMarker(layer_markers, lon, lat, popuptext);   function addMarker(layer, lon, lat, popupContentHTML) {      var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));     var feature = new OpenLayers.Feature(layer, ll);      feature.closeBox = true;     feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(200, 120) } );     feature.data.popupContentHTML = popupContentHTML;     feature.data.overflow = "hidden";       var marker = new OpenLayers.Marker(ll);     marker.feature = feature;      var markerClick = function(evt) {         if (this.popup == null) {             this.popup = this.createPopup(this.closeBox);             map.addPopup(this.popup);             this.popup.show();         } else {             this.popup.toggle();         }         OpenLayers.Event.stop(evt);     };     marker.events.register("mousedown", feature, markerClick);       layer.addMarker(marker); }

Hier klappt auch alles mit dem Setzen des Markers, wenn ich diesen anklicke, erscheint auch der Infotext zum Marker. Nun würde ich hier gern irgendwie eine eigene Marker-Grafik einbinden. Dazu habe ich aber keinen Ansatzpunkt gefunden. Und zweitens wollte ich gern noch, dass der Infotext nicht in einem “FramedCloud” erscheint, sondern in einem “AnchoredBubble”. Das habe ich durch folgenden Code auch hinbekommen:

    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble);

Wo ich dann verzweifelt bin, war, die Größe des Bubbles zu ändern. So wie ich http://dev.openlayers.org/docs/files/OpenLayers/Popup/AnchoredBubble-js.html verstanden habe, hätte das auf irgendeine Art und Weise mit

    var size = new OpenLayers.Size(100,17);     XXXXX.setSize(size);

gehen müssen. Ich habe für XXXXX alles ausprobiert, ich habe es nicht hinbekommen,. Egal ob - feature.setSize(size); - feature.popupClass…setSize(size); - ll.setSize(size); - OpenLayers.Popup.AnchoredBubble.setSize(size); - AnchoredBubble.setSize(size); nichts davon funktioniert. Kann mir evtl. jemand zu den beiden Sachen einen Tipp geben? Vielen Dank Andi

2

Hallo, hast Du hier schon geschaut: http://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden oder hier ein Beispiel mit Grafiken: http://forum.openstreetmap.org/viewtopic.php?pid=11544#p11544 Gruss zapfen

3

Ja, von hier habe ich den Code. Aber da finde ich leider nicht, wie ich eigene Marker-Grafiken nutzen kann.

Hm, leider läßt sich die im Beitrag angebenen Beispielwebseite nicht öffnen. “Der Server unter yinundyang.redio.de konnte nicht gefunden werden.” Danke, Andi

4

Hallo Andi, merkwürdig ich kann die Seite ohne Probleme aufrufen: http://yinundyang.redio.de/karte/yinyangmap.htm Zum Beispiel in http://wiki.openstreetmap.org/wiki/Die_HTML_Dateien dabei wird in der Variable popuptext der HTML Code vom Marker Popup definiert. Mit addMarker(layer_markers, 6.641389, 49.756667, popuptext); wird der Marker definiert. In der Funktion addMarker ist dann der Rest programmiert. Gruss Zapfen

5

Ich sehe gerade … eigentlich hätte meine Frage #11 http://forum.openstreetmap.org/viewtopic.php?id=1973#11 besser in diesen Thread hier gepasst :wink:

6

Hm, bin mal über einen Proxy gegangen, da ging es dann.

Jaja, das ist schon richtig und funkioniert bei mir auch so. Aber ich will das Aussehen des Markers ändern. Wollte nicht so ein rotes Parallelogramm, sondern ein eigenes Icon verwenden. Und meine Frage zielte nicht auf die Veränderung des Inhalts des Popups ab, das funktioniert bei mir, sondern auf das Aussehen des Popups. Da stellt Openlayer ja einige zur Verfügung. Aktuell ist das in dem Beispiel von http://wiki.openstreetmap.org/wiki/Die_HTML_Dateien ein “FramedCloud”, ich hätte aber gern ein “AnchoredBubble” und eben von diesem die Größe geändert. Danke, Andi

7

Achso, ja sorry jetzt ist klar. Das Icon kannst ändern, hier ein Beispiel, jedoch musst Du die POI’s in eine Textdatei packen. http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example#index.html und zum AnchoredBubble habe ich etwas gefunden, bei mir läuft es lokal, wenn ich das OpenLayers.js vom Pfad www.openlayers.org/api nehme. http://trac.openlayers.org/browser/trunk/openlayers/examples/popups.html?rev=349 Gruss zapfen

8

Hallo, ich kopiere hier einfach mal ein wenig direkt aus meinem code, da der so ziemlich genau das macht, was Du möchtest.

    location = new OpenLayers.LonLat(vals[0], vals[1]).transform(new OpenLayers.Projection("EPSG:4326"),                     map.getProjectionObject());     var data = {};         data.icon = new OpenLayers.Icon('img/marker.png',                                         new OpenLayers.Size(23, 22),                                          new OpenLayers.Pixel(0, -22));           data['popupContentHTML'] = '<span class="bigger">' + title + '</span><p>' + description;                      var feature = new OpenLayers.Feature(layerMarkers, location, data);         feature.popupClass = OpenLayers.Class(OpenLayers.Popup.Anchored, {'autoSize': true});                          var marker = feature.createMarker();         marker.events.register("mousedown", feature, markerClick);         layerMarkers.addMarker(marker);

Mit dem OpenLayers.Icon erstellst Du einen Marker nach einer eigenen Datei.Der Popup Typ und die Größe werden in der Zeile mit dem autoSize festgelegt. Grüßle, detlef

9

Hallo, jetzt wollte ich auch eigene Marker verwenden und habe mein Code nach dem obigen Beispiel verändert

function addMarker(layer, lon, lat, popupContentHTML, showpopup) {       var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));     var data = {};         data.icon = new OpenLayers.Icon('yinyang30x30.png',                                         new OpenLayers.Size(30, 30),                                          new OpenLayers.Pixel(0, 0));      var feature = new OpenLayers.Feature(layer, ll, data);      feature.closeBox = true;     feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(300, 180) } );     feature.data.popupContentHTML = popupContentHTML;     feature.data.overflow = "hidden";       var marker = new OpenLayers.Marker(ll);     marker.feature = feature;        var markerClick = function(evt) {         if (this.popup == null) {             this.popup = this.createPopup(this.closeBox);             map.addPopup(this.popup);             this.popup.show();         } else {             this.popup.toggle();         }         OpenLayers.Event.stop(evt);     };     marker.events.register("mousedown", feature, markerClick);       layer.addMarker(marker);      if (showpopup == true) {         map.addPopup(feature.createPopup(feature.closeBox));     }; }

Aber statt meines hübschen Bildchens erscheint weiterhin der default Marker. Hat jemand eine Ahnung, was ich falsch gemacht habe? Vielen Dank Andreas

10

Hallo, stimmt die Adresse des Markers? Wenn Du keinen Pfad angibst muß sich das Bild im gleichen Verzeichniss wie die html-Seite die das Skript einbindet. Grüßle, detlef

11

Ja, liegt alles im gleichen Verzeichnis. Klappt aber trotzdem nicht :frowning:

12

Hat sich erledigt. Im Aufruf var marker = new OpenLayers.Marker(ll); fehlte “,data.icon” Es muss richtig heißen var marker = new OpenLayers.Marker(ll,data.icon); Danke, jetzt klappt es :smiley: