This simple two page website contains a number of interconnecting technologies. Below is an explanation of each of them. A picture at the bottom shows how everything is connected.
This site is hosted on Amazon Web Services. Domain Name (RunTheCountry.uk) is registered with Go Daddy. Maps are provided by Google Maps as a result of an API call. Runs are a KML overlay on the maps which are created by another API call. Keyhole Markup Language is Google's defined standard for showing overlays on their maps Navigation on the page is controlled by Javascript There is simple Active Server Page code that creates most of the Javascript, manages the KML files and Images The KML files are created by first extracting GPX files from Strava and then a Visual Basic routine converts them to KML
This site is hosted on Amazon Web Services. This provides an external IP address (35.176.60.235) that is linked to the Domain Name in Go Daddy's DNS service. The AWS instance is EC2 t2.micro running Windows Server
The Domain Name (RunTheCountry.uk) is registered with Go Daddy. The Go Daddy DNS server (A entry) links RunTheCountry.uk to 35.176.60.235. Go Daddy also provide the SSL Certificates that are used by the webserver to provide HTTPS connections
Amazon Web Services EC2 (Elastic Cloud Compute) provides server instances that can be stood up and down very quickly. This site is hosted on a t2.micro instance, which is a low performance and low cost option for hosting low usage sites and can be used in the free tier and when this expires the cost is about 1p per hour. The site is Windows Server 2019 and runs IIS (Internet Information Services). A Windows console (RDP) allows remote access to this server.
Google Maps provides the maps. This is through an API call which is managed by Javascript on the web page. The API call includes a security key so that Google Maps knows who is requesting the image. The website makes three calls to the Google Maps API
1. Init Map - this creates the map and sets its type (Terrain - so that hills are visible) and sets the colour to greyscale (so that the runs stand out)
2. Create KML Layer - this adds the run information from the KML files to the maps. The KML files contain the colour information. These files need to be in a place that is accessible to Google Maps and are therefore hosted on the IIS Server
3. Move Map - when a user clicks on one of the runs the map is recentred to the start of the run
The AWS Server running Windows Server also runs IIS (Internet Information Services). This provides website hosting and file serving. There is only one website hosted on this server so all requests go to the default web server, and within this the default.aspx page is set to be the default if no specific file is requested. The file serving is used to provide the KML files to Google Maps. So that the Web Server handles requests for KML files correctly the MIME type for .kml files needed to be set for the website. IIS is configured to execute Active Server Pages (ASP), which are webpages that execute some of their code on the server before sending the page to the user's Web Browser. The ASP pages use VBScript which is an outdated technology that has now been replaced by ASP.NET, but that is a lot of complexity for such a simple site. IIS is configured to run Secure Sockets Layer (SLL), this enables HTTPS connections and avoids warning messages on browsers about trusting content.
There is a single ASP file that holds the main page for this site (default.aspx). This has the following components:
1. CSS - this site uses the W3 CSS (https://www.w3schools.com/w3css/defaulT.asp) which is a fairly simple and free CSS to enable speedy formatting of webpages
2. The HTML structure of the page - the header, sidebar, list of runs, map, and images. Each of these is a div and is formatted by W3 CSS
3. VBScript that connects to the Access database to read the list of runs and display these on the side list, it also creates the Javascript that manages the map overlays and page navigation
4. Javascript that handles the Google Maps API calls
This file is managed on the development machine by Visual Studio and a repository is held on GitHub
On the webserver is an Access database. This has a single table that is a list of runs and associated details. This also includes the KML file names for each run and this information is used by the VBScript to create the Javascript. The Access database has a module that isn't run on the webserver, but on the development machine, this converts GPX files to KML files. Both file formats are XML and this routine reads in one and outputs the other. The connection between the ASP pages and the Access database uses old technology, but it works and is a lot simpler than replacing the whole site with an ASP.NET site.
There are two methods for transferring files to the AWS server.
1. FileZilla - this is an alternative to FTP (which I couldn't get to work through AWS security) this is used to push KML files and new versions of the Access Database to the webserver
2. GitHub - this manages the ASP and HTML pages - these are pushed to the GitHub repository by Visual Studio and then pulled down to the AWS server by GitHub client
In both cases a manual copy is used to copy the files into the 'live' locations on the webserver.
The default.asp page contains two components - HTML and Javascript. The rendering (display) of the HTML breaks the screen into sections that are defined by the div sections in the HTML and then formats the text and colours according to the CSS (W3 CSS). The Javascript on the page does some live manipulation of the screen when the list items on the left are clicked. It's main task is to handle the API calls to Google Maps which are described above. The browser is also responsible for validating the security certificate of the site.
