Introduction to the CanvasMap Editor

CanvasMap includes a graphical editor that allows you to create maps in an interactive environment. The editor allows you to edit the settings for items that are placed in the map.

Note: This feature is under development and we plan for extending the editor to include full map editing capability.

To enable the editor, you just have to include an HTML element labeled CM_EditorContainer_0 in web page. When the MainContainer is initialized, it will find this element and add a series of tabs to it. The tabs currently include:

• Timeline - We are developing CanvasMap to include animation capability along a timeline. The timeline allows you to select any editable object that appears within your scene.
• Attributes - This is an attribute table for the currently selected layer, if any
• Settings - The settings for the currently selected item.
• Data - In the future, this tab will include the ability to change the spatial reference (i.e. Projector) for the map and add data files as layers.

Creating Items

For many map elements, is it easier to create them in a graphical editor than through code. This is especially true of elements such as text that follows a line. The Hawaii Editor example includes the text "Hawaiian Islands" along a curved line in the ocean. This text was add to the map using the following process:

Adding Text Along a Curve

1. Click on the Timeline tab in the editor panel.
2. click in the box to the right of the layer Items. This is a layer that can include a variety of editable items, including curves. You should see a number of tools appear across the top of the MainContainer.
3. Click on the button with a curve in it.
4. Click and move you mouse to create a curve with about three points in it.
5. Click on the tab Settings. This tab shows the current settings for the item that is selected in the Timeline. These are the same settings you have been setting from JavaScript.
6. Next to the Text setting group, you will see a popup menu that says Select to add. Select the Text setting in this popup menu to allow you to change the text displayed along the curve. You can add a large number of settings to your items but only add those settings that you need to keep you maps simple and fast.
7. At the bottom of the Text setting group you should see a text edit box labeled Text. Enter some text into this box.
8. Click Apply Settings. When you click the Apply Settings button, any settings you have changed will be sent to the item and the map will be redrawn. At this point, you may not see the text in the map because of the font size.
9. Select the Font setting in the Text setting group popup.
10. Change the current setting for the font size to something like 40px and you should see the text appear along the curve.
11. If you zoom in and out of the map, you may notice that the original text sizes with the islands while the text you added does not. Typically for maps, we want text to change size with the features. If you remove the px, which stands for pixels, the size will be in map units. Try this now and apply the settings.
12. When you remove the px, your text probably became very small. This is because the map is in UTM so the units are in meters and ware zoomed out quite a distance. Try putting in 40000 for the font size and apply the settings.

Now you can change the other settings for the text curve including making the Line Style for the curve transparent so it disappears. When the curve item is selected, you can drag the points along the curve with the mouse to change the shape of the curve. If these disappear, then the curve has been unselected. Return to the Timeline tab and click in the box to the right of the item to make it selected again. When you have a chance, spent some time adding other items and changing their settings to become familiar with the editor for CanvasMap.

Adding Items to a Web Page

When you have the item looking the way you want in your map:

1. Click on Get Settings. This will show you the JSON settings for the item you created.
2. Copy the JSON to the clipboard.
3. Create a new variable in your OnLoad() function for your map and then set the variable equal to the JSON object you copied to the clipboard.
4. Then, create a CMLayerItems and add it to your scene.
5. Create a new CMItemPoly object and add it ot the CMLayerItems object.
6. Finally, call SetSettings() for your CMItemPoly object to have it recreate the curve you created in the editor.
7. When you refresh your map page, the item you added should appear in your map.

The Hawaii Editor example includes the Hawaiian Island text in just this way:

 // add the layer for the items to your scene
 var TheItemLayer=new CMLayerItems(); 
 TheItemLayer.SetSetting("Item","Name","Items");
 TheMainContainer.AddLayer(TheItemLayer);
 
 // Create a new item to add to the layer
 var TheItem=new CMItemPoly(); // this object must match the type of object in the editor
 TheItem.SetSettings(TheSettings); // the settings from the editor
 TheItemLayer.AddChild(TheItem); // add the item to the layer