CanvasMap
Getting Started Tutorials 3D Reference

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

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 "delete" it from the map. If you want to get the layers back, you'll need to refresh the page.
    3. 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!