Marker und Popup

[ByeBye 274521]

Hallo Zusammen,

nach zwei Tagen recherche bin ich nicht weiter gekommen und hoffe ihr könnt mir dabei weiterhelfen. Ganz grob ich arbeite mit OpenLayers 3
Mein Problem ist:
Ich möchte,wenn ich auf das Bild klicke, dass ein Popup dargestellt wird. Das Popupfenster zeigt mir die Koordinaten an. Mein Problem ist, was ich schon seit Stunden den Fehler nicht sehe, das das Popup sich nicht mit dem Bild verschieben lässt. Verschiebe ich das Bild mit der Maus, dann bleibt das Popupfenster da stehen wo ich angeklickt habe. sowie mit dem zoomen. Es ändert nicht die Größe des Popupfensters.

Mein Code in Html:

<div id="map" class="map">
		<div id="popup" class="ol-popup"></div>
	</div>

Code in javascript:

var popup = new ol.Overlay({
    element: document.getElementById('popup')
});
var map = new ol.Map({
layers: [
		new ol.layer.Image({
			source: new ol.source.ImageStatic({
			   url: 'data/bild.png', 
			   imageSize: [733, 152],
			   projection: pixelProjection,
			   imageExtent: pixelProjection.getExtent()
		        })
		}),
 overlays: [popup],
	target: 'map',
view: new ol.View2D({
		projection: pixelProjection,
		center: ol.extent.getCenter(pixelProjection.getExtent()),
		zoom: 2
	})
});

map.on('singleclick', function(evt){
    var coordinate = evt.coordinate;
    var element = popup.getElement();
  var coordinate = evt.coordinate;
  var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
      coordinate, 'EPSG:3857', 'EPSG:4326'));

  $(element).popover('destroy');
  popup.setPosition(coordinate);
  // the keys are quoted to prevent renaming in ADVANCED_OPTIMIZATIONS mode.
  $(element).popover({
    'placement': 'top',
    'animation': false,
    'html': true,
    'content': '<p>You clicked here: </p><code>x:' +  coordinate[0] + ' m </br> y:' + coordinate[1] + ' m</code>'
  });
  $(element).popover('show');

});

Wäre echt dankbar, wenn ihr mir dabei weiter helfen könnt. Könnt ihr mir noch verraten, wie ich diesen Popup mit einem X enden kann und einen Marker an z.B. mit Labefeld Position 300/30 setzen kann?

LG

 

[ByeBye 274521]

Problem wurde selbst gelöst

 

[Quaese]

Hi,

wäre schön, wenn du uns an deiner Lösung teilhaben lassen würdest. Wenn später jemand nach dem gleichen Problem sucht, wird er dir dankbar sein.

Ciao
Quaese

 

[ByeBye 274521]

Das Problem war, was ich nicht hier mitreingepostet habe:
/*controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
units: 'm'
})
]),*/
Das was auskommentiert wurde, habe ich nicht in meine var map = new ol.map({...}); hier gepostet. Als ich mein Problem hier geschildert hatte, habe ich nach paar Stunden etwas ausprobiert. Wenn ich mein controls:... auskommentiere, dann verschiebt sich mein Popup und es zoomt sich entsprechend der zoomstufe an. Aber ich bin noch am weiter suchen, wieso das controls das Problem verursacht... Nur leider finde ich nichts gescheites :-(