Hello,

I'm new hear and this is not the first Forum where I post.
I programm a browsergame and now its the time where i have to create a map for it.

I can create the map and i can drag it in the map window. My problem is that I don't know how i can load the needed parts of the map dynamically.

Here is my code:
I am coming von Austria, so my Comments are in german. Please ask me if you want a translation.

Code:
<html>
	
<head>
<script type="text/javascript" src="js/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery_ui/jquery-ui-1.10.4.custom.min.js"></script>
</head>
<script type="text/javascript">
	$(document).ready(function() {
		// Kartenbreite & Kartenhöhe
		var map_width;
		var map_height;
		// Breite & Höhe eines Feldes in Pixel
		var field_width_px;
		var field_height_px;
		// Fensterbreite & Fensterhöhe
		var window_width;
		var window_height;
		// X-Koordinate & Y-Koordinate oben/links
		var window_topleft_x;
		var window_topleft_y;
		// Kartenfelder
		var fields = new Array();
		// X-Koordinate & Y-Koordinate der aktuellen Position
		var x_coord;
		var y_coord;
			
		// Kartengröße definieren in Felder (z.B.: 5x5 Felder)
		function setSize(width, height) {
			map_width = width;
			map_height = height;
		}

		// Feldgröße definieren in PX
		function setFieldSize(width_px, height_px) {
			field_width_px = width_px;
			field_height_px = height_px;
		}
			// Felder setzen
		function setField(x, y, field) {
			if ((x < 100) || (y < 100) || (x >= map_width) || (y >= map_height)) {
				return false;
			}
			var ix=x;
			var iy=y;
			for (; ix == x; ix++) {
				for (; iy == y; iy++) {
					fields[x] = new Array();
					fields[x][y] = field;
				}
			}
		}

		// Felder holen
		function getField(x, y) {
			if (typeof(fields[x])!="undefined") {
				if (typeof(fields[x][y])!="undefined") {
					return fields[x][y];
				} else {
					return false;
				}
			} else {
				return false;
			}
		}

		// Position setzen
		function setPosition(x, y) {
			if (x < 100) {
				x = 100;
			}
			if (y < 100) {
				y = 100;
			}
			if (x >= map_width) {
				x = map_width - 1;
			}
			if (y >= map_height) {
				y = map_height - 1;
			}
			x_coord = x;
			y_coord = y;
			
			setWindowPosition(x - Math.round(window_width / 2) + 1, y - Math.round(window_height / 2) + 1);
		}
			// Fenstergröße in Feldern 
		function setWindowSize(width, height) {
			window_width = width;
			window_height = height;
		}

		function setWindowPosition(x, y) {
			if (x < 100) {
				x = 100;
			}
			if (y < 100) {
				y = 100;
			}
			if (x + window_width > map_width) {
				x = map_width - window_width;
			}
			if (y + window_height > map_height) {
				y = map_height - window_height;
			}
			window_topleft_x = x;
			window_topleft_y = y;
		}

		function getWindowHtml() {
			var code = '<div id="map_wrapper" style="overflow:hidden;width:490px; height:350px; border: black solid 1px;text-align:center;" >';
			code += '<div id="mymapwindow" style="min-width:' + "" + ((field_width_px) * window_width) + "" + 'px; min-height:' + "" + (field_height_px) * window_height + "" + 'px;">';
			var window_bottomright_x = (window_topleft_x + (window_width - 1));
			var window_bottomright_y = (window_topleft_y + (window_height - 1));
			for (var y = window_topleft_y; y <= window_bottomright_y; y++) {
				for (var x = window_topleft_x; x <= window_bottomright_x; x++) {
					var field = getField(x, y);
					if (field) {
						var color = field['color'];
						var caption = field['caption'];
					} else {
						color = '#009933';
						caption = '';
					}
					code += '<div style="float: left; width: ' + "" + (field_width_px - 1) + "" + 'px; height: ' + "" + (field_height_px - 1) + "" + 'px; margin-right: 1px; margin-bottom: 1px; background-color: ' + "" + color + "" + '; text-align: center;" title=" ' + "" + caption + "" + ' ">(' + "" + x + "" + '|' + "" + y + "" + ')</div>';
				}
				code += '<div style="clear:both;"></div>';
			}
			code += '</div>';
			code += '</div>';
			code += '<div style="clear:both;"></div>';
			
			$("div#map").html(code);
		}
		
        	// Kartengröße definieren in Felder (z.B.: 30x30 Felder)
        	setSize(1000, 1000);
        	// Feldgröße definieren
		setFieldSize(70, 50);
		// Felder definieren
		setField(106, 106, {"color":"red", "caption":'Dorf'});
		// Fenstergröße der Karte definieren in Felder (z.B.: 9x9 Felder)
		setWindowSize(7, 7);
		// Aktuelle Position zentrieren sofern möglich
		setPosition(106, 106);
		// Karte ausgeben
		getWindowHtml();
		
		$("#mymapwindow").draggable({
			drag: function(event, ui) {
				// neue koordinaten berechnen
				var current_y = ui.position.top + y_coord;
				var current_x = ui.position.left + x_coord;
				$("div#drag").text("drag: \nx: "+ current_x + "\ny: " + current_y);
				
			}
		});		
	});

</script>
	<body>
		<div id="map"></div>
		<div id="drag"></div>
	</body>
</html>
You can copy and paste the code and test it. I hope I describe my problem exactly enough.
Hope you can help me.

Best regards
Patrick