Credits
O-Map Viewer

Built with:

  • OpenLayers
    Open-source JavaScript library for interactive map rendering and spatial tools (BSD 2-Clause License). This application uses OpenLayers without external map tile services; therefore, no additional data attribution is required. License details available here.
  • Bootstrap 5
    Front-end framework released under the MIT License. License information available here.
  • ChatGPT 4 & 5

Description

This project was originally envisioned by Matthew Gooch in 2018. It was completed in 2025 following the availability of accelerated development workflows using ChatGPT and updated versions of OpenLayers. An earlier implementation existed as a Windows-only desktop application.

Previous development efforts are estimated at 300–400 hours. The current web-based version was completed in approximately 20 hours, with an additional 5 hours of later refinements.

The core goals of the project were to combine colour-picking tools similar to those found in GIMP, touchscreen-friendly zoom, pan, and rotation interactions, and basic leg-viewing with distance measurement. The result is a lightweight tool for studying maps ahead of races.

Status

This software is a work in progress. Known issues are listed here. Feedback, bug reports, and suggestions are welcome.

License:

Developed by: Matthew Gooch
Copyright © Matthew Gooch

All rights reserved. This code is not licensed for reuse.

Help & Instructions

How to use the Map Viewer:

  • Import: Click to choose an image to display
  • Colour picker: Adjust threshold for color similarity | Click the "colour picker" then the map to isolate a particular colour | Reset
  • Measure: Click "Measure" and then the map repeatedly to measure distances | Clear measure lines
  • Draw: Click "Draw" and then the map twice to draw a leg | Clear leg
  • Background: Click to change background color
  • Zoom/Rotate: Use buttons to zoom or rotate the view
  • Reset View: Resets the map to fit the image and zero rotation
  • Fullscreen: Use to enter full screen mode

  • Touch interaction: When using a touch screen device, touch interactions are available (pan/rotate/zoom)
Click on the image to isolate a colour.
To start, click 'Import' and select a map image.