Story City An Interactive, Rich Media Map Case Study 1 1 Martin - PowerPoint PPT Presentation

Story City An Interactive, Rich Media Map Case Study � 1 � 1

Martin Anderson-Clutz Jordan Thompson mandclu nord102 � 2

FOLLOW ALONG https://v.gd/story_city � 3

THE OPPORTUNITY � 4

VANCOUVER PUBLIC LIBRARY - In 2013 rated as the top library in the world - An existing Islandora site for public access to media holdings - Wanted an interactive map to navigate rich media assets (esp. audio) 
 by neighbourhood and location - Funded as part of the Canada 150 celebrations � 5

� 6

Drupal ISLANDORA PREMIS FITS - A robust asset management library JW Player - A technology stack that uses Openseadragon Drupal as its front-end, and Solr for search Solr - Fedora Commons does the heavy lifting of managing digital objects, ! but can be slow Islandora D7 Fedora Commons � 7

WHAT WE WERE PROVIDED - A generic Islandora vagrant container - The production Solr core, including indexed data - Updated over time as the interviews were added to the Collection - The VPL theme � 8

THE REQUIREMENTS - Provide a custom module - Self contained - No Features! - No changes to the existing theme � 9

MAKING IT WORK � 10

VAGRANT AND GIT - Use Vagrant file to sync directory inside VM to outside folder with code from git repo: - config.vm.synced_folder "src/drupal" , "/var/www/drupal" - Couldn’t get the same to work for Solr core - Had to manually copy in, thankfully fewer updates � 11

A MAP SOLUTION - Existing, popular integration between Islandora, Views, and Solr - Wanted a Views-based map solution to leverage this - IP Geolocation Views & Maps (contrib module) proved to be a good solution - Easy to set up - Lots of configuration options - Can utilize many existing mapping resources - Extendable � 12

ADDITIONAL MAP THEMES - Leaflet comes with a variety of map themes - Also possible to provide additional themes through hook_leaflet_map_info_alter() - Relatively easy to provide the client with additional options � 13

� 14

DATA COMPATIBILITY - Islandora stores longitude & latitude in a single field - Wrote custom fields to provide these as individual fields, as expected by mapping solutions � 15

� 16

� 17

MANAGING VIEWS - Features provides a simple way to manage Views and related config, but possible to embed config directly in module - Export view and wrap result in an implementation of hook_views_default_views() � 18

� 19

OVERRIDING THE THEME - Register custom page template - Add theme suggestion for template - Load CSS and JS � 20

� 21

� 22

MAKING IT SEXY � 23

FACETS AS CHECKBOXES � 24

� 25

CUSTOM ICONS � 26

EMBEDDED MEDIA PLAYERS � 27

� 28

CLUSTERING - Allows for markers to be aggregated at different levels of zoom, breaking into smaller clusters as necessary - Clustering was handled by the view settings with the ability to disable clustering at a specific zoom level � 29

� 30

NEIGHBOURHOODS KML stands for Keyhole Markup - Language - an XML notation for expressing geographic annotation and visualization within Internet- based, two-dimensional maps and three- dimensional Earth browsers. - KML was provided by the open data of City of Vancouver - https://data.vancouver.ca/datacatalogue/ localareaboundary.htm � 31

SHAREABLE URLS - Sharing View Filters Using the Views AJAX History module to pushed to the filter values in the URL - - E.g. story-city?neighbourhood[]=Downtown&format[]=audio - Sharing Popups - Using custom URL parameters to identify a specific popup that is pushed to the URL via history.pushState() � 32

SHARING URL STRUCTURE - Format: 
 story-city?pid=islandora:[#]&z=[#]&lat=[coord]&lng=[coord]&c=true - Popup - Custom URL parameters: pid (popup id) - z (zoom level) - lat (latitude) - lng (longitude) - c (is part of a cluster) - - Example � 33

SHARING POPUP URL STRUCTURE EXPLAINED 1. Checked each parameter with custom regex to ensure values 2. Ensure there is a pid in valid format 3. Pan the map to the (lat, lng) 4. Check if it’s clustered (c) a. If clustered, zoom to the max level (18) b. If not clustered, zoom to the specified zoom level (z) 5. Find the marker that matches the pid and click it � 34

THE RESULT � 35

THE SOLUTION Module Structure Dependencies � 36

� 37

In Their Words: Vancouver Public Library “ “From the beginning, they understood what we wanted to achieve and put a lot of thought into the product. It wasn't just about the functionality but creating an engaging experience that would make people want to explore the content and browse further.” � 38

In Their Words: Participants of the Interviews “ ▪ “This is really important work.” ▪ “I had no idea so many things happened here [on this street corner] over the years. As a newcomer, this is really interesting to me.” ▪ “Getting recorded really made me think about how I feel about Vancouver.” � 39

In Their Words: Feedback From the Community “ ▪ “Love the map. It makes it easier to see.” ▪ “Very engaging. I can zoom in easily. I hate lists.” ▪ “Beautiful!” ▪ “I can see how many interviews are in each neighbourhood that helps. I don’t care about every neighbourhood, just mine!” � 40

In Their Words: Feedback From Other Museums “ ▪ “Most impressive, the map functionality is outstanding!” 
 – Museum on Main Street [Smithsonian] staffer ▪ “Surely you must have had a massive project team to capture so much audio content?” – an incredulous attendee with experience in oral history � 41

LESSONS LEARNED - Using the Solr data when building views is convenient and performant - Leaflet is a free and customizable alternative to Google Maps - Adding new map styles is easy - Keeping the pop-up visible can take some work - Sharing custom things is hard - Modular software FTW � 42

REFERENCES - The Finished Product! - https://thisvancouver.vpl.ca/story-city - Islandora Story City module - https://github.com/echidnacorp/story_map - VPL Announcement - https://www.vpl.ca/library/news/2017/vpl-launches-story-city-online-exhibit - Case Study - https://islandora.ca/content/islandora-show-tell-story-city-vancouver-public-library - Clutch Review - https://clutch.co/profile/digital-echidna#review-451854 � 43

Join us for contribution opportunities Friday, April 12, 2019 First Time Contributor General Mentored Workshop Contributions Contribution s 9:00-18:00 9:00-12:00 9:00-18:00 Room: 602 Room: 606 Room: 6A #DrupalContributions

What did you think? Locate this session at the DrupalCon Seattle website: http://seattle2019.drupal.org/schedule Take the Survey! https://www.surveymonkey.com/r/ DrupalConSeattle

QUESTIONS COMMENTS � 46