CanvasMap
Getting Started Tutorials 3D Reference

Adding Vector Data

You can add a variety of vector data to a CanvasMap. To start, we'll use the GeoJSON format. If your data becomes large, you'll want to complete the tutorial on vector pyramid layers.

Canvas Map supports the GeoJSON format and we'll be using it for vector data (points, polylines, and polygons). You can export GeoJSON from QGIS but we'll use BlueSpray as it contains other features to help us with preparing data. BlueSpray is available from www.schoonerturtles.com. Please contact James Graham at james.graham@humboldt.edu for the password to BlueSpray.

Preparing the Data

If your data contains a large number of attributes, it will take longer for it to load in CanvasMap. Also, if the data is overly complex, it will take a long time to render, or "paint", into the Canvas object.

Opening a File In BlueSpray

  1. Open the data set in BlueSpray. This can be done by dragging and dropping the file into a view in BlueSpray or by right clicking on a "Scene" and selecting "New Layer -> From File".
  2. Your data can be a variety of file formats but CSVs for points and shapefiles for points, polylines, and polygons are common.

To remove unneeded attributes:

  1. Right click on the layer and select "Attributes -> Visible" to open the attribute table.
  2. Right click on any attributes you do not need in your web map and click "Delete...".
  3. The dialog that appears allows you to delete the attributes one at a time or specify a "Number of Columns" to delete. The columns will include the one you right-clicked on and the columns to it's right.
  4. Remove any columns you don't need as it takes JavaScript quite a while to process attributes, particuarlly large text strings.

Adding "HTML" Attributes for the Information Window

When you display a map in CanvasMap, you can specify an attribute column for the HTML that will appear in a window that pops up when the user clicks on the feature. If desired, add HTML (or plain text) to a column in the attribute table for each feature.

Note that you can also add this HTML to the layer using JavaScript in the Layer's OnLoad() function or combine attributes by overriding a layer's MouseDown() function. There are tutorials ahead for this.

Simplifying

To determine how complex your file is, you can zoom into an area, click on one of the line segments and just view the number of points along the lines. You and also right-click on the layer and select the transform "Vector Data Stats". This will show you the number of points in the data. 1000 is a small number of points while a million is a large number of points and will take a while to paint in CanvasMap. Note that filling polygons is what really slows down drawing so you can load large vector data sets if you don't fill polygons.

To simplify a vector data set:

  1. Right click on the layer and select the "Simplify" transform.
  2. There are a number of types of simplification. "Douglas-Peucker" is the most commonly used and removes points that are within a distance of the previous point and the next point. BlueSpray's "Simple" method is a simplification of this method that only looks at the x and y distances making it faster. The "Topology" method will prevent gaps from forming between features that share boundaries but it takes much longer to execute.
  3. The "Tolerance" is the distance used to filter points. Any points less than this distance from a line drawn between the previous and next points will be removed
  4. When you click "OK", you will want to zoom in and see if your data is still high enough quality for your mapping application. You can also re-run the "Vector Stats" transform to see how many points you have left.

Exporting

The next step is to save the data to a format that can be used by web applications. The browsers will not allow us to load shapefiles so we will convert the data to GeoJSON. This is a standard format for vector data on the web and is very fast for JavaScript to parse.

If you Don't Have a Web Server

If you are using CanvasMap without a web server, you'll need to add a line to the top of the GeoJSON file such as "var FileName=" so you can load it without using a URL. Make a copy of the Geographic_World_Basic.html (if you have a server) or the Geographic_World_SetData.html file from the previous tutorial. Then, change the URL or call the "SetData()" function and refresh the web page to see your data in a CanvasMap.

Adding the Layer to a Map

Now, copy the block of code from where you create the layer (" var TheCountryLayer=new CMLayerDataset();") to the line that sets the URL and paste it into the file to make a copy of the code block. Change the file path to point to your new data file. Then, go back through this tutorial and try it for a different type of data. You can also stylize your data as in the second tutorial.