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>
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.
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?
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.
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 .
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.
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
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.
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’?:
