Ordnance Survey have announced that they're withdrawing the OS OpenSpace API and none of the websites used by the script files here now work.  It does not look like any of them are going to update to Ordnance Survey's latest API.  When you open any of the websites listed here you get a 'API Key has been blocked by Administrator' message or the website has been removed by the author. 

If you want to look at classic OS maps then your options are now very limitted. The OS developers website has some example code and map pages. This one gives a classic map - https://labs.os.uk/public/os-data-hub-examples/dist/os-maps-api/leaflet-zxy-27700-basic-map.php?auth= .  You don't need to be a developer to use the webpage, just go to the URL and you get a full page map.  There are examples with other map styles.  Go to https://labs.os.uk/public/os-data-hub-examples/  look at an example webpage and then click on the Open link to run the example.

 

osbookmark.js GPX loader/exporter for Ordnance Survey Maps

Instructions:


Setting up a bookmark for the osbookmark.js JavaScript file.
  1. Firefox: Drag the following link to your browser’s bookmark toolbar.
    Internet Explorer: right-click on the following link and “ Add to Favorites…”
    Microsoft Edge: see the appendix at the bottom of this web page.
    This is the link:osbookmark.js
  2. Go to a web site that has an OS Map on it e.g. http://www.kap.toadstone.com/kapbook/osmap.html and then run my script by clicking on it in your favourites or reading list.

For an alternative version that uses the Google place name search use this version of the bookmark.
Setting up a bookmark for the xpbookmark.js JavaScript file.
  1. Firefox: Drag the following link to your browser’s bookmark toolbar.
    Internet Explorer: right-click on the following link and “ Add to Favorites…”
    Microsoft Edge: see the appendix at the bottom of this web page.
    This is the link:xpbookmark.js
  2. Go to a web site that has an OS Map on it and then run my script by clicking on it in your favourites or reading list.

A version for the Android default browser that uses the Google place name search use this version of the bookmark.
You can also use this on the PC desktop browsers if you want.  The menus are bigger to make it easier to use on a smartphone but they are a bit too big for a PC browser.
Setting up a bookmark for the osbookmark10.js JavaScript file.
  1. Firefox: Drag the following link to your browser’s bookmark toolbar.
    Internet Explorer: right-click on the following link and “ Add to Favorites…”
    Microsoft Edge: see the appendix at the bottom of this web page.
    This is the link:osbookmark10.js
  2. Go to a web site that has an OS Map on it and then run my script by clicking on it in your favourites or reading list.

I have a .zip file of Firefox bookmarks here.  This is really for use when you boot off a UBuntu DVD although you can import into the desktop version of Firefox if you want. Be careful not to restore into your desktop version because that will wipe your existing bookmarks but if you use the import from HTML option that will just add the bookmarks to your existing ones.  Ubuntu version  16.04.7 is a good one to use.

The XP version includes both a small Google map and an Ordnance Survey map. The Google map search functions are used and the results are used to center both maps. You can search for a place name, postcode or a latitude,longitude comma seperated pair. A latitude,longitude comma seperated pair looks like this '51.482252, -0.604248'. When using place names you may need to add ',uk' at the end, e.g. 'Reading, UK'. Having both maps works well.

The script lets you:

  1. Display an OS map.
  2. Center the map on a place name.
  3. Choose the size of the map by adjusting the div container size.
  4. Import GPX tracks or routes and display as markers.
  5. Add markers by clicking on the map.
  6. Edit marker names and descriptions.
  7. Delete markers.
  8. Export markers in GPX track, route,waypoints and GPSSC route format.
  9. Convert co-ordinates to/from easting,northing to longitude,latitude.

The script works by extending the functionality of a web page by adding additional JavaScript code.  In this particular case it tries to replace the browser display of the web page contents with new contents generated by the additional JavaScript.  It does not alter the original web page on it's host server.  Scripting in this way allows the API key on the original web page to be re-used to generate a new map with new functionality.

Screen shots

The script adds a dialog window to the top of the web page.  I can show some of the dialogs here but can't show any maps because of OS rights etc.

screen1.gif

screen2.gif

screen3.gif

screen4.gif

Adding to Favorites in Internet Explorer

IE might issue a warning that the bookmark on this page could be a security risk.  This is because a malicious script might be able to access the original web pages host server in undesirable ways or maliciously extract info that you enter on the original web page.  This script does not contain any malicious code but scripts from other sources might. Therefore care should be taken when bookmarking and running scripts to make sure they are not malicious.  If you understand JavaScript a good way to do this is to  manually check the JavaScript by looking at it's contents. As a general rule bookmarklets are safe on a web site where you do not enter any personal information or create emails. This type of bookmark is known as a bookmarklet for more general information see the two links below.

http://en.wikipedia.org/wiki/Greasemonkey
 
http://en.wikipedia.org/wiki/Bookmarklet
 

If you want to look at the JavaScript use these links.

https://osmap.netlify.app/osbookmark.js

https://osmap.netlify.app/xpbookmark.js

 

The following web sites have OS map web pages that you could use with this script. 

http://osgb.ndrw.co.uk/gpx_track/gpx_track.html?test.gpx

 

http://wtp2.appspot.com/wheresthepath_old.htm note: this web site has a high usage and may run out of map tiles so consider using another. IE only

http://www.kap.toadstone.com/kapbook/osmap.html

http://monkeyspoon.com/peak-district-mountain-biking-route-map

http://www.electricchili.co.uk/test-map.htm?f=Ordie001.xml

http://www.leechfamily.myzen.co.uk/w-upper-teesdale.htm

http://www.zen180727.zen.co.uk/maps/gaz.html

http://www.rowmaps.com/showmap.php?place=Oxford&map=OS&lat=51.752&lon=1.25763&lonew=W

http://www.bikehike.co.uk/mapview.php

http://www.pooleharbourheritageproject.org/media/harbourmap.html You will need to set the div size on this page.

http://routopedia.com/what-routes-are-right-for-me/about-mayfield/mayfield-5-6-mile-routes/loop-via-moat-farm-and-bungehurst-farm/

qrmap.jpeg

When using these JavaScripts with maps hosted on htpps web sites in IE you might see this message.

only.jpg

It's because the JavaScripts are on a http web site, click Show all content and try the JavaScript again and it should work.  Firefox and Chrome based browsers such as Edge and Opera are likely to block the JavaScripts because of that.

https://www.yorkshirewalks.org/diary06/maps/map196.htm

https://www.walksaroundbritain.co.uk/maps/LiverpoolMap.html

Technical overview

Any web page that has an Ordnance Survey OpenSpace map on it has an API key in it's JavaScript.  The OS OpenSpace API matches the key against the web page URL.  If they match then your browser can fetch map tiles from the OS map server.  See the OS web site for more information on OS OpenSpace.

The script will work with most OS OpenSpace web sites but not all.  You may find that some web sites are faulty and do not display the OS map because their JavaScript is not suitable for your browser.  In that case the script may still display the map ok because it uses it's own JavaScript.  So even if the original web site does not display the OS map it is still worth trying this script.  The script will not work with web pages that do not contain an OS OpenSpace API key e.g. those that contain GetAMap maps or jpg images of maps. 

Using the script

  1. Allow the map web page to fully load before starting the script. 
  2. The script was written for IE8 in other browsers it may have limited functionality.  It works ok in Opera and Firefox.
  3. The script windows are effected by the CSS (Cascading style sheets) code in the original web page.  This can cause variations in the font sizes or text positions.  You may want to experiment with various web sites and browsers to find which one works best for you.
  4. The mouse left click for deleting markers has strange effects on the left click drop down selector in IE8.  If clicking the drop down selector does not register try using your up/down keys to select the row.  Other browsers do not have this problem.  This is likely caused by the way the OS API handles browser events.
  5. The drop down menus only let you select an option once.  If you want to select the same option twice you can't.  You must select another option first.  This is how browser drop downs work. 
  6. When entering a place to search for only enter the town name.  OS do not use county names or countries.
  7. When using the 32 Shrink control window option the window is reduced to a very small window in the top left corner.  To restore the window click on it.  30 Print is similar but you might not be able to restore the window so export and save any markers before using this.
  8. The 31 'map' div size" option has no size restrictions on it so if you want to set the div size to 300% you can and this will give you a very big map.  Your browser will however struggle with maps of that size.
  9. All latitude and longitudes displayed and exported/imported by the script are WGS84 and not OSGB36 as you might expect with an OS map.  There is a difference of about 100 metres between the two standards.
  10. Be kind to the web sites that you use the script with.  If you find their tile usage is high do a Google search for another site and use that instead.  There are currently only a few sites that use the OS Openspace maps but many of these sites seem to have low usage.
  11. The Convert Longitude to Easting conversion uses the OS API for calculation so you normally need to have a map loaded for this to work.  IE8 seems able to use cached files for this so might work offline too.
  12.  Please refer to and meet any conditions of web sites that you use the script with.  As far as I know there are no conditions that apply specifically to using bookmarklets scripts but that may change in the future.
  13. You use the script entirely at your own risk.  It is only tested in a limited way and bugs and inaccuracies may exist.
  14. The script as a whole is copyright of Steve Matthews. However much of it is generic JavaScript and you are welcome to copy parts of it and re-use them in your own scripts. 

 

The following web sites have OS map web pages that you can NOT use with this script.  

These might be of interest to you for their Ordnance Survey map content.

http://maps.the-hug.net/

Links to other things on my web site

If you want a Google Map version of this web page then click ...Here...

A utility to fix USB GPS jumping mouse problems.
http://www.stevematt.f9.co.uk/FixSerial/fixserial.htm

GPSSC Laptop safety camera detector software.   
http://www.stevematt.f9.co.uk/ukspeedcamera/gpssc.html

A Microsoft Silverlight3 SRTM HGT file viewer (shuttle radio topography mission).
http://www.stevematt.f9.co.uk/sl/srtmviewer.html

Appendix

Microsoft Edge and the default browser in Android will not allow bookmarks to javascript files to be saved.  Instead you need to add a html web page as a bookmark and then edit the URL to point to the javascript file.  You might need to reopen Edge for the edit to take effect or maybe refresh the web page a few times.  There seems to be a delay before editted URLs come into effect.

In the Chrome version of Microsoft Edge go to Bookmarks and then Manage bookmarks and manually add a favourite using Add favourite.

In the default browser in Android,  once you have a bookmark saved you can open Favorites and right click the bookmark and edit the URL.

There is a copy of this web page and script files hosted on a https website here you can use these with maps hosted on https web sites and all websites in Microsoft Edge and other Chrome based browsers. 

 

The javascript URLs are:

OSmap javascript link1:

javascript:(function(){var script=document.createElement('script');script.src='https://osmap.netlify.app/osbookmark.js';document.getElementsByTagName('head')[0].appendChild(script);})()

Download a text file containing the javascript URL. url1.txt

Bookmarkable URL with OSB image, helps make a Android bookmark with a easy to see image. https://osmap.netlify.app/osb.html

qr1.jpeg

OSmap javascript XP link2:

javascript:(function(){var script=document.createElement('script');script.src='https://osmap.netlify.app/xpbookmark.js';document.getElementsByTagName('head')[0].appendChild(script);})()

Download a text file containing the javascript URL. url2.txt

qr2.jpeg

A new javascript for Android smart phones.  You can not place markers on the map in this version using Android.  Although you can load them through a GPX file.
  The menus are enlarged to make it easier to use on a smart phone display and there are some additional items in the menu for setting the map div size.

The smaller div sizes of 400*600 and 400*400 are useful for magnifying the map tiles.  Stretching the web page magnifies the tile size.

javascript:(function(){var script=document.createElement('script');script.src='https://osmap.netlify.app/osbookmark10.js';document.getElementsByTagName('head')[0].appendChild(script);})()

Download a text file containing the javascript URL. url3.txt

qr3.jpeg

 

Last updated 14 September 2021