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

▶
story city
SMART_READER_LITE
LIVE PREVIEW

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

Oct 26, 2022 622 likes •1.1k views

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

slide-1
SLIDE 1

1 1

Story City

An Interactive, Rich Media Map Case Study

slide-2
SLIDE 2

2

Martin Anderson-Clutz mandclu Jordan Thompson nord102

slide-3
SLIDE 3

3

FOLLOW ALONG

https://v.gd/story_city

slide-4
SLIDE 4

4

THE OPPORTUNITY

slide-5
SLIDE 5
  • 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

VANCOUVER PUBLIC LIBRARY

5

slide-6
SLIDE 6

6

slide-7
SLIDE 7

ISLANDORA

7

  • A robust asset management library
  • A technology stack that uses

Drupal as its front-end, and Solr for search

  • Fedora Commons does the heavy

lifting of managing digital objects, but can be slow

Fedora Commons Islandora Solr Drupal Openseadragon JW Player PREMIS FITS

D7

!

slide-8
SLIDE 8

WHAT WE WERE PROVIDED

8

  • 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
slide-9
SLIDE 9

THE REQUIREMENTS

9

  • Provide a custom module
  • Self contained
  • No Features!
  • No changes to the existing theme
slide-10
SLIDE 10

10

MAKING IT WORK

slide-11
SLIDE 11

VAGRANT AND GIT

11

  • 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
slide-12
SLIDE 12

A MAP SOLUTION

12

  • 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
slide-13
SLIDE 13

ADDITIONAL MAP THEMES

13

  • 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
slide-14
SLIDE 14

14

slide-15
SLIDE 15

DATA COMPATIBILITY

15

  • Islandora stores longitude & latitude in a single field
  • Wrote custom fields to provide these as individual fields, as expected by

mapping solutions

slide-16
SLIDE 16

16

slide-17
SLIDE 17

17

slide-18
SLIDE 18

MANAGING VIEWS

18

  • 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()

slide-19
SLIDE 19

19

slide-20
SLIDE 20

OVERRIDING THE THEME

20

  • Register custom page template
  • Add theme suggestion for template
  • Load CSS and JS
slide-21
SLIDE 21

21

slide-22
SLIDE 22

22

slide-23
SLIDE 23

23

MAKING IT SEXY

slide-24
SLIDE 24

FACETS AS CHECKBOXES

24

slide-25
SLIDE 25

25

slide-26
SLIDE 26

CUSTOM ICONS

26

slide-27
SLIDE 27

EMBEDDED MEDIA PLAYERS

27

slide-28
SLIDE 28

28

slide-29
SLIDE 29
  • 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

CLUSTERING

29

slide-30
SLIDE 30

30

slide-31
SLIDE 31

NEIGHBOURHOODS

31

  • 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

slide-32
SLIDE 32

SHAREABLE URLS

32

  • 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()

slide-33
SLIDE 33

SHARING URL STRUCTURE

33

  • 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
slide-34
SLIDE 34

34

  • 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

SHARING POPUP URL STRUCTURE EXPLAINED

slide-35
SLIDE 35

35

THE RESULT

slide-36
SLIDE 36

THE SOLUTION

36

Dependencies Module Structure

slide-37
SLIDE 37

37

slide-38
SLIDE 38

“

“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: Vancouver Public Library

slide-39
SLIDE 39

“

▪ “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: Participants of the Interviews

slide-40
SLIDE 40

“

▪ “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 the Community

slide-41
SLIDE 41

“

▪ “Most impressive, the map functionality is

  • utstanding!” 


– 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

In Their Words: Feedback From Other Museums

slide-42
SLIDE 42

LESSONS LEARNED

42

  • 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
slide-43
SLIDE 43

REFERENCES

43

  • 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
slide-44
SLIDE 44

Join us for contribution opportunities

Friday, April 12, 2019

Mentored Contribution s 9:00-18:00 Room: 602 First Time Contributor Workshop General Contributions 9:00-12:00 Room: 606 9:00-18:00 Room: 6A

#DrupalContributions

slide-45
SLIDE 45

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

slide-46
SLIDE 46

46

QUESTIONS COMMENTS