Chelsea: Karten Zoom über Button

Beitrag lesen

SELF-Forum

Karten Zoom über Button

Chelsea
– Informationen zu den Bewertungsregeln

Hallo,

ich habe noch wenig Javascript-Kenntnisse und bin auf ein Problem gestoßen, vllt möchte mir jemand dabei helfen:
Ich möchte eine Karte erstellten die insgesamt 10 Zoomstufen hat. Diese Stufen können durch 2 Buttons, In und Out, verädert werden oder über ein Eingabefeld, manuell durch Eingabe des Zoomlevels als Zahl 1-10.
Dabei soll das aktuelle Bild entweder beim Klick oder Eingabe eines anderes Levelwerts durch das neue Bild ersetzt werden.

Zusätzlich soll der Maßstab der anhand der Formel (443744272/2^zoomlevel) berechnet wird eingeblendet werden.

Ich habe schon einiges ausprobiert, allerdings noch nicht erreicht dass die Kartenbilder ausgetauscht werden oder der Maßstab berechnet wird.

Mein Code bisher:

  
<!DOCTYPE html>  
  
<html lang="de">  
<head>  
  
<script type="text/javascript">  
  
var zoomLevel = 5;  
	  
function zoom(direct) {  
	if (direct === 'in') {  
		if (zoomLevel < 10) {  
			zoomLevel++;  
			} else {  
			alert('Es kann nicht weiter herein gezoomt werden.');  
	  }  
	  } else if (direct === 'out') {  
		if (zoomLevel > 1) {  
			zoomLevel--;  
		} else {  
			alert('Es kann nicht weiter heraus gezoomt werden.');  
		}  
	  }  
	  
	var imgElement = document.getElementById('map');  
	  
	imgElement.setAttribute("src", "zoom" + zoomLevel + ".png" );  
	  
	var msgElement = document.getElementById('zoomLevelText');  
	  
	msgElement.textContent = "Das aktuelle Zoom-Level ist " + zoomLevel;  
	  }				  
	  
	var text = "8";  
	var textAsNumber = parselnt(text);  
  
function Maßstab() {  
	var text = document.getElementById("zoom_input").value;  
	  
	var HochZoomlevel = "zoomlevel";  
	document.write("2" + HochZoomlevel.sup() + " = " + Math.pow(2, zoomLevel))  
	  
	var ergebnis = (443744272/Hochzoomlevel * parameter; document.getElementById("id").textContent = ergebnis;  
   var Ergebnis = document.Formular.Eingabe.value * document.Formular.Eingabe.value;  
  
	  
</script>		  
</head>		  
<body>  
  
<h1>Dynamischer Zoom mit Javascript</h1>  
	  
<h2> Bitte geben Sie ein Zoomlevel zwischen 1 und 10 ein: </h2>  
  
<form name="Maßstab" action="">  
<input type="text" id="zoom_input" size="35">  
<input type="button" value="Zoom" onclick="Maßstab">  
  
<br> <br>  
<img src="map5.png" id="map" width="500" height="500">  
  
<div id="button">  
  
	<button id="zoomIn" onclick="zoom('in')">Zoom in</button>  
	<button id="zoomOut" onclick="zoom('out')">Zoom out</button>  
</div>  
  
<div id="zoomLevelText">Das aktuelle Zoom-Level ist 5.</div>  
	  
	  
</body>  
</html>

Vielen Dank schonmal im Voraus!
Grüße

Beitrag melden
–
Informationen zu den Bewertungsregeln