OpenStreetMap Forum

The Free Wiki World Map

You are not logged in.

Announcement

A fix has been applied to the login system for the forums - if you have trouble logging in please contact support@openstreetmap.org with both your forum username and your OpenStreetMap username so we can make sure your accounts are properly linked.

#1 2018-02-10 14:05:31

Chnutz
Member
Registered: 2018-02-09
Posts: 10

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

Hallo zusammen,

mein erster Beitrag hier. Wenn ich mich danebenbenehme, bitte gleich schreiben 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


Alles fundiertes Halbwissen

Offline

#2 2018-02-10 14:08:33

Nop
Moderator
Registered: 2009-01-26
Posts: 2,177

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

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


Nothing is too difficult for the man who does not have to do it himself...
Projekte: Reit- und Wanderkarte mit Navigation    Kartengenerator Map Composer

Offline

#3 2018-02-10 14:43:42

Chnutz
Member
Registered: 2018-02-09
Posts: 10

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

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


Alles fundiertes Halbwissen

Offline

#4 2018-02-10 18:46:26

wambacher
Member
From: Schlangenbad/Wambach, Germany
Registered: 2009-12-16
Posts: 14,528
Website

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

Chnutz wrote:

Was fällt denn bei Leaflet nicht unter "normalerweise"; was fehlt dort, was ol hat? 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

Last edited by wambacher (2018-02-10 18:48:09)

Offline

#5 2018-02-11 01:14:23

maxbe
Member
Registered: 2010-01-19
Posts: 2,811
Website

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

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.

Offline

#6 2018-02-11 01:21:36

Chnutz
Member
Registered: 2018-02-09
Posts: 10

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

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 smile


Alles fundiertes Halbwissen

Offline

#7 2018-02-11 09:57:18

Chnutz
Member
Registered: 2018-02-09
Posts: 10

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

maxbe wrote:

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


Alles fundiertes Halbwissen

Offline

#8 2018-02-11 17:36:44

Chnutz
Member
Registered: 2018-02-09
Posts: 10

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

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?

Last edited by Chnutz (2018-02-11 17:37:28)


Alles fundiertes Halbwissen

Offline

#9 2018-02-11 18:35:32

Harald Hartmann
Member
From: 98667 Schönbrunn
Registered: 2014-04-02
Posts: 2,159
Website

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

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.


Mein aktives Gebiet: Gemeinde Schleusegrund

Offline

#10 2018-02-12 03:25:47

Chnutz
Member
Registered: 2018-02-09
Posts: 10

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

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!
Anbetung.gif
D A N K E !


Alles fundiertes Halbwissen

Offline

#11 2018-02-12 05:55:09

Harald Hartmann
Member
From: 98667 Schönbrunn
Registered: 2014-04-02
Posts: 2,159
Website

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

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.


Mein aktives Gebiet: Gemeinde Schleusegrund

Offline

#12 2018-02-12 09:34:38

Chnutz
Member
Registered: 2018-02-09
Posts: 10

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

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 sad


Alles fundiertes Halbwissen

Offline

#13 2018-02-12 10:35:42

seichter
Member
Registered: 2011-05-21
Posts: 2,204

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

Chnutz wrote:

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.

Offline

#14 2018-02-12 10:44:33

maxbe
Member
Registered: 2010-01-19
Posts: 2,811
Website

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

seichter wrote:
Chnutz wrote:

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.

Offline

#15 2018-02-12 15:34:23

axelr
Member
Registered: 2014-03-18
Posts: 127

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

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

Offline

#16 2018-02-13 18:11:09

Chnutz
Member
Registered: 2018-02-09
Posts: 10

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

axelr wrote:

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',

Alles fundiertes Halbwissen

Offline

#17 2018-02-13 23:35:38

axelr
Member
Registered: 2014-03-18
Posts: 127

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

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

Offline

Board footer

Powered by FluxBB