Simple Static Map

The default map is a resizable CanvasMap provides a lot of elements by default. You can also turn off most of these elements and create simple static maps to add to a web page.

Simple Static Map

The first step is to turn off all the map elements that you don't want to display. Note that this must come before the "Initialize()" call to CanvasMap.

	TheCanvasMap.SetElement(CanvasMap.MAP_HEADER,null); // turn off the header with the map title
TheCanvasMap.SetElement(CanvasMap.TOOL_CONTAINER,null); // turn off the tool bar below the title
TheCanvasMap.SetElement(CanvasMap.NAVIGATION,null); // turn off the nagivation controls in the map
TheCanvasMap.SetElement(CanvasMap.TAB_CONTAINER,null); // turn off the tab controls to the upper right of the map
TheCanvasMap.SetElement(CanvasMap.LAYER_LIST,null); // hide the list of layers that is below the tab controls
TheCanvasMap.SetElement(CanvasMap.BACKGROUND_LIST,null); // hide the background list
TheCanvasMap.SetElement(CanvasMap.SEARCH_PANEL,null); // hide the search panel
TheCanvasMap.SetElement(CanvasMap.MAP_FOOTER,null); // hide the map footer at the bottom of the map

Then, we can turn off the mouse events so the user can't move the map and set the map container's position to relative so it moves with the other elements.

// initialize canvas map
TheCanvasMap.Initialize(false); // turn off mouse events

// change the map container position from "absolute" to "relative" so it can move in the browser
var MapContainer=TheCanvasMap.GetElement(CanvasMap.MAP_CONTAINER);
MapContainer.style.position="relative";

Finally, we will zoom the map to a specific area.

var TheView=TheCanvasMap.GetView(); // get the view that the map is displayed in
TheView.ZoomTo(-15); // set the zoom level to fit out area of interest
TheView.SetRefCenter(13000000,-25000000); // set the center of the map

You'll want to play around a bit with these values to see how they effect the map. You can get the coordinates for the center of the map by loading data into a GIS application (like BlueSpray) and then moving the mouse to the area you want at the center of the map and recording the corodinate for that area. Then, put those values into the code above.