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.

For this type of map, you can start with an example that contains all the CanvasMap features or a simple resizeable map.

Making a Map Resizable

The following lines of code added to the bottom of your OnLoad() function make the map resize.

// add the resize function to the window
window.addEventListener("resize", function() {
	TheMainContainer.Resize();
});

// call the resize function to setup the map for the first time
TheMainContainer.Resize();

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

HTML elements can be made to "stick" to the sides of a browser window by setting their position with the "bottom" and "right" position CSS values.