Adding the CanvasMap Editor to your Web Page

- Needs to be updated

The CanvasMap Editor is an extesion to CanvasMap that extends the CanvasMap GUI to allow you to create and edit maps interactively. It also allows graphical control over all the settings in CanvsMap.

To have the editor appear next to your map, you will need to follow the steps below.

First, add the following files to your includes:

<script src="Extensions/CMPanelAttributes.js"></script>
   <script src="Extensions/CMPanelTime.js"></script>
   <script src="Extensions/CMPanelTimeSlider.js"></script>
   <script src="Extensions/CMPanelTabs.js"></script>
   <script src="Extensions/CMPanelSettings.js"></script>
   <script src="Extensions/CMPanelData.js"></script>
   <script src="Extensions/CMTimeline.js"></script>
   <script src="Extensions/CMPanelTabsEditor.js"></script>
   <script src="Extensions/CMPanelEditor.js"></script>
     

Then, make sure you have the following includes. Note that if you want to save and load maps using the editor, you will also need to setup a database. See the next tutorial for more information.

 
   <script src="https://gsp.humboldt.edu/Archive/Libraries/Spa/1.0/SPUtil.js"></script>
   <script src="https://gsp.humboldt.edu/Archive/Libraries/Spa/1.0/SPDatabase.js"></script>
 

You'll need to include the CSS file for the editor.

 <link href="/CanvasMapWebsite/Extensions/CanvasMap_Editor.css" rel="stylesheet" type="text/css">

Finally, add a div tag for the editor panel.

<div style="" id="CM_EditorContainer_0">
   </div>