Come to this session or get lost. James McCarthy (MAD) Zachary Seguin (IST) Michael Tjendra (MAD)

Transcription

1 Come to this session or get lost James McCarthy (MAD) Zachary Seguin (IST) Michael Tjendra (MAD)

2 Map Rewrite Summer 2016

3 Why was the rewrite necessary? Issues facing users The map took a while to load 18 JavaScript files / 11 CSS files, most non-compressed We loaded all data layers upfront, downloading > 20MB of data Issues facing developers A lot of duplicate code Low cohesion, high coupling of modules making it difficult to add new features and to debug existing issues

4 What technologies did we use? ECMAScript 6 (the latest JavaScript specification) Improved syntax for defining classes and class inheritance (no more object prototype) String interpolation Arrow functions (cleaner syntax and automatic binding of this object) Node Package Manager (NPM) to acquire dependencies Gulp.js Build System Babelify to transpile ES6 to ES5, since ES6 is not fully implemented in all browsers Browserify: Allows us to use the require method available in Node.js for code running in the browser. Full list of new features in ES6:

5 The end result A customizable, configurable Campus Map A faster Campus Map 1 JavaScript file ( KB, minified), 1 CSS file ( KB, minified) On-demand loading of layer data We decoupled the map behaviour from the map UI, allowing us to reuse a majority of the code between the Campus Map web page and the Campus Map portal widget (web and app). We are now able to add new layers in minutes Also designed to be embedded into any webpage Added small, frequently requested features / bug fixes Ability to share link to map with layers selected Not interrupted with the cannot find location popup

6 The end result { type: 'uwapi', id: 'visitor-information', name: 'Visitor Information', icon_class: 'icon-info', endpoint: 'v2/poi/visitorinformation' }

7 { type: 'uwapi',... options: { iconlabel: (config, feature) => (feature.properties.room? feature.properties.room : (feature.properties.level? `FLOOR ${feature.properties.level}` : '')), popupcontent: (config, feature, latlng) => { let container = L.DomUtil.create('div'); // Description let description = L.DomUtil.create('p', 'large-popup-subheader', container); description.innertext = feature.properties.description; // Safety Office link let link_container =... link.innertext = 'AED Information (UW Safety Office)'; link.href = ' // Image if (feature.properties.image) { let image = L.DomUtil.create('img', 'popup-image large-image', container); image.src = feature.properties.image; } return container; } } }

8 We are planning to Open Source the Campus Map sometime next year.

9 Indoor Maps Indoor Directions MappedIn Integration with Campus Map

10

11 Indoor Maps Data sourced from MappedIn Access restricted to on-campus IPs (Wired, Wireless and VPN) Ability to link directly to a floor / room Example: MAD Lab Building Floor Room Indoor Maps button appears on popup when we have indoor maps for that building.

12 Challenges Implementing Indoor Maps MappedIn API required multiple API calls to request data for a building Loading map tiles from MappedIn was noticeably slow Could not request list of locations for just one buildings had to request all of campus Resolved by loading and transforming the data from MappedIn into the format we wanted Resolved by caching MappedIn map tiles locally at the University Needed to restrict access without impacting the user experience We tested authentication-based solutions, but this resulted in a poor user experience We decided to use IP-based access restrictions, limiting access to those connected the University of Waterloo network.

13 Indoor Directions Looking to add the ability to get directions between two rooms on campus We were hoping for indoor-only directions, but that is currently not possible Backend-implementation complete; now working on the front end UI Launch is expected in Winter 2017 Early Preview of Indoor Directions

14 Portal Integration Summer / Fall 2016

15 Portal Integration Most of the code is shared with the standard Campus Map; UI code is Portal-specific Required integration with AngularJS Inter-widget communication allows other widgets to control what is displayed when the map is loaded. Demo: Where is this empty classroom?

16 Search Coming early next year

17

18

19

20

21

22

23

24 Search Implementation Backend

25 HTTP Request

26 Doesn t Exist

27 Search Strategy Get all map data from open data API Store in MariaDB tables Build an API layer over top that responds to search queries Test out different search methods Searching all tables using LIKE operator on key fields Building a full text index of key fields and searching that Fuzzy search (Fuse.js)

28 Search Demo

29

30

31

32

33 Map Tile Generation Ongoing

34 Basemap data for tiles comes from OpenStreetMap

35

36

37

38 1 tileset: 403,444 PNG files Generated on demand with a script Impossible to check every tile manually. Would take >112 hours at 1 tile per second Why do we need to check? This ended up in Google Maps:

39 Demos: tilecompare inspectile

40 Campus Map Data and Contribute Ongoing

41

42

43 Orientation: Black vs. Gold

44 Sustainability Bike Facilities Waste Reduction: Bike Repair Station E-waste Drop-offs Feds Bike Centre Battery Drop-offs Secure Bike Lockers Textbook Drop-offs Bike Racks Feds Used Bookstore Used Clothing Drop-offs Green Spaces: Natural Areas and Gardens Green Roofs Sustainable Food: Farmer s Market Community Gardens Fair Trade Options Water Bottle Refill Stations

45 Contribute to Campus Map 1. Contribute your data directly to UWaterloo s Open Data on GitHub ( 2. Send your data in CSV or GeoJSON format to us to be added on UWaterloo s Open Data and the Campus Map. 3. Keep the basemap current by updating it on OpenStreetMap ( 4. Request new content types to be created on your WCMS site, to pull data to Open Data, and then add it on the Campus Map. 5. Contribute your code to add features/functionalities, improve performance, etc. 6. Talk to us about other ways you can contribute! :)

46 Thanks. Any Questions?