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.

Preparing the Data

Find a point, polyline, or polygon data set and load it into BlueSpray. 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.

To remove unneeded attributes:

  1. Open the data set in BlueSpray. This can be a variety of data formats but CSVs for points and shapefiles for points, polylines, and polygons are common.
  2. Right click on the layer and open the attribute table.
  3. Right click on any attributes you do not need in your web map and click "Delete...".
  4. 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.
  5. Remove any columns you don't need.

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.

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.

Note that 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 in the "SetURL()" or "SetData()" function and refresh the web page to see your data in a CanvasMap.

Now, copy the block of code from where you create the layer ("var TheCountryLayer=new CMLayerGeoJSON();) to the line that adds the data to the map (" TheCanvasMap.AddLayer(TheCountryLayer);") and paste it into the file to make a copy of the code block. Then, go back through this tutorial and try it for a different type of data. Then, you can stylize your data as in the second tutorial.

Points

Point files can be drawn in the same way as other vector data and you'll see a circular "mark" appear over the point. You can change the type and size of mark using properties.

	TheCityLayer.SetProperty(CMLayer.MARK_TYPE,CMLayer.MARK_STAR);
	TheCityLayer.SetProperty(CMLayer.MARK_SIZE,10); 

The sizes are specified in pixels and the marks can be one of:

CMLayer.MARK_CIRCLE
CMLayer.MARK_TRIANGLE
CMLayer.MARK_SQUARE
CMLayer.MARK_STAR

You can also replace the mark with a PNG or JPG image. This requires a URL to the image and then an "XOffset" and "YOffset" that specifies the "hot spot" for the image. The hot spot is the point in the image that will be placed over the point in the map and also where the user clicks to see information on the point. The Offsets should both be negative values.

TheLayer.SetIconImage(URL, XOffset, YOffset);

TheLayer.SetIconImage("Images/IconLightning.png",-20,-32);