<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=11.06%2C51.20%2C11.10%2C51.2&layer=mapnik">
Die übergebenen Koordinaten sind (lon,lat) für links, unten und rechts oben. Der Mittelpunkt wird exakt plaziert, die Außenpunkte werden an die iframe-Größe
angepaßt.
Funktionsweise
Code kopiert von 'https://www.openstreetmap.de/karte/'. Die Seite benutzt lokale Kopie von 'OpenLayers.js' (Vers. 2.12 von 2012, mini).
Die Karte besteht aus Tiles der Größe 256x256, die mit "https://tile.openstreetmap.de/${z}/${x}/${y}.png" geladen werden
var layer = new OpenLayers.Layer.XYZ("OSM deutscher Stil", [ "https://tile.openstreetmap.de/${z}/${x}/${y}.png"],
{numZoomLevels: 20, attribution: '<a href="/germanstyle.html">About style</a>'});
layer_markers = new OpenLayers.Layer.Markers("Address", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayInLayerSwitcher: false });
Die Ortsnamen sind in den Tiles fest eingebrannt
Ortssuche
mit https://nominatim.openstreetmap.org/search.php?format=json&json_callback=showResultsGeocode&q=freeText
Overlays & Popups
Das Popup-IF ist veraltet. Einziges IF ist OpenLayers.Popup.FramedCloud -> unschön. Hier benutzt mit einigen Hacks: OpenLayers.Popup
Man sollte besser Neues OL-Interface benutzen...
Fehler
The resource at “https://tile.openstreetmap.org/10/20/50.png” was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof).
See https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)
gelöst in '/etc/apache2/apache2.conf':
<Directory /var/www/>
"Header set Cross-Origin-Resource-Policy cross-origin"
...
Problem mit 'onmousemove'
OL fängt fast alle mouse-events ab: 'new OpenLayers.Control.MousePosition()' benutzt!