Positionierung eines Overlays über ol.vector? / Openlayer 3

Hallo zusammen,

mein erster Beitrag hier. Wenn ich mich danebenbenehme, bitte gleich schreiben :slight_smile:

Ich versuche eben, auf einer OSM-Karte, die ich mit ol (v3) generiere, einen Overlay an bestimmten Koordinaten zu setzen und anzuzeigen.
Die Koordinaten möchte ich vorher per Klick in die Karte wählen, so wie in diesem Beispiel:
http://openlayers.org/en/latest/examples/popup.html

Es funktioniert schon das Anzeigen der Karte und das Auswählen des Punktes.
Nur wird das Overlay nicht wie im Beispiel an den Klickpunkt gesetzt sondern in die linke untere Ecke.

Also scheint es ein Problem mit overlay.setPosition zu geben?!

Über einen Tipp wäre ich dankbar!

Hier der Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" type="text/css" href="wanderportal.css">
<link rel="stylesheet" href="ol.css" type="text/css">
<script src="ol.js"></script>
</head>
<body>

<div id="map" class="map"><div id="popup"></div></div>
 <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
    <script>

      var scaleLineControl = new ol.control.ScaleLine();

      var map = new ol.Map({
        controls: ol.control.defaults()
        .extend([
          new ol.control.OverviewMap(),
          new ol.control.FullScreen(),
          scaleLineControl
        ]),
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([7.852767,49.824510]),
          zoom: 13
        }),
       logo: logoElement
      });
	  
	  
      /**
       * Elements that make up the popup.
       */
      var container = document.getElementById('popup');
      var content = document.getElementById('popup-content');
      var closer = document.getElementById('popup-closer');


      /**
       * Create an overlay to anchor the popup to the map.
       */
      var overlay = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
      });


      /**
       * Add a click handler to hide the popup.
       * @return {boolean} Don't follow the href.
       */
      closer.onclick = function() {
        overlay.setPosition(undefined);
        closer.blur();
        return false;
      };


      /**
       * Add a click handler to the map to render the popup.
       */
      map.on('singleclick', function(evt) {
		var coordinate = evt.coordinate;
        var hdms = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326');
	
/* Hier alle Möglichkeiten, die ich schon durchprobiert habe: */
	var Position = coordinate;
	//	var Position = "[7.1,49.0]";
	//	var Position = "7.1,49.0";
	//	var Position = hdms;

        content.innerHTML = '<p>Das ist dieser Punkt:<br><a href="eingabe.php?Koordinaten=' + hdms + '">' + hdms + '</a></p>';
        overlay.setPosition(Position);
      });

	
	
    </script>
</body>
</html>

Vielen Dank und herzliche Grüße
Chnutz

Wie immer meine Empfehlung: Wenn Du nicht einen ganz besonderen Grund hast openlayers zu benutzen, dann würde ich Dir empfehlen stattdessen Leaflet zu verwenden. Bedeutend einfacher, durchgängiger und benutzerfreundlicher und hat alles was man normalerweise braucht.

bye, Nop

Danke, schaue ich mir mal an.

Der besondere Grund wäre, dass ich mich schon mehrere Wochen durch verschiedene Versionen von OpenLayers geschlagen habe, weil ich bei der Websuche ständig nur Hinweise dazu gefunden habe und leider nie auf leaflet :wink:
Ich habe auch schon andere Funktionen dort integriert, weshalb ich nun abwägen muss, ob sich ein kompletter Umbau lohnt.

Was fällt denn bei Leaflet nicht unter “normalerweise”; was fehlt dort, was ol hat? :slight_smile:

Schwer zu sagen. LL ist “einfach einfacher” :wink:

Schau dir mal https://OpenStreetMap.org genauer an. Das ist alles mit Leaflet gemacht. Oder auch meine Emergency Map (Link unten in der Signatur)

Gruss
walter

so auf den ersten Blick fallen mir die beiden div id=popup auf:

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

Das ist bestimmt einer zuviel. So grundsätzlich würde ich aber auch zu leaflet raten, ausser man hat altes Zeug, was man nicht ändern möchte, oder braucht irgendwas exotisches. OL kann halt 17 Arten von “ich hab Koordinaten, mal mir bunte Striche dazwischen”, Leaflet hat nur 2 oder 3, dafür schleppt es den Rest nicht mit sich rum und wer was neues macht, kann ja eines der unterstützten Formate nehmen.

Ich habe jetzt Leaflet mal ausprobiert, die Syntax ist auf jeden Fall einfacher.

Jetzt muss ich noch mit der des Event-Listeners klar kommen, dann habe ich es dank des guten Tipps geschafft :slight_smile:

Hups, einer ist von einem anderen Test kurz vor dem Einkopieren hier übrig geblieben, ja, der ist zuviel, Danke.
Geht aber auch ohne nicht^^

So, funktioniert alles mit Leaflet, vielen, vielen Dank nochmal für den Tipp!
Der Code ist damit wirklich sehr einfach:


// *** Eventhandler an die Karte anhängen, der beim Klicken auf die Funktion "markerDazu" fuehrt ***
KarteWanderrevier.on('click', markerDazu);

// *** In der Funktion "markerDazu" wird ein Marker mit den Event-Daten (e) generiert ***
function markerDazu(e)
   {
   L.marker(e.latlng).addTo(KarteWanderrevier);
   }

Ich habe abschließend nur noch ein merkwürdiges Leaflet-Problem, allerdings etwas offtopic: Auf einem Rechner von mir zeigt er die Tiles beim Reload der Seite nicht mehr an, sonst geht alles.
Anderer Rechner und anderer Browser geht, nur auf meinem Win7-Rechner mit FF58.0.0.2 verschwindet die OSM-Grundkarte und taucht auch bei Reload oder Größenänderung nicht mehr auf. An der Datenverbindung kann es nicht liegen, dasselbe Netz mit allen Rechnern und >100 MBit.
Deine Seite, wambacher, geht auch unproblematisch auf.
Hat jemand eine Idee?!
Oder soll ich das lieber woanders nochmal posten?

Guck doch mal in die Konsole bzw den Debugger (Taste F12) ob irgendwelche Fehlermeldungen (auch im Bereich Netzwerk z.B. 404, 502, etc.) angezeigt werden.

Hatte ich schon mal versucht, nun auf die Anregung nochmal sehr gründlich. Ergebnis: Das Einzige, was im FF beim Debuggen angezeigt wird, ist die Meldung .

im leaflet.js
Die Funktion lautet:

try{return document.namespaces.add("lvml","urn:schemas-microsoft-com:vml")

Der IE sagt dazu Ähnliches und

Die Meldung kommt aber nur, wenn ich auch behandelte Ausnahmen hinzufüge, ansonsten fehlerlos.
Morgen suche ich nochmal auf beiden Rechnern nach Unterschieden.

So, ich muss es nochmal kurz loswerden: Über ein halbes Jahr lang habe ich mich durch drei Versionen OpenLayer durchgewühlt, diverse “Das geht damit nicht” oder “dürfte sehr schwierig sein” zu den Themen in deren Forum gelesen. Nirgendwo gab es übertragbare Lösungen.
Nach dem Tipp hier habe ich mein ganzes Projekt nun in knapp zwei Tagen in Leaflet fertig bekommen, mit Polylinien ein- und ausblenden, eigenen Icons, verschiebbaren Markern, die den Wert am Ende zurückgeben zum Übertragen in die DB undundund!

D A N K E !

Hmm, komisch, document.namespaces sagt mir erst mal nichts, müßte ich erst nachgucken.
Aber da es im IE angezeigt wird (also die Tiles), und im FF nicht, vielleicht irgendein Addon aktiviert, z.B. httpseverywhere, nicht das es einfach nur mal wieder ein mixed content ist, die Tiles url würde ich auf jedenfalls per https aufrufen.

Auf die Anregung hin habe ich statt

http://{s}.tile.osm.org/{z}/{x}/{y}.png

mal

https://{s}.tile.osm.org/{z}/{x}/{y}.png

probiert, dann verschwindet die Karte aber auch auf dem Laptop, wo sie vorher ging.

Ich habe mir daraufhin einen - Achtung Kalauer - Teil-Tile gezogen: https://b.tile.osm.org/15/17094/11143.png

Da sagt FF:

D.h., ich müsste für jeden Rechner individuell eine Ausnahme zulassen, wonach aber in der Nutzung gar nicht gefragt wird.
Wenn ich das beispielhaft tue, heißt es im Inspektor:

OSM scheint wohl keine Secure-Verbindung anzubieten :frowning:

Das ist eher in einer der letzten Versionen von FF dazugekommen. Der ist jetzt bei den Zertifikaten noch pingeliger und dem reicht ein Zertifikat z.B. für osm.org nicht für b.tile.osm.org.
Solche Fehlermeldungen bekomme ich in dieser Art für etliche andere URLs inzwischen auch.

Nehmt doch https://b.tile.openstreetmap.org/15/17094/11143.png
Dafür gibt es ein Zertifikat, das für a.tile.openstreetmap.org, b.tile.openstreetmap.org, c.tile.openstreetmap.org und tile.openstreetmap.org ausgestellt wurde.

Zur Frage unter #1
div popup ist doppelt definiert,
logoElement ist nicht definiert und
overlay ist nicht der Karte zugeordnet. (hinter var overlay(…); fehlt map.addOverlay(overlay);
Ich habe deine wanderportal.css und eingabe.php nicht gefunden, aber das Ergebnis sollte wahrscheinlich so aussehen:
http://www.roeltgen.com/foren/chnutz.html
Gruß, Axel

Ich verfolge das ol-Projekt zwar erstmal nicht mehr weiter, trotzdem Danke für die hilfreiche Antwort und dazu eine Frage: Ich finde den AddOverlay-befehl auch nicht im Original-Quellcode hier:
https://openlayers.org/en/latest/examples/popup.html

Wird der dort ersetzt durch diese Zuweisung unter ‘map’?:


 overlays: [overlay],
        target: 'map',

Ja.
Die Reihenfolge ist entscheidend, man kann overlay erst verwenden nachdem es definiert ist.