To design your own interactive maps, you need the following:
- StatPlanet (Custom Flash Map edition)
- Adobe Animate (or its predecessor Adobe Flash)
- A map file in vector format, such as Adobe Illustrator (.ai), FreeHand (.fh*, .ft*), or Adobe Flash (.swf).
- Map layer: This layer will contain the map shapes (e.g. regions or provinces).
- Borders layer: This layer will contain the map borders.
(Note: since version 2.3, map text labels are automatically generated and no longer need to be added manually).
For an example of what the final result could look like, see the file 'map_example.fla' (shown below).
StatPlanet Example Map of Kenya (map_example.fla)
Step 1. Map layer
Before inserting your map into the map template (map.fla), it may be easiest to edit it first in a new document.
- Open a new document (File -> New).
- Import your map (File -> Import to Stage, select your map file).
- Select all (Edit -> Select all).
Break apart the shapes of your map (CTRL+B, or using the menu: Modify -> Break Apart). You may need to repeat this several times until the shapes cannot be broken apart any further. See also: manually tracing the outlines of your map.
What to do if a rectangle appears which covers your map:
In some cases a rectangle may suddenly appear which was previously hidden from view. If this is the case, click anywhere outside the selection area to deselect it. Then click on the rectangle and press 'delete'. You should now see the map again. (Note: if you did 'Break Apart' one too many times, the rectangle and your map merge, and the map disappears. You will need to go back and redo this, and remove the rectangle while it is still a seperate shape).
- What to do if a rectangle appears which covers your map:
- Select all (Edit -> Select all).
- Copy the map (Edit -> Copy).
- Open the map template (map.fla).
- Select the first frame in the timeline in the layer 'map' (normally in the top of the screen, see also the example screenshot above - the first frame looks like a white rectangle with a circle in it).
- Paste your map (Edit -> Paste in Place).
- Double-click on the map borders. This should normally select all the borders in one go. Otherwise, hold down the Shift key and double click on the remaining borders. Once you have all your borders selected, change the border thickness in the Properties Panel below. Click on the drop-down which currently has 'Solid -----------' selected, and change this to 'hairline'. If the borders are different colors, make them one color (e.g. black) by clicking in the color selection box to the left of the border thickness selection.
Select the different shapes of your map one by one and convert each of them into a Movie Clip (F8, or using the menu: Modify -> Convert to Symbol).
What to do if shapes do not seperate properly:
In some cases the shapes of your map may not have seperated properly, because the borders are not properly joined up. You can either draw existing borders to make them join up, or draw them in using the pencil tool. To join them up, you can click on the edge of one of the lines just at the point where it does not join up, and drag the line to where it should join. Alternatively, click on the Pencil Tool in the Drawing Toolbar (normally on the left). Then draw in the lines where the gap exists. If this is done correctly, the shapes should now be seperated.
What to do if your map consists only of map boundaries, not shapes:
If your map consists only of map boundaries or borders, you can fill the boundaries with the 'Paint Bucket Tool'. Select the 'Paint Bucket Tool' in the Drawing Toolbar (normally on the left) and click within the map boundaries you wish to fill. It can be filled using any color.
- What to do if shapes do not seperate properly:
Assign an instance name to each of the movie clips. The instance name can be entered in the properties panel which is normally below the stage (see also the example screenshot above).
The instance name cannot contain spaces. Therefore, you may wish to assign a 'code' rather than the actual name. The actual name can be defined later in the StatPlanet Data Editor, where it can include spaces.
- The size / position of the map can be adjusted at a later stage in the Data Editor (in the Excel sheet 'Settings').
Step 2. Borders layer
- Once you have created the map Movie Clips, your borders may have become hidden from view. To make them appear again, you need to select all the map Movie Clips you just created one by one, while holding the SHIFT key. Once you have selected all of them, select Edit -> Cut. You should see the map boundaries reappear.
- Now select the map borders by double-clicking on any part of them. This should normally select all the borders in one go. Otherwise, hold down the SHIFT key and double click on any of the borders which are not yet selected. Once you have selected all the borders, press CTRL + G (or use the menu: Modify -> Group).
- Once you have grouped all the map borders, you can place all the Movie Clips back again. Select Edit -> Paste in Place. While the Movie Clips are still selected, right-click on any of them, and from the popup menu select Arrange -> Send to Back. Now your map borders should appear on top of the map.
- Click anywhere outside the selection area to deselect it. Then click somewhere on the map borders. This requires some precision so that you do not accidentally click on one of the map Movie Clips instead. Once you have selected the borders, go to Edit -> Cut. Then select the first frame in the 'borders' layer in the timeline panel, and go to Edit -> Paste in Place.
- While the borders are still selected, turn them into a Movie Clip by pressing F8 (or using the menu: Modify -> Convert to Symbol).
- In the Movie Clip properties panel below the stage, give the Borders Movie Clip the instance name: borders.
Step 3. Publish your map file
- Once your map is ready, publish the file (File -> Publish).
- Go to the directory containing map.fla. You should see a new file, 'map.swf'. Copy and paste this file into the directory Offline (for the offline version of StatPlanet) and Web (for the online version of StatPlanet), replacing the existing 'map.swf'.
Step 4. Linking the map in StatPlanet Data Editor
In StatPlanet_data_editor.xls, first insert the 'real names' of your map regions, and then the 'instance names' or codes which you used in the map file (map.fla).
- In the sheet 'Import', replace the example names (which are Kenya province names) with your own names, in the order that you wish. Then press the button 'Save data'.
- Go to the sheet 'Data' (see the sheet names in the bottom left of Excel). In the top row you should see a list of example codes (CEN, COA, EAS, etc.). Remove these codes and replace them with the codes (instance names) you have used in your map file. They should be in the same order as the map names in the sheet 'Import'. (in the example, the order of map regions in the sheet 'Import' is Central, Coast, Eastern...etc., and the corresponding codes in the sheet 'Data' are CEN, COA, EAS, etc.).
- Go back to the sheet 'Import' and insert the data for your map regions here. You can also use the 'Import data' button to import your data from a file automatically. If the import fails, it is most likely because the names or headers in the file you are importing could not be recognized. In that case, you need to add them in the sheet 'Import names'.
- Once the data has been added, press the button 'Save data'.
- Go back to the directory Offline and open StatPlanet.exe to see your map in action. Or go to the directory Web and open the file StatPlanet.html to open it in a web-browser. If you wish to publish your interactive map on a website, copy and paste the contents of the folder 'Web' to the web-server. See also the file 'StatPlanet_small.html' for an example of how the map can be integrated into an existing web-page.
To change the position and size of the map, move the mouse to the bottom-right of the screen to see the map zoom controls:
- Zoom: You can zoom in and out of the map using the 'zoom in' and 'zoom out' buttons, or by dragging the zoom slider up or down. If your mouse has a scroll wheel, you can also use this to zoom in and out.
- Moving the map: click and drag the map with the mouse to move it to a new position.
Once the map is in the right position, right-click and select 'Copy map coordinates'. In the StatPlanet Data Editor, go to the sheet 'Map regions', select the cell below 'X'. Then paste the coordinates here.
- To hide/show the text labels for the map, click on ‘Show text labels’ in the StatPlanet Data Editor (sheet Import, below the Save button).
- Click on “Save data” and open StatPlanet to see the results. It is likely that the position of some or all of the text labels will need some adjusting.
- To adjust the position of the text labels, right click anywhere in StatPlanet and select ‘Move text labels’ in the menu. Click on any of the text labels to drag them to a new position.
- Once you have finished moving the text labels, right click and select ‘Copy text label coordinates’ in the menu.
- In StatPlanet, go to the sheet ‘Settings’. Select the cell next to ‘Text label coordinates’, and paste the coordinates here. (You may also wish to modify other settings in this sheet, such as the text font size.)
- Click on ‘Save settings’ (or alternatively, ‘Save data’ in the Import data screen). The coordinates have now been saved for when you next open StatPlanet.
- In the sheet ‘Settings’, you can also change additional settings such as the font size of the text labels.
This section explains how to create multiple map layers, for example to show changing map boundaries over time, or to include multiple admistrative levels (e.g. a province and a district map) in a single instance of StatPlanet.
The first step is to change a setting in the StatPlanet Data Editor, sheet 'settings'. Under ‘Map options’, set the value of ‘MAP-ND-TR’ to ‘TRUE’ to make map areas with no data transparent. An example of this is a map with two map layers. Map layer 1 contains areas 1a, 1b and 1c, whereas map layer 2 contains areas 2a, 2b and 2c. If an indicator has data only for map layer 1 areas - 1a, 1b and 1c - then map layer 1 becomes visible and map layer 2 will be hidden (because there is no data for areas 2a, 2b and 2c). Similarly, map layer 2 becomes visible and map layer 1 will be hidden when there is only data for areas 2a, 2b and 2c.
To create your own map with multiple map layers, all the map areas need to have a unique ID. Subsequently in the StatPlanet Data Editor, each map area requires a separate column (e.g. in the above example, there would be six columns: 1a, 1b, 1c, 2a, 2b and 2c). Each map area also needs a corresponding border with a unique ID. This is required because not just the map area, but also the map border needs to change when changing the map, and the software needs to know which border belongs to which area.
An example of a map with two map layers is included in the Create_Flash_Maps folder. The example can be viewed in the folder “Web_2layers_example” (by opening StatPlanet.html in your web browser). If you move the time slider to “2010”, the three western provinces of Kenya (in map layer 1) become merged into one ‘hypothetical’ province (in map layer 2). This was achieved through the following steps:
- A new map layer “map2” was added in the Flash file ‘map_example_2layers.fla’. This layer contains the hypothetical new western province (a merge of the three actual western provinces). It is given the instance name (ID): WESBIG
A new borders layer “borders2” was added. This layer contains the borders for the new map region. It needs to be given the same instance name, with the letter ‘b’ (for border) added, i.e.:
- A new borders layer “borders1” was added to define the borders separately for the three western provinces that become the new big western province. This is required to hide these borders when the second map layer is shown (normally there is just one border for the whole map, the borders are not defined separately for each map region – in this case, there is still one border symbol for the whole map but the western borders are removed). As above, the borders need to be given the same instance names as for the corresponding map regions, with the letter ‘b’ added. In this case, the borders are given the following names: RIFb, WESb and NYAb (corresponding to map regions RIF, WES and NYA).
- The new map region is added to the StatPlanet Data Editor. It is given the name ‘Western Big’ in the sheet ‘Import’, and a corresponding ID ‘WESBIG’ in the sheet ‘Data’.
- For the year 2010, data is removed for the provinces Nyanza, Riftvalley and Western, so these provinces will become invisible when the time slider goes to 2010. In the same year, data is added for the province Western Big, so this province will become visible in 2010.