johnr's Map-it-Yourself project

Map-it-Yourself project
a small-screen web app that just got bigger!

see copyright notice. Page created 16-Sep-2022 updated 2-Nov-2022. Use the button groups above to navigate quickly around the site.

This browser-based application uses GPS data to show and track the user's location on a map image, which can be anything from a scanned-in paper map to a photo of a site plan or something drawn from scratch. I initially called it MapApp, but that name is now far from unique!

It all started back in 2012, when a friend kindly gave me a Blackberry™ Curve 9300 smartphone - a contract upgrade she didn't need at that time. My own mobile, a Philips™ C12, was at the end of its useful life (c.12 years?); I'd extended that life by replacing the original battery with one home-made from individual Ni-MH cells, but lately it had started to shut down intermittently, for no apparent reason. So I lost no time in getting the Blackberry unlocked and transferring my SIM card to it (I'm still using it, btw!).

I quickly discovered that the Blackberry's browser was happy to load pages from a microSD™ card, and it had a (proprietary) geolocation API, providing real-time latitude and longitude data. At the time I was accustomed to going on long walks with paper maps for guidance, so I did some experiments with scanned-in images from these, and by 2014 I'd written some code to compute grid co-ordinates (easting, northing), and position a flashing cursor over maps on the tiny screen. In 2022, having bought a cheap Android™ tablet, I modified the code to use the HTML5 geolocation API - so now it should run on pretty well any browser.

[MiY running on three devices]

The Curve's screen resolution is 320 x 240 pixels, and after a few trials I decided to use a 400 x 400 navigation window, with a similar size control panel below it (or to the right, on larger screens). That proved to be a good compromise between legibility and frequent scrolling, although I often had to zoom the browser when I hadn't packed my reading glasses! Map scales range from 100km (square), through 8km, 4km and 2km, down to 250m for finely-detailed local plans. At each scale, the "tiles" overlap by 50%, which I found to give a more intuitive feel when panning across an area, even though it meant more work "cutting up" the scans. Arrows and zoom-in icons indicate areas of the screen that can be tapped to pan, or to upscale towards a corner (provided the map tile is available!). A larger "tile" might sit better on current devices, but having invested so much time in making the 400px ones I'm sticking with them for now.

A tap on the centre of the map conjures up a summary of journey statistics. First is the total distance travelled so far "on the ground", and the average speed. Next, the distance and bearing "as the crow flies". The third box shows similar details if a journey destination has been set. Last is the speed and bearing between the two most recent trail points. The two check boxes respectively switch distances to metric, and bearings to degrees (instead of compass points).

The legend mimics some of the icons that mark locations on the map. The current-location cursor is actually animated, not only to catch the eye but also to avoid permanently obscuring any map detail. Different cursors appear according to the app state - running, awaiting location fix, stopped, or replaying a trail. Hairline crosses mark the two most recently plotted trail points.

I should state here that scanned-in maps exist only in my own portable devices, and are used solely for personal, non-commercial purposes. Should the app be made available to anyone else, they will need to create their own map images.

The control panel shows more information about the map and current location, sets various parameters, and enables trail (journey) information to be imported and exported. The scale graphic adapts to imperial or metric dimensions according to the stats setting. Find me loads an appropriate map at the current scale, and is useful if you've wandered off the edge! (I did try making the map tiles track location automatically, but found it rather distracting).

The Trigs selectors determine how often a location fix is processed (range 2 seconds to 1 minute), and the minimum traversed distance to force a new trail point to be plotted (range 10m to 1km). In effect these set the resolution, and hence the size, of the trail data. The AutoSave option saves details of all the settings, display and trail on every trail update. This "backup", which is also prompted for at the end of a journey, can be reloaded at startup, e.g. after a lunch break! Originally the only way I could implement it was by storing a "cookie", but now it uses the more elegant "local storage" facility.

Trails can be exported and imported as text files; the first line contains the start time, co-ordinates and altitude, subsequent lines list incremental changes to these. When Replay Trail is checked, a journey (including statistics) can be replayed step by step with the arrow buttons. The double arrow advances in steps equivalent to 1/10 of the entire journey.

The Use BG image feature requires some care in setting up, but can be very useful. It lets you replace a map tile with a portion of any image (including one taken by the device's camera) chosen via the Load image button. Typically this might be a visitor map or plan on-site, as in this example (photographed in a display case with the Blackberry). Initially the image is shown in "calibrate" mode, where the size and position can be adjusted by tapping the icons until they match the current settings (obviously much easier when a scale is included!). The green zoom icons are for coarse adjustment, the magenta ones for fine tuning. Settings are retained until a new image is chosen. I've converted a few such images into properly formed map tiles, which can be navigated at the most detailed scale settings.

The Area list is defined by a JS configuration file, which specifies a "home" map tile for each of an arbitrary number of areas. This replaces an earlier scheme which used labels on the largest scale maps, and was hard-wired into the app code.

Over time, as I built up a collection of maps, I began to need an on-screen reminder of which areas were covered, and at what scale. This is now automated; a separate utility scans the map folders and creates an image of coloured blocks to overlay on a large-scale map, like the one shown on the tablet above. The pretty icon at the bottom left of the control panel is a key to the block colours and their overlaps. The letters (which prefix map file names) are loosely based on imperial map scales - inch [to the mile], half-inch, and two-inch. Or was it two-and-a-half?

I guess this begs the question why go to all that trouble when navigation apps are available free of charge? Well, firstly I'm used to the style and content of the printed maps and atlases I've bought, and prefer them to any of the alternatives I've seen. Secondly, I can launch and use my app without an internet connection - the tablet's wi-fi can remain switched off all day! But the plain truth is that I enjoy the challenge of creating software like this from scratch, and giving it exactly the features I want. The trail export for example can be used, following a site walkabout, to fine-tune a completely new map such as the one I'm making (glimpsed on the laptop screen above) of some local playing fields for a "Friends" group. That's why I've named it Map-it-Yourself.

To assist the process of drawing from trails, I've written a utility named PlotTrail. It represents a trail as a series of points, on a 400 x 400 pixel "tile" which can be scaled and navigated in exactly the same way as MiY's maps. The points can optionally be joined with lines, and/or tagged with colour-coded altitude bars (displayed either vertically or horizontally, to suit the trail geometry). Copy Plot copies the image to the clipboard, whence it can be pasted into a drawing environment.

On a technical note, I've been working to improve MiY's conversion from GPS data (latitude, longitude and ellipsoid height) to map co-ordinates (eastings, northings and height "above sea level"). Strictly speaking, this requires a Helmert Transformation from the WGS84 datum to OSGB36 - serious computing, the prospect of which rekindled a familiar battle between the Maths and Engineering departments of my brain. As usual, the latter won; to conserve both my sanity and the tablet's battery power, I coded up a (comparatively) simple TM projection without the datum change. Of course, that produced co-ordinates that were quite a few metres out - but I added tweaks to get the right answers at a local reference point. The improved version refines those tweaks based on latitude and longitude, and now gives results that I believe should be correct within a metre or two over most of Britain.

Altitude, however, has proved to be a minefield. Having carefully crafted a tweak along similar lines (using a "strict" transformation as reference) I found that my tablet "pre-corrects" the measured altitude; as I understand it, some devices do this and others don't! So I've put a switch in the config file to turn the conversion on or off as required.

Map-it-Yourself projecta small-screen web app that just got bigger!

Map-it-Yourself project
a small-screen web app that just got bigger!