Types of Map Layouts

The continental US. Background by Esri.

There are two types of map layouts, re-sizable and "flowed". Flowing maps flow with the other HTML on the page like the map on your right. For this map, we've turned off the other map elements to present a simple map to the user. You can still pan and zoom the map but other controls have been removed.

Flowing maps also tend to be simpler and have a single "theme". The map on your right and the "Africa" example are examples of thematic maps. The other tutorials will show you how to create your own CanvasMaps in both these layouts.

Re-sizable maps are absolutely positioned on the web page and because of this, the other elements on the page should also be absolutely positioned. Resizable maps tend to take over a page as in the example below:

Resizable map

CanvasMap Elements

Below is an image of the standard elements for a CanvasMap. In its default mode, CanvsMap is a small GIS application with many of the features you'll recognize. There is the map with nagivation controls with a footer on the bottom that can show the current coordinate under the mouse, the projection, and credits. Above the map is a tool bar where you can select tools to use in the map. On the right is a layer list where you can turn layers on and off, change their drawing order, and change how they are "painted". There is also a background tab to change the background of the map. The "Search" tab lets you search for data with specific attributes and then select and zoom to that feature. We'll use this version of CanvasMap in the tutorials ahead as it allows us to "see under the hood" of CanvasMap and then we'll show you how to make maps with a huge variety of configurations, including completely customizing a map.

Take some time to play with the map and acquaint yourself with the various map elements shown below. The terms shown are used to access the map through the CanvasMap API. Note that you can turn each of these elements on and off and change how they appear or replace them with your own elements.

Main CanvasMap window

The Reference web page documents the defines for each of the elements that you can control.

Getting to Know CanvasMap

Below is a working version of CanvasMap. With a country, river, and city layer in Geographic projection from Natural Earth. Spend some time now in the CanvasMap user interface to familiarize yourself with some of its features listed below the map.

  1. Use the "Info" tool (i) to click on a feature and see the information from one of its columns in its attributes
  2. Use the "Pan" tool (hand) to pan the map
  3. The "Select" tool combines the Info and Pan tools into one and will show information when a feature is clicked on and pan otherwise
  4. The mouse wheel will zoom the map in and out based on the position of the mouse cursor in the map
  5. The "+" and "-" buttons will zoom the map in and out by a factor of 2 each time they are clicked
  6. Below the map is "footer" with the current position of the mouse cursor in DMS
  7. On the right we have the "LayerList" with all the layers
    1. Drag the layers up and down to change their drawing order
    2. Right click on the layer and you can change the "settings" or "properties" for the layer. Spend some time trying different styles for different layer types.
    3. Right click on the layer and you can "delete" it from the map. If you want to get the layers back, you'll need to refresh the page.
    4. You can also "Zoom To" the bounds of any layer
  8. The "Background" tab is empty because we have not added any backgrounds to it.
  9. Enter some text such as "United" in the "Search" box and you can see the features that contain the search phrase. Clicking on one of the results will zoom the map to that feature

These are just a few of the capabilities of CanvasMap. You can access all of them through JavaScript and more.

Now, continue with the other tutorials to see how to make your own maps with CanvasMap!