GSP 470 - Canvas Map

Customizing the Map

Change the style of an element

There are a variety of options to change the style of elements.

1. New CSS file

If you want to change all the element's styles, you can save the CanvasMap.css file with a new name and/or new folder and point your HTML file to the new CSS file. Then, change the file as desired.

2. Change one element

After calling Initialization() you can change the style of any element as follows:

var MapHeader=TheCanvasMap.GetElement(MAP_HEADER); // obtains the element from your CanvasMap
MapHeader.style.border="border-radius:10px"; // changes the radius of the map header to 10 pixels

3. Dynamically change styles.

You can use the approach in item 2 above to change the styles whenever you desired. This could be when a tool or element is clicked on or with animation.

Change the images in a map

You can change the images by just changing the ones that are specified when you call SetImageFolder() or create a new folder with images that have the same names as those in the default folder that comes with CanvasMap.

Change the contents of an element

You can customize the contents of some of the elements, such as the MapHeader or ToolTitle. After calling Initialize() you can get the element and then set its HTML

 var MapHeader=TheCanvasMap.GetElement(MAP_HEADER);
MapHeader.innerHTML="<img src='../images/Title_OiledWildlifeMap_White.png' alt='Map Title'>";

Subclass an element

Create the element and use SetElement() to specify the new element before initialization. The element should have the standard ID with "_<Index>" added.

Do your own positioning on resize

If you just want to change the resizing for a few elements, you can call CanvasMap.Resize() and then reposition any element you desire. If you are going to provide positioning for all elements in the map, there is no reason to call CanvasMap.Resize().

Provide an HTML layout for the map:

This is definitely an advanced feature but can be done with CanvasMap. You will need to provide an entire set of elements for CanvasMap to work with.

Examples: Move layer list to the left side of the map
Use the same names as those defined in CanvasMap.js for the elements. Remember to and "_<Index>" where "<Index>" is the index to the CanvasMap on your page (e.g. the first map would have ("_0") added to each name, the second would have ("_1"), etc.). Then, call SetGetExistingElement() and CanvasMap will search for your elements when initializing the map.
In this case, you will typically need to replace the Resize() function in CanvasMap as well so that CanvasMap does not try to position the elements where it traditionally does.

Zooming to an area

You can specify a location for the center of the map and a zoom level to start at. The zoom values for CanvasMap are 1 for a 1:1 ratio between map units (e.g. meters, degrees, feet) and pixels on the screen. As you zoom out, they decrease as integer values (.e.g -1, -2, -3). As you zoom in they increase as integer vales (e.g. 1, 2, 3, 4, 5).

In the example below, we are zooming into a coordinate that is specified in GoogleMap units. The easy way to determine such a location is to load your layer into a GIS application, put the mouse over the desired spot, and write down the coordinate's x and y values.

TheCanvasMap.TheView.ZoomTo(-10); // zoomed out by a factor of 2^10	
TheCanvasMap.TheView.SetRefCenter(600000,4500000);

Limiting the area the user can view

You can change the maximum bounds of the map which will limit how far the user can pan the map. You'll almost always want to limit the "Zoom" levels with this as well.

You can easily find the bounds by loading your data into a GIS application and moving the cursor over the corners of the data. Then, enter the x and y coordinate values as shown below.

var TheBounds = 
{
  	XMin: -500000, // left side (usually wester most edge)
	XMax: 2000000, // right side (usually eastern most edge)
	YMin: 3300000, // bottom side (usually southern most edge)
	YMax: 5000000 // top side (usually northern most edge)
}
TheCanvasMap.TheView.SetMaxBounds(TheBounds);
TheCanvasMap.TheView.SetZoomRange(-11,10);

Adding a CMProjector

CanvasMap can use projected data if you can provide a projector class. Projectors are available for UTM and GoogleMaps projections.

// setup the projector
var TheProjector=new CMProjectorUTM();
TheProjector.SetDatum(WGS_84);
TheProjector.SetZone(10);
TheProjector.SetSouth(false);
TheCanvasMap.SetProjector(TheProjector);

The code below will add the "GoogleMaps" projector which matches the GoogleMaps projection and the OpenTileFormat. This will allow you to show coordinates in degrees with a map that is in the GoogleMaps projection.

var TheProjector=new CMProjectorGoogleMaps();
TheProjector.SetZoomLevel(18);
TheCanvasMap.SetProjector(TheProjector);

Changing the Title

var MapHeader=TheCanvasMap.GetElement(CanvasMap.MAP_HEADER); // NOTE: This would seem to conflict with header title in canvas map. CanvasMap.ALERT
MapHeader.style.padding="1px 0px 0px 0px";
MapHeader.innerHTML="<img src='../images/Title_OiledWildlifeMap_White.png' alt='Map Title'>";

Changing the Credits

var Credits=TheCanvasMap.GetElement(CanvasMap.MAP_CREDITS);
Credits.style.textAlign="right";
Credits.style.marginRight="5px";
Credits.innerHTML="Muhl, Kimble, Bean, and Graham<br>19th of August, 2015";

Changing the displayed Spatial Refernce

var SRS=TheCanvasMap.GetElement(CanvasMap.MAP_SRS); 
SRS.innerHTML="Universal Transverse Mercator, Zone 10 North";

Changing the coordinate units

TheCanvasMap.SetCoordinateUnits(CanvasMap.COORDINATES_UNITS_METERS);