Resizable Map

As the size and complexity of your data increases, your maps will begin to slow down. The solution for this is to load the map as "tiles". The tiles are arranged in "steps" from a few top tiles which represent the entire area of the layer at low resolution to a bottom step that can include thousands of tiles representing the highest resolution for the data.

This tutorial starts with a resizeable map.

Making a Map Resizable

The following lines of code make the map resize.

// add the resize function to the window
	window.addEventListener("resize", function() {
		TheCanvasMap.Resize();
	});
TheCanvasMap.Resize(); // makes sure the map is sized the first time

Note: making the map resizable used to require jQuery. With IE 11, this is no longer required and we can just change the window event handler directly.

Making items sticky

CanvasMap make it easy for you to add new elements around the web page and have them "stick" to the sides of the web page as the user sizes the browser. Just call "AddRightSticky(...)" to make an element "stick" to the right side of the browser. The element can either be sized or moved as the right side moves. The "MoveFlag" parameter should be "true" to make the element move with the right side and "false" to make it size. The "Offset" parameter is the distance from the right side you want the element to maintain. The same is true for the "AddBottomSticky(...)" function except the element will stick to the bottom of the browser window. You can call both functions to make an element move or size in both directions. Note that you only call these functions once and then CanvasMap will keep track of the elements and size them for you.

TheCanvasMap.AddRightSticky(TheElement,MoveFlag,Offset)
TheCanvasMap.AddBottomSticky(TheElement,MoveFlag,Offset)