Trig Point Web App

Having worked out the process of taking 360° photos using my trig point mount and managing to link them together I wanted to expand the scope of the simple tour that I’d created. However the current demo was manually assembled with a lot of hard coded HTML and Javascript which just wouldn’t work if I scaled it up. After some thought I decided that I could use the basic design that I had already but some further work would be needed:

  • Get a list of likely trig points
  • Alternative web hosting
  • Ideally the data defining the trig points is downloaded in a JSON file rather than being hard coded …
  • … which means that some way of managing and creating the JSON data is needed
  • Different coloured markers for the hierarchy of trig points.
  • It would also be neat if I could show 3D models of points of interest in a pop up window. Sketchfab provides a way of embedding content in an iframe so it should be possible.

Each of these is described in more detail below but here’s the link to the first version containing a few more panoramas ( and a lot more to go ) –

Trig Point List

I wasn’t intending to take a panorama from every trig point because there’s far too many of them 🙂 The Ordnance Survey has a useful search page and also you can download a CSV file of the whole lot. I eventually chose 40, mainly in the western end of the Brecon Beacons, the Gower Peninsula and a few in between ( but see comments about disk space below ). I’ll probably end up with fewer than this because:

  • Some will be destroyed
  • Some are on private land
  • Some of the views may not be very inspiring

Alternative Web Hosting

Up to now I’ve been using Google’s App Engine free tier to host demos that I can’t run on this WordPress site. Generally this has worked well except for one extremely annoying feature. Rather than uploading only the files that have changed the App Engine client will upload all the files each time. This is rather tiresome when you’ve got 100s of Mbytes of image files that don’t change from one update to the next1.

There are a number of other free options out there but I chose the GitHub offering as I already use it to store source code. The only problem at the moment is that they say “We recommend repositories be kept under 1GB each.” Each trig point takes about 25 Mbytes and I’ve got about 40 identified as candidates which may make it a bit tight for space eventually. I’ve decided not to worry about it for now because, as described above, this list will inevitably be reduced.

1Note that it’s not quite that simple because if you do two updates in quick succession then only the changed files get uploaded. However if you leave too much time between updates ( > 1 day? ) then the whole lot is uploaded. I found one Stackoverflow comment on this matter which seems to confirm what I’ve experienced.

Creating and Managing JSON Files

There’s a small amount of data that needs to be defined for each trig point – essentially the hard coded data in the demo. The JSON file to hold this data is fairly straightforward but, even though JSON file syntax is human readable, I really didn’t fancy manually maintaining it via a text editor.

I did search for some sort of graphical tool that would let me define the schema of the file, enter the data then export to a JSON file but I didn’t find anything useful. In the end I resorted to the old favourite of a spreadsheet with one trig point defined per tab. I then exported the data to CSV files and wrote a small shell script to convert the CSV files to a JSON file.

Even this wasn’t quite as straightforward as it should be because LibreOffice Calc doesn’t have an “export all to CSV” function but I found a suitable macro online. ( To be fair to LibreOffice, Excel doesn’t have this feature either 🙂 )

Coloured Markers

Leaflet only comes with blue markers as standard. However there are a number of free addons available and I chose this one. I also added a few more to use for showing whether an image was available or not available.

Embedding 3D Models

The pop up window for the “About” text and displaying the 3D models was based on this W3 Schools tutorial. The “About” text is straight HTML and the 3D model embedding is a slight tweak of the standard Sketchfab method.

At the moment one 3D model can be found on the Fan Brycheiniog trig point. This is a  model of Llyn y Fan Fawr generated from LiDAR data and a Google Map image overlay.

Final Comments

Overall this was a lot simpler than I thought. I ended up with around 340 lines of HTML/CSS and 380 lines of Javascript with a 200 line shell script to generate the JSON file. It should be noted that the Pannellum and Leaflet.JS libraries’ APIs are very well designed which made the integration very easy. I’ve worked with other libraries which insist on you jumping though many more hoops 🙂

Deploying the site via GitHub pages was also easy and I only found one slight wrinkle which was fairly easily solved:

I first published a very simple HTML file to make sure that everything worked but when I loaded the first version of the site I got the following error:

The page build failed for the `master` branch with the following error:
Unable to build page. Please try again later.
For information on troubleshooting Jekyll see:
If you have any questions you can contact us by replying to this email.

The link didn’t really provide any useful information as I am not, and don’t intend, using Jekyll. However I found a comment in a forum post which seemed to hint at a solution:

Because you specifically mentioned that your site is static HTML/CSS with no Jekyll, the easiest fix would be to disable Jekyll by adding a .nojekyll file like described here.

Sure enough adding a blank .nojekyll file in the root directory did the trick and everything deployed correctly.

At the moment the image and map panes are a fixed size and ideally they would resize as the browser window is resized. Fixing this is certainly a priority. Other than that it’s on to the interesting bit of taking panorama photos and uploading 3D models …

5 thoughts on “Trig Point Web App

  1. Richard

    Nice one. I am trying to swipe some of your Leaflet code but for a simpler use of having a map. Maybe with another panel showing photos, and particularly I like the JSON data store. I managed to strip down your last hard-coded one but boy the structure of the JSON file and taking trigmap.js apart are giving me a hard time 😉

    Liked by 1 person

    1. theretiredengineer Post author

      🙂 Most of the JSON file is taken up with storing the Pannellum data. If you just want a map with clickable icons that modify an image, i.e. like the bottom part of my page with the thumbnail, then it becomes much easier. I’ll e-mail you some documentation.

      Liked by 1 person

      1. Richard

        That will make it easier to get my head round. BTW is a web app newfangled terminology for what we used to call a website back in the day? Sure the JS does run a lot of the code on the browser, but I couldn’t really convince myself that this would run once loaded without a network connection – if only to dynamically load map zoom tiles, and panellum zoom tiles I believe. OTOH Wikipedia seems to be puzzled as to where to draw the line so perhaps it just reflects changing usage and increasing mobile-first design. And I’m behind the curve!

        Liked by 1 person

  2. Pingback: Alternative Map Overlays for Trig Point App | The Retired Engineer

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.