Create a mobile-friendly campus walking tour by using a Slate portal page or Static Content widget with custom HTML, CSS, JavaScript, tour stop data, and a third-party mapping provider. The example in the Student Success Showcase demonstrates a self-guided tour with tour stop descriptions, images, walking routes, estimated distance, estimated walking time, and browser-based location services.
You can review the sample portal in the Student Success Showcase and use it as a starting point for your own campus tour experience.
📝 Note
This example uses custom code and third-party mapping services. Technolutions supports standard Slate portal configuration, but your institution is responsible for maintaining custom HTML, CSS, JavaScript, mapping-provider accounts, access tokens, and route behavior.
⭐ Get Inspired
This article was adapted from a post by Technolutions staff in the Slate Community Forums' Get Inspired space. Have a great idea for a Get Inspired post? Let us know!
Reviewing the Showcase example
The sample portal is named Get Inspired: Campus Walking Tour Portal in the Student Success Showcase. To review it, provision a Student Success Showcase environment through Clean Slate, then open the portal from Database → Portals.
🗺️ The sample portal is also available as a public-facing example: Campus Walking Tour sample portal
Planning the portal
Before copying or adapting the sample code, identify the tour content and services your portal will need.
Tour stops: List each stop in the order visitors should experience the tour.
Stop coordinates: Collect latitude and longitude values for each stop.
Stop descriptions: Write concise descriptions that work well on a mobile device.
Stop images: Upload images to Slate Files or another stable image host.
Mapping provider: Create an account with Mapbox or a similar provider for map tiles and walking directions.
Portal location: Decide whether the tour should live in a dedicated portal page or in a Static Content widget on an existing portal.
Adding the tour to a portal
The Showcase example uses a portal page or Static Content widget as the host for the tour code. Static Content widgets support text, merge fields, embedded media, HTML, CSS, and JavaScript.
Go to Database → Portals.
Open the portal that will host the walking tour.
Open the view where the walking tour should appear.
Add or edit a Static Content widget.
Add the HTML, CSS, and JavaScript from the Showcase example, then adjust it for your campus.
Save the widget and test the portal on a mobile device.
💡 Tip
If the tour uses Mapbox, create a dedicated public access token for the portal and restrict the token to the portal domains where it will be used. Mapbox URL restrictions do not apply to the default public token.
Updating tour stops and images
In the Showcase example, tour stops are defined in a JavaScript array. Each stop includes information such as the stop name, coordinates, description, and image path. Reordering the entries changes the order of the walking tour.
When updating the stop list:
Use clear stop names that fit on mobile screens.
Use landscape images when possible.
Use stable image paths, such as files uploaded to Slate Files.
Use lowercase filenames with hyphens and no spaces.
Test each stop image from the same portal context visitors will use.
Testing GPS and routing
Browser location services and walking directions depend on the visitor's device, browser, security settings, and network conditions. Test the portal under realistic conditions before sharing it broadly.
Open the portal over HTTPS. Browser GPS access generally requires a secure page.
Test in current versions of Safari and Chrome on mobile devices.
Avoid relying only on in-app browsers, such as email or chat app browsers, because they may block location access.
Confirm that the portal handles denied or unavailable location access gracefully.
Walk the route on campus to confirm that directions, distance estimates, and stop order make sense in practice.
Maintaining the portal
Because this example depends on custom code and a third-party mapping provider, assign ownership for maintaining the portal after it launches. Review the tour periodically when campus paths, building names, image URLs, or mapping-provider settings change.