pawagit / randomch

A Google Apps Script (GAS) powered Openlayers 6 (OL6) Web App making use of the Swisstopo's GeoAdmin REST API and WMTS services

randomCH

A Google Apps Script (GAS) powered Openlayers 6 (OL6) Web App making use of the Swisstopo's GeoAdmin REST API and WMTS services

tl;dr

This Google Apps Script Web App (GAS web app) takes the user to random locations within Switzerland and displays the location's name and altitude on the Swissimage orthophoto mosaic map.

The aim of this project is to learn and understand the underlying techniques and tools involved.
It serves as a personal quick reference for further projects.

Any improvement suggestions are appreciated! 😃

Technologies used

• Google Apps Script (GAS) - Standalone Project hosting the App
• Google Sheets - Store point data created by the app
• Bootstrap 5 - CSS Framework
• Openlayers 6 - Build the map
• Proj4 - Handle EPSG:2056 & EPSG:21781 coordinates (Swiss Coordinate System)
• GeoAdmin REST API - XYZ Tile Layer (map) and Data Query (overlay)
• Screen Wake Lock API - Avoid screen sleep on mobile devices
• Day.js - Apply custom Swiss Locale to timestamps (Schwiizerdüütsch)
• Favicon Generator. For real. - Create a cross-platform favicon pack

What does the Web App do?

• Random Coordinates every 15 seconds, confined to Switzerland
  Every 15 seconds, the user is taken to a random location gefencenced to the territory of Switzerland. From this location, the view is slowly panning in a random direction until the next location is focused.
• 10k last visited places as Point Vector Layer
  The latest 10k random coordinates the app generated are fetched from the google spreadsheet and displayed as a point vector layer. They are clickable and feature a popover popup that also works in fullscreen mode.
• Like a location → separate sheet
  Users can 'like' the current position. After the next reload, these locations show up as 'star' icons.
• Telegram Share - Users can send the current location/info to a telegram chat
• Fullscreen Mode - Users can toggle the fullscreen mode
• Animation Control - Users can pause/start the anmiation
• Next Location - Users can forward to the next random location
• Info & Credentials Modal - An 'info' model displays information about the app.

How to get get your own copy of the app running?

1. Clone the source or get a copy of this GAS project.
2. Copy this template spreadsheet (stores point data generated by the app)
3. Adjust the const SSID='MY_SPEADSHEET_ID' to the newly copied spreadsheet's ID
4. Create a new deployment of the web app and visit the new Deployment Url

Details on what is used to build the app functionality

Google Apps Script / Google Workspace

• Google Apps Script (GAS) - Standalone Project
• Google Sheets - Store point data

Openlayers 6

• proj4 - Swiss Coordinate System EPSG:2056 & EPSG:21781 definition and map projection
• ol.format.GeoJSON() - Layer for Geofencing random coordinates
• ol.source.XYZ() - SWISSIMAGE map layer
• ol.source.Vector() - Point vector layer
• ol.Overlay() - feature.on.click popover popup
• ol.map.view.animate() - pan towards the target coordinates

GeoAdmin REST API

• XYZ Tile Layer
• Identify Features
• Height (Elevation)

Bootstrap 5

• popover
• modal
• class="position-absolute"
• boxicons

Screen Wake Lock API

• lock, release, handleVisibilityChange

Day.js

• custom Swiss Locale (Schwiizerdüütsch)

Javascript

• jQuery basics
• setTimeout(), clearTimeout()
• setInterval(), clearInterval()
• google.script.run.withSuccessHandler()
• parallel asyc calls awaited for further processing

HTML

• GAS Web App Embedding - Iframe hosting page (custom URL rewrite, allow whitelist)
• favicon, shortcut icon - all platforms

CSS

• no SASS ;-(
• minimal customisations