Interactive Floor Maps

[wrenaria]

The current Shields floor map display on the library website is simple images in an accordion. This feature request is to make floor maps more interactive, allowing users to click on the floor and toggle on/off different areas on the map. Blaisdell doesn't have levels, but it does have study zones, so the color coding toggles may prove useful for them too.

Related Files

Note: Dev features are enabled in the XD mock-up to easily check basic things like colors, just hit the </> button on the upper right side -- but if you have any questions, feel free to slack me.

• XD mockup
• Map image drafts (lower level) -- to use for testing; these are early drafts, likely to change before feature launch

User-facing Interface

New Features:

• Floor Level Selection
• On/Off Toggle Switches for Study Spaces -- The map is a simple stack of PNGs sized at the same scale. The toggles simply turn visibility of the layer on or off. The toggle switches should be set to ON by default. -- The toggle switches in the mockup are very similar design style to Material Design toggles.

Desktop	Mobile

Map Admin Controls

The image files for the floor maps will be managed by a graphic designer (Tim and/or me), so a user-friendly UI is desired for the WP dashboard in order to remove the need for developer touch whenever the map requires updates.

Features that may require editing capabilities include:

• The title of the toggle section (currently labeled "Study Spaces" on the mockup)
• The display name of each toggleable image layer
• The number of available layers that can be toggled on/off
• The icon and color associated with the layer (let's use same color-set provided on "panel with icon" block to start)
• Possibly the legend icons/labels -- these have had alterations in the past as the library map has evolved over time
• Possibly the order in which the layers appear on the site -- unlikely there would be overlaps to control this way, so maybe not important and can be ignored if it's a technical hurdle, but something to consider.

There are (up to) 2 layers in the UI that will be static / not toggled by switches:

• The top layer which will contain the outline of the building and the fixed icons from the legend
• The bottom layer which is a solid base color (unless we decide not to color the base and leave it white, then this won't be used)

All of the toggly layers will appear between these two images.

[spelkey-ucd]

@wrenaria Here is the first working implementation of this feature using the lower level image drafts you provided: https://sandbox.library.ucdavis.edu/test-map/. I think it's pretty close, though I am sure it will need some tweaks.

For the WP dashboard side, there are 8 new blocks, though only one (Interactive Building Map) can be inserted into a page. The rest are children and only accessible by this block.

Space Legend, Map Legend, and Floors are locked into place, and correspond to the three major components of the design. The remaining four blocks can be added/removed/reordered using the standard WP controls.

Let me know if you have questions, or want me to walk you through the editing process.

[wrenaria]

This is super great!

I threw together a few more floor map images (floors 1 and 3) to do more thorough testing. There are a few adjustments to make:

Editor-related Adjustments

• An option top set a default floor for page load -- Floor 1 should be our default on load since it's where the main entrance is.

• Each floor has a slightly different base shape, so one file for that won't work, there would need to be a dedicated base layer per floor. I am becoming inclined to just drop base color layer entirely and let the base color be the site color (white) to simplify map layer management though, so it's fine to just remove this feature.

• Add Pinot #76236C to the available color options.

• Add these custom SVG icons to the library website icon set (Tim uses them in his map legend):

icon	Icon Name	Legend Item
	bottle	Drinking Fountain
	suitcase-secure	Lockers
	restroom-all	All-Gender Restroom
	restroom-men	Men's Restroom
	restroom-women	Women's Restroom

User-facing UI Style Adjustments

• Can the Floor Level buttons shrink enough to fit all floors on one line at mobile sizes? At least down to 360px viewports, 320px preferred. Even at smallest 320px phone size, they should still be within acceptable button hit area size as a single row and we're never going to have another library space with more than 4 floors.

• The gold separator line doesn't currently match the others we use on the site (see past exhibits, study spaces )

PS - Nice breadcrumbs.

[spelkey-ucd]

An option top set a default floor for page load -- Floor 1 should be our default on load since it's where the main entrance is.

There is now a toggle switch on each floor:

Each floor has a slightly different base shape, so one file for that won't work, there would need to be a dedicated base layer per floor. I am becoming inclined to just drop base color layer entirely and let the base color be the site color (white) to simplify map layer management though, so it's fine to just remove this feature.

Feature removed.

Add Pinot #76236C to the available color options.

I set up some hooks on the theme, so that now the block's colors can be controlled in Appearance->Customize->Colors->Floor Map Space Legend Item along with the theme blocks:

I added pinot on sandbox.

Add these custom SVG icons to the library website icon set (Tim uses them in his map legend):

Done. Just let me know if there are anymore.

Can the Floor Level buttons shrink enough to fit all floors on one line at mobile sizes? At least down to 360px viewports, 320px preferred. Even at smallest 320px phone size, they should still be within acceptable button hit area size as a single row and we're never going to have another library space with more than 4 floors.

Added some custom breakpoints, and now it doesnt break to two lines until 318px for me.

The gold separator line doesn't currently match the others we use on the site (see past exhibits, study spaces )

It's now dotted not dashed. sorry about that.

[wrenaria]

Looks fab and I haven't found any further issues to fix. I made another test page just to test the more simple options Blaisdell will have and it looks great too. Thanks Steve!

[spelkey-ucd]

@wrenaria

FYI, when exporting and uploading layers, watch out for the file size. One of the first floor layers was a whopping 10458X14468px, which was causing the page to crash on less powerful devices (my iphone).

I would have thought that it would have caused the page to just run slowly as opposed to outright crash, so I have to look into why...

[wrenaria]

Oh that is super weird, I really don't know how that happened? I have specific web sizes set on my exporter and the original artboard size for the file isn't even that big to begin with. Looks like everything else exported normally except for that layer. Sorry about that! I'll pay closer attention to checking my exported files in the future and also make sure to define specific size requirements for Tim, who will primarily be managing the image files.

[spelkey-ucd]

Deployed ucdlib-wp-plugins v3.5.0