Designing The Trail Guide App

  • The Trail Guide App is meant to help people engage more with natural areas.
  • This app's "agile development" consists of a variety of functional design and coding versions, testing, recoding, and testing again, using HTML5, CSS3 & JavaScript code, including open-source Leaflet mapping code, and responsiveness to varying screen sizes and mobile devices (see Design Versions below)
  • The application, and this website, are being coded to be responsive for use by mobile devices, and a wide variety of screen sizes using CSS Media queries, jQuery & jQuery Mobile JavaScript code

Planning

App Navigation Structure Ideas (2017-08-23)
(click image to view larger version)

Concept Maps

Map Elements & Communication

Design

  • Use index cards to sketch mobile site, check navigation (2017-09-10)
  • Test Prototype one per week (2017-09-10)

Map Elements (2017-09-08)

  • Map
  • direction arrow
  • scale
  • legend
  • title
  • cartographer name
  • symbol design, icons, categories
  • text - font family, size
  • CSS media queries for different screen size
  • color - icons, lines
  • Info windows
  • Images
  • Projection - Google uses Mercator
  • Organized information

I. Who is the intended audience? (2017-09-08)

  • students: geography, environmental studies, restoration, grade 6
  • Members of public
  • Nature lovers
  • Dog walkers
  • Curious
  • Teachers – TAs

II. What data is needed? (2017-09-08)

  • latitude
  • longitude
  • name
  • description
  • type - classified
  • image
  • education
  • inquiry-based knowledge
  • Plant name, Common and Latin list from Nancy Turner
  • First Nation language
  • Description of Trail, waypoints, mapped place

III. Communication goal: 5 things I want this map to communicate (2017-09-08)

  • Mystic Vale is a special place to experience nature; like Mary Thomas, I want to show you what to love about this place
  • Big trees grew here a long time; species, habitat information, living stumps
  • Multiple users over time; First Nation hunting and gathering, UVic purchase, history, culture, Hudson Bay logging, great horned owls, ravens, songbirds, locals and migrant, deer, rabbits
  • Invasive plants, too many trails, dogs off leash, making trails on steep slopes, not replanting native plants after removing invasive species and leaving no vegetation to control slope erosion, are degrading this environment
  • With every step you take, you can discover something

IV. What Design elements will help user receive message most clearly? (2017-09-08)

  • Photos
  • Inquiry-based information and knowledge
  • organize information
  • make them think a little, ponder, wonder
  • Marker icons design
  • interactivity should reflect communication skills learned
  • Time tour
  • Audio
  • Pop-up windows should contain more than just a name or title

Design Versions: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ...

a number of different design versions are showcased here Draft Trail Guide Maps .

Design Tools

Get LatLng Coordinates onMapClick

Chrome Extension: page ruler
Keyboard Shortcuts General Shortcuts Alt + P: Enable / Disable Page Ruler Toolbar Inputs Up Key: Increase the value by 1 + Shift: Increase the value by 10 Down Key: Decrease the value by 1 + Shift: Decrease the value by 10 Ruler Arrow keys: Move the ruler by 1 pixel in any direction + Shift: Move the ruler by 10 pixels + Ctrl (Command): Expand the ruler outwards by 1 pixel + Shift + Ctrl (Command): Expand the ruler outwards by 10 pixels + Ctrl (Command) + Alt: Shrink the ruler inwards by 1 pixel + Shift + Ctrl (Command) + Alt: Shrink the ruler inwards by 10 pixels

Mystic Vale: ...

Mystic Vale 1

Desc

Mystic Vale 2

Desc

(screen shot)

Mystic Vale 3

Mystic Vale 3.1.a (still needs ...)

Mystic Vale 3.1.b

Desc

(screen shot)

Mystic Vale 3.1.c

Desc

(screen shot)

Mystic Vale 3.2

Desc

(screen shot)

SNIDCEL: ...

SNIDCEL 1

Desc

SNIDCEL 2

Desc

(screen shot)

SNIDCEL 3

SNIDCEL 3.1.a (still needs ...)

SNIDCEL 3.1.b

Desc

(screen shot)

SNIDCEL 3.1.c

Desc

(screen shot)

SNIDCEL 3.2

Desc

(screen shot)

v.1.0 - Waypoints

v.2.0 - Clustered Points

v.3.0 - Layer Groups

v.4.0 - Time Dimension

v.5.0 - Audio

  • Adding audio to owl popup v.1
    *** uses GeoJSON file with audio code - different code than v2; no waypoint or image; has volume control
    Note: this file won't serve from secure server https & still show the audio icon?!(@ 2017-09-08)

  • Adding audio to owl popup v.2
    in a waypoint popup(@ 2017-09-08)

v.6.0 - Images

v.7.0 - Scroll-driven Navigation

  • Scroll-driven navigation v.1
    need to address different screen size, with different white space and image size (@ 2017-09-10)

v.8.0 - Elevation Plots

v.9.0 - Collapsable Menu

  • Route with 2 Images in popups v.2
    menu collapses into 'hamburger' style - stairs top & living stump (@ 2017-09-07)

  • // to collapse menu > collapsed: true
// L.control.layers(baseLayers,overlays, {position: 'topleft', collapsed: false}).addTo(map);
L.control.layers(baseLayers,overlays, {position: 'topleft', collapsed: true}).addTo(map);

v.10.0 - Knowledge Flashcards

Potential Questions ... ?

  • add excitement, be descriptive (2017-08-21 Parks Canada naturalist hint)
  • Q. How many people does it take to give this tree a hug, while touching each other's fingertips? How many people does it take to encircle their arms together and hug this tree? (2017-09-08)
  • Q. Can you guess the age of these trees? Can you guess how old these trees are? (2017-08-23)
    • have you ever seen a… ?(2017-08-21)
  • Q. What do you see that interests you? (2017-08-21)
  • Q. In this place there was once ... (2017-08-21)
  • Q. what memories and stories have you created in this place or about this place? (2017-08-23)
  • Q. Will you come again? will you return again? (2017-08-23)
  • Q. Can you guess how many stairs there are to come down here from above? (2017-08-23)
  • Q. Do you know, can you guess how much elevation has dropped coming downhill? (2017-08-23)
  • Survey user after use: Would you visit this place again? (2017-08-23) return again after looking at the trail guide? would you tell others what you know about your experience? (2017-08-23)

v.10.0 - Media Queries responsive to changing screen width

Still To Do ...

  • New Gantt chart for time

  • People to see:
    * Joan Morris 2017-09-15
    * Cheryl Bryce – community tool shed, private code site 2017-09-15
    * Chris Bone - gps route with too many points?; Sustainable community partnerships 2017-09-15
    * Brian from acupuncture – his daughter school is taking a trip to Todd in that, and was very interested in my electronic trail guide, "who knows maybe they'll use something like that someday" 2017-09-23
    * Ken – ask about creating me a geography nametag, business card, like Elaine made for me; research mapper, student researcher, etc. (2017-09-01)
    * Elaine, Eric, Val if any grad student studying in Mystic Vale, for example student in Nancy Turner's class help do some restoration, perhaps it was even restoration - Val may still be on leave (2017-09-01)

  • Customize the journey through navigation??? (2017-09-10)

  • Make owl sound louder in audacity file, reduce sound of footsteps (2017-09-04)
  • Leaflet get pop-ups to center in the screen so you don't have to scroll to see them (2017-09-08)
  • Quirk if pop-up window photo is off the edge, click icon again, it's a double click, and then the window will shift (2017-09-10)
  • Change title from tour guide to trail guide for all versions; tour means going through, Trail means going within (2017-09-04)
  • Purple is hard to see against satellite basemap (2017-09-04)
  • Green is hard to see against the open street map base map (2017-09-04)
  • Use same icon image of the walking route on the legend (2017-09-04)
  • change icon colour for route colors (2017-09-10)

  • Uni 201 photos change the photo at the parking lot, to show the centre path we started on

  • JavaScript in browsers: Do computers have to be told to use javascript in the browser from Rick Geog IT (2017-09-14)
  • For secure server, try copying all JavaScript files to my server and give the full URL with an HTTPS, then try to see if legend and cluster Maps will show; compass won't work either in secure server

  • SNIDCEL Icon classification: restoration, native plants, history, trail views, built structures (2017-09-15)
  • scan my field notes(2017-09-01)

  • Download mystic vale Sony photos (2017-09-01)
  • Photos: create Excel code files for photos at waypoint 2017-09-11

  • Download Garmin way points and routes (2017-09-01)
  • Clean up data (2017-09-01)

  • Mystic Vale: do round-trip (2017-08-30)
  • Map the track with less points (2017-09-15)

  • To speed loading, and reduce cache space for off-line viewing, after getting code correct, minify, reduced spaces, to create the smallest file (2017-09-15)

  • Time dimension: for 10 foot per sec start looking at the GPS to make sure that the start in place and time is correct (2017-09-15)
  • Change the size of the time controls, for finger use on small mobile devices (2017-09-15)
  • Remove the full-page control in the menu area of the legend (2017-09-15)
  • Tied to the length of time to actually walk along route (2017-09-04)
  • will this work off-line if the browser is opened online first without closing the browser? Would almost mimic geolocation (2017-09-04)
  • Stop start speed times one as opposed to times two (2017-09-04)

  • Use larger icons (2017-09-15)
  • Retina Vision: Image quality for retina vision iPad and iPhone needs to be higher resolution (2017-09-04)

**. CSS Media Queries for different screen sizes

  • using Chrome browser extension 'Viewport Resizer', to see how current webpage looks at different screen sizes
  • note devices with retina vision will respond with true device screen size, but needs the higher resolution of a larger screen size ... see Retina vision screens
  • use collapsable menus for small devices
  • CSS media queries for different screen size, map zoom, map center (look for ladies learning code example) (2017-09-07)
  • Adjust the font size through media query CSS code (2017-09-15)
  • CSS code for font size and screen size (2017-09-01)

  • Large font size for iPad (2017-09-04)

Media Query examples

1. Ask about story-telling in maps

2. JavaScript

  • do I need message "noscript" need Javascript to run this page?

3. CSS

  • make CSS media querie file for small/different screen sizes
  • Add SENCOTEN CSS to get SNIDCEL to display correctly Test page

4. GeoLocation

  • Browser security: check all http:// change to https:// - UVic server will start servig as https, so anything specifically addressed as http will not be secure - e.g. geolocaiton on mobile devices
  • >Mobile Geolocation Test

5. Language

  • Add SENCOTEN CSS to get SNIDCEL to display correctly Test page

6. User Testing

  • have trial-runs of different trail mapping options
  • what questions do users have?
  • useful?
  • Online survey, example survey monkey (2017-09-21)
  • Watch user interactions (2017-09-21)

7. Inquiry-based Knowledge "snippets"

  • flash card code for question-and-answer (2017-09-08)
  • what facts to share
  • how to make these facts interesting?
  • how to engage senses?
  • Tread lightly: boot, Bike, wheel (2017-09-01)
  • Warnings: darkness falls earlier, and stays longer in the ravine; the temperature is also cooler (2017-09-01)

  • add excitement, be descriptive (2017-08-21 Parks Canada naturalist hint)
  • Survey user after use: Would you visit this place again? (2017-08-23) return again after looking at the trail guide? would you tell others what you know about your experience? (2017-08-23)

  • Q. How many people does it take to give this tree a hug, while touching each other's fingertips? How many people does it take to encircle their arms together and hug this tree? (2017-09-08)
  • Q. Can you guess the age of these trees? Can you guess how old these trees are? (2017-08-23)
    • have you ever seen a… ?(2017-08-21)
  • Q. What do you see that interests you? (2017-08-21)
  • Q. In this place there was once ... (2017-08-21)
  • Q. what memories and stories have you created in this place or about this place? (2017-08-23)
  • Q. Will you come again? will you return again? (2017-08-23)
  • Q. Can you guess how many stairs there are to come down here from above? (2017-08-23)
  • Q. Do you know, can you guess how much elevation has dropped coming downhill? (2017-08-23)

8. Scroll-driven Navigation

  • scroll as in Sherlock (2017-09-08) Responsive Sherlock
  • Image quality for retina vision iPad and iPhone needs to be higher resolution (2017-09-04)
  • Left sidebar percentage of width media query
  • image set the width automatically in the media query (2017-09-04)
  • Large font size for iPad (2017-09-04)
  • Attribute remove improve by for leaflet map (2017-09-04)

9. Mystic Vale

  • RNS student restoration sites
  • Layer type -restoration

10. SNITCEL

  • ...

Wish List: ...

Things I'd like to eventually figure-out how to code, and add to Trail Guide ...

  • Base maps aerial photos from either UVic or CRD (2017-09-10)
  • Photo; zoom navigation for example bridge middle of stairs bottom have a close-up of the sign; Bowker creek skunk cabbage zoom in on the photo to another image (2017-09-10)
  • Off-line access

  • Help menu (2017-09-10)
  • Locator map (2017-09-10)
  • Splash introduction screen (2017-09-10)
  • Create a separate mobile site, with map only?
  • Webpage with a map, and an elevation of it
  • KML layer: can I have the windows etc. like a tour (2017-09-10)
  • Make elevation profile; Garmin software creates one, import the GPX file (2017-09-01)
  • Will Highcharts do an elevation chart and interact with the map, using that, long, elevation, time? (2017-09-26)
  • Elevation plot in Leaflet (2017-09-15)

  • Accessibility: Mystic Vale is not really accessible, there are lots of stairs, slippery, dry, vegetation-free trails, which will be wet, muddy and slippery once rains start - make of Alumni Trail data to make an accessible route (2017-09-01)

  • Images: Slide to see them (2017-08-23)

  • Timed audio: With moving track tour (2017-09-07)
  • Timed audio: Use GPS route, and dialogue of description (2017-09-07)

  • Get aerial photo, of UVic; make tiles to 256 x 256; get map box to serve my own files (2017-08-30)

How to Use ...

  • Create templates that can be populated by other user's data & uploaded to their own servers
  • Video or screen cast: show how to populate data code and web JavaScript and code template

Variations

  • Leaflet print map, like high charts, in the menu (2017-09-15)
  • will javascript work inside pop up with HTML? Flash card example ?? (2017-09-08)
  • Search ? (2017-09-15)
  • description based on choice of current season 2017-09-22
  • Geolocation: follow users location with movement
  • Include inset indicator map in the bottom right corner, to help user locate themselves on map when zooming (2017-09-08)
  • Neat line around the map for border (2017-09-08)

  • Time dimension: make time bar higher for touch iPad (2017-09-10)
  • Time dimension: show to change the feet per second (2017-09-10)
  • Time dimension: time subtracting hours for the local time (2017-09-10)
  • Time dimension: look at the map title grey font too light - light colour might be good for footer though (2017-09-10)
  • Time lapse: With photos (2017-09-14)
  • Time lapse: To show like a video (2017-09-14)
  • Time slider player; Route Marker moves and activates information windows and photographs (2017-09-08)

  • Google Earth tour! (2017-08-30)

  • Don't use compass unless using secure server location, because it won't work properly on mobile device, which needs a secure server for
  • geolocation functions (2017-09-04)

  • Movable compass (2017-09-07)
  • Code into HTML for different type to add onto the legend (2017-09-07)
  • Will cluster map work for layer group? (2017-09-07)
  • Add to template: scale, hidden menu legend (True or false) (2017-09-07)
  • Different color icons (2017-09-07)
  • look into green map icon use (2017-09-07)

Flashcards

  • SENCOTEN flashcards to work with off-line, try to reverse both languages on the same page (2017-09-15)
  • flashcards: in there a way to link to a certain term, in HTML code call e.g. with name? (2017-09-15)
  • Lekwungen vs SENCOTEN (Ruth Young)
  • Youth support - Elmer George (Ruth Young)

Time Dimension Route

  • Initial icon that moves can it be made to be an arrow pointing in the direction of travel (2017-09-15)
  • leaflet map with menu legend, turn on off layers, point of interest with windows; try to find leaflet time travel along route? (2017-08-30)
  • Look at leaflet route mapping to use for getting directions on the route (2017-08-30)