[Script] WMEOpenData v1.31 (20130513)

[Twister_UK]

[Split from thread formerly known as OS Open Data mistakes]

I'm using the OS data more and more, definitely the best resource out there.

I'd there a better viewer than the OS one? I'd like to use more of the screen!

I too was getting a bit frustrated at the small map window offered by the OS site, so I had a quick play around with greasemonkey and came up with the following:

Code: Select all

// ==UserScript==
// @name                OS OpenData FullHeight
// @namespace           http://greasemonkey.chizzum.com
// @description           Increases height of map window on OS OpenData site
// @include      http://www.ordnancesurvey.co.uk/oswebsite/opendata/viewer/*
// ==/UserScript==

var elmDeleted = document.getElementById("sitefooter");
elmDeleted.parentNode.removeChild(elmDeleted);
var elmDeleted = document.getElementById("logos");
elmDeleted.parentNode.removeChild(elmDeleted);

var elmModify = document.getElementById("wrapper");
elmModify.style.padding = '4px';
var elmModify = document.getElementById("mapmast");
elmModify.style.height = '16px';
var elmModify = document.getElementById("map");
elmModify.style.height = (window.innerHeight-30)+'px';


Edit: The latest version (see thread title) is now available from userscripts.org - see: http://userscripts.org/scripts/show/137249

It's my first GM script, so it's almost certain to contain at least one show-stopping bug that'll prevent it from running on any system other than mine I also haven't bothered seeing if it's possible to capture the window resize event to automatically reset the map view dimensions when the browser window is resized, but a manual refresh of the page does the job almost as well.

What it does do (assuming it's working as expected - see previous disclaimer!), is remove everything outside of the map rectangle other than the boundary layers menu, and then resize everything so that it just fits within the available browser window area without requiring scroll bars. Which is nice. Originally tested using Firefox+Greasemonkey, it also appears to work OK in Chrome using its native support for GM scripts. Even nicer.

[Dave2084]

Works for me with Win 7 x64 and Firefox v13.0.1.

Thanks a lot, this is awesome!

[Twister_UK]

You're welcome You do have to wonder why the OS decided to waste half the screen, given that if someone is viewing a page containing map data then, you know, they're probably more interested in the map data than anything else the page may contain...

Anyhoo, here's a small update which adds auto resizing, and moves the boundary layers menu button to just below the search box, freeing up that strip at the top of the screen for a few extra pixels-worth of map data. Still works OK on FF+GM and Chrome here.

Code: Select all

// ==UserScript==
// @name                OS OpenData FullHeight
// @namespace           http://greasemonkey.chizzum.com
// @description           Increases height of map window on OS OpenData site
// @include      http://www.ordnancesurvey.co.uk/oswebsite/opendata/viewer/*
// ==/UserScript==

function resizemap(event)
{
  // resizes map viewport whenever browser window changes size
   var elmModify = document.getElementById("map");
   elmModify.style.height = (window.innerHeight-10)+'px';
   elmModify.style.width = (window.innerWidth-10)+'px';
}

// remove the OS logos from the top...
var elmDeleted = document.getElementById("logos");
elmDeleted.parentNode.removeChild(elmDeleted);

// ...and the huge "about    help    keep in touch" bit from the bottom
var elmDeleted = document.getElementById("sitefooter");
elmDeleted.parentNode.removeChild(elmDeleted);

// reduce the width of the whitespace around the map viewport
var elmModify = document.getElementById("wrapper");
elmModify.style.padding = '4px';

// move the "boundary layers" menu selector into the map viewport
var elmModify = document.getElementById("mapmast");
elmModify.style.height = '0px';
elmModify.style.top = '64px';
elmModify.style.right = '64px';
elmModify.style.zIndex = '2';
// adjust the "boundary layers" border and background colour so it shows up nicely
var elmModify = document.getElementById("mapoptions");
var childModify = elmModify.getElementsByTagName("LI");
childModify[0].style.borderStyle = 'solid';
childModify[0].style.backgroundColor = '#FFFFFF';
childModify[0].style.borderWidth = '1px';

// re-render the map now we're done removing/adjusting all the original elements...
resizemap();

// and finally add in a hook to the onResize event, to call resizemap() each time the
// browser window changes size
window.addEventListener('resize', resizemap, true);


[Dave2084]

Cool!

[Timbones]

Has anyone worked out how to open the OS Viewer at a certain location? That would make for a very handy bookmarklet...

[xteejx]

I want that too! Or to open it in OS Musical Chairs which has the OS Locator boxes as an overlay already. It's a similar format to WME and cartouche i.e. lat=xxxx&lon=xxx. Maybe one of you clever buggers can get it working?

[Twister_UK]

Code: Select all

// ==UserScript==
// @name                OS OpenData FullHeight
// @namespace           http://greasemonkey.chizzum.com
// @description           Increases height of map window on OS OpenData site
// @include      http://www.ordnancesurvey.co.uk/oswebsite/opendata/viewer/*
// ==/UserScript==

function resizemap(event)
{
  // resizes map viewport whenever browser window changes size
   var elmModify = document.getElementById("map");
   elmModify.style.height = (window.innerHeight-10)+'px';
   elmModify.style.width = (window.innerWidth-10)+'px';
}

function recentreMap(eastings, northings, zoom)
{
   // call the OS provided functions required to point the map at a
   // given grid ref and zoom level
   mymapCenter = new unsafeWindow.OpenSpace.MapPoint(eastings, northings);
   
   // not sure why, but passing zoom directly into setCenter prevents the
   // mouse scrollwheel from zooming in/out of the recentred map...  as a
   // workaround for now, test the value of zoom and use hardcoded calls
   //unsafeWindow.osMap.setCenter(mymapCenter, zoom);
   if(zoom==0)unsafeWindow.osMap.setCenter(mymapCenter, 0);
   if(zoom==1)unsafeWindow.osMap.setCenter(mymapCenter, 1);
   if(zoom==2)unsafeWindow.osMap.setCenter(mymapCenter, 2);
   if(zoom==3)unsafeWindow.osMap.setCenter(mymapCenter, 3);
   if(zoom==4)unsafeWindow.osMap.setCenter(mymapCenter, 4);
   if(zoom==5)unsafeWindow.osMap.setCenter(mymapCenter, 5);
   if(zoom==6)unsafeWindow.osMap.setCenter(mymapCenter, 6);
   if(zoom==7)unsafeWindow.osMap.setCenter(mymapCenter, 7);
   if(zoom==8)unsafeWindow.osMap.setCenter(mymapCenter, 8);
   if(zoom==9)unsafeWindow.osMap.setCenter(mymapCenter, 9);
   if(zoom==10)unsafeWindow.osMap.setCenter(mymapCenter, 10);

}

// remove the OS logos from the top...
var elmDeleted = document.getElementById("logos");
elmDeleted.parentNode.removeChild(elmDeleted);

// ...and the huge "about    help    keep in touch" bit from the bottom
var elmDeleted = document.getElementById("sitefooter");
elmDeleted.parentNode.removeChild(elmDeleted);

// reduce the width of the whitespace around the map viewport
var elmModify = document.getElementById("wrapper");
elmModify.style.padding = '4px';

// move the "boundary layers" menu selector into the map viewport
var elmModify = document.getElementById("mapmast");
elmModify.style.height = '0px';
elmModify.style.top = '64px';
elmModify.style.right = '64px';
elmModify.style.zIndex = '2';
// adjust the "boundary layers" border and background colour so it shows up nicely
var elmModify = document.getElementById("mapoptions");
var childModify = elmModify.getElementsByTagName("LI");
childModify[0].style.borderStyle = 'solid';
childModify[0].style.backgroundColor = '#FFFFFF';
childModify[0].style.borderWidth = '1px';

// extract the starting coords/zoom from the url...
var userloc = document.location.href;
alert(userloc);
upos = userloc.indexOf("?e=");
if(upos != -1)
{
   eastings = userloc.substr(upos+3,6);
   upos = userloc.indexOf("&n=");
   if(upos != -1)
   {
      northings = userloc.substr(upos+3,6);
      upos = userloc.indexOf("&z=");
      if(upos != -1)
      {
         zoom = userloc.substr(upos+3,2);
         //...then recentre the map 1s after the page has loaded - we need to wait a
         // bit to allow the OS scripts to generate the map in the first place and
         // centre it at the default location before going in and messing with it

         // change the 1000 at the end of the following line if you need to alter the delay length,
         // the delay is defined in milliseconds hence 1000 here = 1s as mentioned above
         setTimeout(function(){recentreMap(eastings,northings,zoom)},1000);
      }
   }
}

// re-render the map now we're done removing/adjusting all the original elements...
resizemap();

// and finally add in a hook to the onResize event, to call resizemap() each time the
// browser window changes size
window.addEventListener('resize', resizemap, true);


This update should allow the map to start off centred at any given coordinates and zoom level, passed in via URL parameters. Unfortunately I haven't yet got my head round how to guarantee the recentering code waits for the default map position to be set up first, so for now I'm just bodging it with a 1s delay after the page finishes loading, and if your PC/network connection is slower than mine you may need to change this (see comments in the code above)... Also, it only works in Firefox at the moment, so still some work to be done.

With that said, for those people who are able to get this version of the script working OK, here's how you actually use it...

To pass in the map centrepoint and zoom level you want to start off at, add the eastings, northings and zoom level to the end of the OpenData URL as follows:

Take the base URL http://www.ordnancesurvey.co.uk/oswebsite/opendata/viewer/

Then add the eastings ?e=EEEEEE

northings &n=NNNNNN

and finally the zoom level &z=Z or &z=ZZ

replacing the EEEEEE, NNNNNN and Z/ZZ with the appropriate values. Note that the eastings and northings are both 6 digits, and the zoom level is 1 or 2 digits (the zoom levels run from 0 to 10). Minimal error checking is performed on these parameters in this version of the script, so be careful!

As an example, here's a fully modified URL which, with the aid of the above script, point the OpenData map at the part of the world I used to call home as a kid...

http://www.ordnancesurvey.co.uk/oswebsite/opendata/viewer/?e=427500&n=566000&z=9

[xteejx]

Would you be able to modify it for the OS Musical Chairs site at all? The urls are very similar

Sent from my GT-I9100P using Tapatalk 2

[Twister_UK]

Would you be able to modify it for the OS Musical Chairs site at all? The urls are very similar

I think I'm missing something here - OS Musical Chairs is already using the full browser window to display the map data, so you don't need my script for that, and it already has a permalink feature for bookmarking specific locations, so you don't need my script for that either...

[xteejx]

I meant Tim but if you can do it, great.
I want a bookmark link similar to the open in WME or open in cartouche ones where with the click of a button, a new tab is opened showing the same place on osmc as is open on WME.
Does that make sense?

Sent from my GT-I9100P using Tapatalk 2