Editing Maps
Starting Off
Which Programs to Use
Best Program to Use is Adobe Illustrator.
Understanding Fundamentals
Helpful Links
Look it Up!
If you are having trouble with anything, best way to progress is looking it up.
Layering
Understanding How Layering Works and Why It is Important
Adding/Editing Spaces
How to add or edit a space
Helpful tips/Good etiquette when editing
Saving as AI
Saving as AI for further work
Save your work regularly! If you need to work more on it, saving it as an .ai file ensures that it is quick and easy to open up through Illustrator to start editing again. If the file is not already a .ai file, go to Save As, click Format, and choose Adobe Illustrator (.ai). Once you have done this, the file should be saved to your computer. I recommend also uploading/updating this file in whatever Cloud Service you use (e.g. Google Drive, Box, One Drive), just to have a backup or to more easily share with your team.
Saving as PDF
Saving as a PDF for regular use
Saving as a PDF is good practice as it is easy for others to look at and review. I recommend saving a copy of .ai as a .pdf as it does not require the Illustrator program to review. Starting from your .ai file, go to Save a Copy (found under Save As), click Format, and choose Adobe PDF (.pdf). Once you have done this, the file should be saved to your computer. I recommend also uploading/updating this file in whatever Cloud Service you use (e.g. Google Drive, Box, One Drive), just to have a backup or to more easily share with your team.
Saving as SVG
Learn how to save as SVG for use in LibCal
This step only needs to be done if you are ready to test your map in LibCal, otherwise you can skip it. An SVG file allows LibCal to display the interactive hotspots. Saving as an SVG is just as easy as saving as a PDF or AI, but it just requires one more step. Starting from your .ai file, go to Save a Copy (found under Save As), click Format, and choose SVG (.svg). After this, there should be another pop-up window. Ensure that Image Location is set to Embed, otherwise LibCal may have a hard time reading your map and glitch out. Once you have done this, the file should be saved to your computer. I recommend also uploading/updating this file in whatever Cloud Service you use (e.g. Google Drive, Box, One Drive), just to have a backup or to more easily share with your team.
Updating LibCal
How to update Interactive Maps
How to upload new map
How to edit spaces in new map
Creating the Map
- Find proper floor map and download it as a .psd or a .ai file. Open the file in Adobe Illustrator or other editing program (Illustrator would be best).
- If map incudes a legend, cut it out. Drag mouse to select only the map. Copy the highlighted map using Ctrl C on Windows or Cmd C on Mac.
- Create a new file that has the appropriate width and height for the map and paste it into the new file using Ctrl V on Windows or Cmd V on Mac. Before doing anything, save this file and give it a new name.
- Create 3 layers (Layers 1-3). The top layer will be renamed to Text, the middle/second layer will be renamed Hotspots, and the final one should be the layer that you started with. The text layer (top) is the front most, or most surface layer. The Hotspots layer must be between layer 1 and the top layer. It is important that the Text layer is above the Hotspots layer because it allows the text to be seen in the interactive maps in Libcal.
- Separate text into the Text layer and everything else into the bottom layer (aka Layer 1). Do this by highlighting the text from Layer 1 and place it into the text layer. Do this for all of the text in the document.
- Click the Hotspots layer and use the rectangle tool to draw a box around the area that you want to be interactable in the map. In the properties tab, go to appearance and ensure that the stroke and fill of the rectangle are set to none, this way there isn't a random box that covers the map. Then rename the box to its appropriate location (4th Rotunda, West Classroom, 1862). Repeat for all needed hotspots.
- Save this as a .ai or .psd file. Then save it as .pdf file by clicking file, then save a copy, and choosing .pdf under Format Select .pdf. Finally, save it as an .svg by going to save a copy, and choosing .svg under Format Select .svg. Then under options make sure that the image location is set to embed, then click OK.