LibCal Interactive Mapping

If you have existing maps or in-house expertise to create maps, you are able to use them within LibCal. Once you've decided to DIY, you'll:

1. Follow instructions to add hotspots and set up your SVG map files for use within LibCal.
2. Send your maps for review. The Springy Mapping Team will take a look and provide feedback for any modifications you might need to make. Once maps are satisfactory, the Mapping Team will upload your maps to LibCal.
3. Set your map types and associate your hotspots with spaces / seats or other LibCal Maps. Add info and/or external URLs to hotspots added for wayfinding.
4. Make your maps publicly available for patrons to view and book.
5. Download your maps from LibCal, and edit as needed, if your spaces or wayfinding needs change. Replace maps within LibCal's user interface and update associations or info/URLs for modified hotspots. 

You will create a multi-layered SVG file for each map. To determine how many maps you'll need, read through our list of considerations. 

SVG File Requirements

• 5-10 Layers
• Limit layers to fewer than 100 objects / paths; hotspots may be spread over multiple layers if needed. Layers with more items cannot be interacted with in the LibCal association interface. Layers containing building elements that will not be interacted with in LibCal (e.g. walls, doors, etc) may exceed 100 objects.
• Layers are organized into 3 categories during the map creation process:
  • Bottom layers: building/floor/room details (exterior and interior walls, doors, fixtures, non-hotspotted furniture, etc)
  • Middle layers: map header and legend
  • Top layers: hotspots and labels
• A typical structure for an SVG map file is as follows, with recommended layer names:
  • Labels (top layer)
  • Hotspots (second layer)
  • Header (third layer)
  • Legend (fourth layer)
  • Building (or preferred name) as lowest layer(s). 
• In terms of SVG canvas size, we recommend a canvas or page size of about 2,000 pixels wide. The height should be proportional to the width, depending on the building footprint shape. For example, a rectangular building that is half as deep as it is long would have a canvas height of about 1,000 pixels. 

Example Files

Begin by creating a new SVG file. It's helpful to set up the header first, so that you don't have to adjust object placement later. Headers should contain a description of the map to help users distinguish what they are looking at. For example, if your map is for the second floor of a building, you might include a header with the text Building Name > Second Floor. Please see our example headers for inspiration. You may also download the header SVG file for your own use by selecting it, then right clicking and using the Save As menu option.

1. Adjust the canvas/page size, as needed. In general, use a width of 2,000px and proportional height to fit the shape of your map.
2. Add a layer with the recommended name, Header.
3. While editing the Header layer, add descriptive information about the map you are working on using text tools. 
4. In the header, use any colors that you choose, including institutional or branding colors. Keep in mind contrast between any text and background colors for accessibility.

After setting up the header, you'll move on to adding building elements to the file in lower layers. You should have at least one layer containing the building envelope, interior walls, and/or fixtures. If you have a complex building, you may want to organize these elements into multiple layers to make them easier to edit in the future.

Elements on these layers should not be used for hotspots or interactivity and may have more than 100 paths / elements, as you will not need to interact with them in LibCal. Keep in mind that the more paths / elements that your file contains, the bigger the SVG file will be. Embedded images also contribute to larger file sizes, which can impact page load times.

1. Create a layer with the recommended name Building, or multiple layers as needed.
2. Ensure that these layers are beneath the Header layer as well as other layers that are added later.
3. If you have existing map files, you may import them into this layer.
   1. If importing a background image, make sure to embed the image in the SVG rather than linking it.
   2. If importing an existing map file that converts to paths and objects, be mindful of how many are created. Conversions can create a staggering number of individual paths that make your file much larger and difficult to edit. Combine related paths together where appropriate.
   3. Imported maps may be used to trace and not kept permanently if source files are not up to date.
4. Use SVG drawing tools to create a building envelope, rooms, furniture, and/or fixtures.
5. Add color fills as desired for areas, keeping in mind contrast with any future labels for readability and accessibility as well as the total number of colors used on your maps. Too many colors can be confusing.
6. While not required, it is helpful and recommended to add IDs and titles to these objects to keep your files tidy. Depending on the SVG editor used, this may not be available in the user interface and may require editing the XML document.

Adding hotspots is the most critical part of the map creation process. Hotspots add interactivity to a map and enable users to book spaces/seats, enter more detailed maps, or use wayfinding functionality. This layer should be the second from the top. On the layer, you will add objects or paths that you'll associate with bookable spaces/seats, other maps, or add information for wayfinding.

Any area that is hotspotted can be interacted with by the user, as long as associations are set up within LibCal. However, you may opt to leave hotspots inactive within LibCal if interactivity isn't needed at the present time. If you have more than 100 items that will need to be hotspotted on the map, you will need to create multiple hotspot layers.

1. Create a layer with the recommended name Hotspots or multiple layers as needed.
2. Ensure this layer is above the Header and Building layers already created.
3. Add objects or paths that you want to make interactive.
4. Don’t employ any fills on objects/paths that represent bookable spaces/seats in LibCal or will link to additional maps. These will have a color added to indicate availability within LibCal.
5. Add colors as desired for areas that will have external URLs/descriptions for wayfinding. Keep in mind contrast with any labels for readability and accessibility as well as the total number of colors used on your maps. Too many colors can be confusing.
6. Edit each object or path's properties to include an ID, used by LibCal for association. Depending on the SVG editor used, this may not be available in the user interface and may require editing the XML document.
7. Add a human-readable title to each hotspot for accessibility. Depending on the SVG editor used, this may not be available in the user interface and may require editing the XML document.

Next, you'll add any labeling needed to your map to indicate room/area names as well as icons/symbols to denote building features like restrooms, exits, or printers. If using symbols on your map, adding a legend to explain their meaning is highly recommended. Labels and icons should be on the topmost layer, to display above any color fills or availability indication added by LibCal, for readability. A legend should occupy a middle layer beneath the Labels and Hotspots layers.

1. Create a layer with the recommended name Labels.
2. Ensure that this layer is the top-most layer.
3. Use text tools to add labels as needed to indicate room or area names.
4. Add icons or symbols to denote building features. These may be added as embedded images or editable SVG elements.
5. Create a layer with the recommended name Legend.
6. Ensure that this layer is beneath the Labels and Hotspots layers.
7. Add symbols and explanatory text for any symbols used on the map. The legend can be located on any side of the map, though the right side of the map contains zoom controls that may conflict with legend placement. You’ll want to leave a little bit of white space on the right of your map for zoom controls.

Finally, you'll finish up by saving your file. Depending on the SVG editor used, you may need to edit the SVG file in a text editor to add IDs and titles.

1. Save your file with a distinguishable name in SVG format.
2. If needed, edit the SVG file using a text editor to add IDs or titles to the XML document.
3. Submit your files for review using the link you received initially.

If you have questions along the way, don't hesitate to reach out to the Springshare Mapping Team! Just reply back to the initial email and we'll be in touch.