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

Chnutz · 2018-02-10T13:05:31.000Z

Hallo zusammen,

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

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

Nop · 2018-02-10T13:08:33.000Z

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

Chnutz · 2018-02-10T13:43:42.000Z

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

wambacher · 2018-02-10T17:46:26.000Z

Chnutz:

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

Schwer zu sagen. LL ist “einfach einfacher”

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

maxbe · 2018-02-11T00:14:23.000Z

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.

Chnutz · 2018-02-11T00:21:36.000Z

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

Chnutz · 2018-02-11T08:57:18.000Z

maxbe:

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.

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

Chnutz · 2018-02-11T16:36:44.000Z

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?

Harald_Hartmann · 2018-02-11T17:35:32.000Z

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.

Chnutz · 2018-02-12T02:25:47.000Z

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 .

TypeError: document.namespaces is undefined

im leaflet.js
Die Funktion lautet:

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

Der IE sagt dazu Ähnliches und

Die Eigenschaft “add” eines undefinierten oder Nullverweises kann nicht abgerufen werden.

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 !

Harald_Hartmann · 2018-02-12T04:55:09.000Z

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.

Chnutz · 2018-02-12T08:34:38.000Z

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:

“Der Inhaber von b.tile.osm.org hat die Website nicht richtig konfiguriert. Firefox hat keine Verbindung mit dieser Website aufgebaut, um Ihre Informationen vor Diebstahl zu schützen.”

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:

Strict-Transport-Security: Die Verbindung zur Website ist nicht vertrauenswürdig, daher wurde die angegebene Kopfzeile ignoriert.

OSM scheint wohl keine Secure-Verbindung anzubieten

seichter · 2018-02-12T09:35:42.000Z

Chnutz:

OSM scheint wohl keine Secure-Verbindung anzubieten

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.

maxbe · 2018-02-12T09:44:33.000Z

seichter:

Chnutz:

OSM scheint wohl keine Secure-Verbindung anzubieten

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.

axelr · 2018-02-12T14:34:23.000Z

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

Chnutz · 2018-02-13T17:11:09.000Z

axelr:

Zur Frage unter #1
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',

axelr · 2018-02-13T22:35:38.000Z

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