Eingebettete OpenStreetmap-Karten

Das Einbetten einer OSM-Karte ist einfach, auf http://openstreetmap.org kann man sich einen Kartenausschnitt wählen und im Menü auf der rechten Seite unter „Teilen“ bekommt man einen HTML-Schnipsel mit IFrame, mit dem man eine interaktive Karte einbinden kann. Soweit so gut. Dumm ist nur, dass das Zoomen der Karte und Scrollen der eigenen Webseite mit dem Mausrad passieren und somit das scrollen nicht mehr funktioniert, sobald man mit der Maus über dem IFrame ist.

Bei Google Maps gibt es dafür die Möglichkeit, mittels STRG-Taste das zoomen zu aktivieren.

Ich habe eine kleine Alternative dazu programmiert, die das Zoomen mittels klick freigibt. Dazu müssen folgende Anpassungen an der Seite vorgenommen werden:

1. das Iframe benötigt eine ID, in diesem Beispiel habe ich sie „osm“ genannt, zur Sicherheit kann dem Iframe noch ein z-index eingefügt werden: <iframe id="osm" style="z-index=1 ...>
2. ein zusätzliches Div mit ID (hier „scrollblocker“) wird benötigt, das folgendermaßen aussehen könnte: <div id="scrollblocker" style="display:flex; align-items:center; justify-content:center; position:absolute; background-color:#000000; opacity:0.5; z-index:2; visibility:hidden;">Bitte klicken um Kartenausschnitt zu verschieben</div>
3. ein kurzes JS (in eigener Datei oder nach Div und Iframe) das die Funktion bereitstellt:

var editmode=0;
          document.getElementById('scrollblocker').addEventListener("click", function(event){	
          	document.getElementById('scrollblocker').style.visibility="hidden";				
          	editmode=1;
          });
          document.getElementById('scrollblocker').addEventListener("mouseleave", function(event){	
          	document.getElementById('scrollblocker').style.visibility="hidden";
          });
          document.getElementById('osm').addEventListener("mouseleave", function(event){	
          	editmode=0;
          });
          document.getElementById('osm').addEventListener("mouseenter", function(event){		
          	if(editmode==0){		
          		document.getElementById('scrollblocker').style.visibility="visible";
          		document.getElementById('scrollblocker').style.height=document.getElementById('osm').offsetHeight+"px";
          		document.getElementById('scrollblocker').style.width=document.getElementById('osm').offsetWidth+"px";
          		document.getElementById('scrollblocker').style.top=document.getElementById('osm').offsetTop+"px";
          		document.getElementById('scrollblocker').style.left=document.getElementById('osm').offsetLeft+"px";
          	}		
          });

Sobald die Maus auf das Iframe kommt, wird das entsprechende Event ausgelöst. Dieses legt das Div exakt über das Iframe, sodass Mausevents nicht mehr zum Iframe „durchkommen“. Gleichzeitig wird das Div angezeigt, sodass der Benutzer weiß was Sache ist.

Beim Klicken auf das Div wird es ausgeblendet und verhindert, dass es sofort wiederkommt („editmode“).

Beim Verlassen des Divs mit dem Mauszeiger wird es ausgeblendet damit es nicht beim betrachten stört.

Beim Verlassen des Iframes mit dem Mauszeiger wird der Editmode wieder deaktiviert, sodass der Anfangszustand wiederhergestellt ist. Ein erneutes „betreten“ führt wiederum zur Anzeige des Divs.

Alternativ könnte man es auch Google Maps ähnlich mit STRG-Taste machen, dann würde sich hauptsächlich der JS-Code ändern (und idealerweise die Beschriftung des Divs):

          var editmode=0;
          window.onkeydown=function(event){
		if(event.ctrlKey){
			editmode=1;
			document.getElementById('scrollblocker').style.visibility="hidden";				
                }
          };
          window.onkeyup=function(event){
                if(!event.ctrlKey){
          		editmode=0;
		}
	  };
          document.getElementById('scrollblocker').addEventListener("mouseleave", function(event){	
          	document.getElementById('scrollblocker').style.visibility="hidden";
          });

          document.getElementById('osm').addEventListener("mouseenter", function(event){		
          	if(editmode==0){		
          		document.getElementById('scrollblocker').style.visibility="visible";
          		document.getElementById('scrollblocker').style.height=document.getElementById('osm').offsetHeight+"px";
          		document.getElementById('scrollblocker').style.width=document.getElementById('osm').offsetWidth+"px";
          		document.getElementById('scrollblocker').style.top=document.getElementById('osm').offsetTop+"px";
          		document.getElementById('scrollblocker').style.left=document.getElementById('osm').offsetLeft+"px";
          	}		
          });