Jump to the following:

OS uses cookies to improve this website. Read about cookies

  • twitter
  • Google+
  • facebook

API Development Help

How do I show a map scale

  • Ray
  • Rating: 28 points Intermediate
    • 6 January 2018 10:40AM
    • Visits: 317
    • Discussions: 15
    • Responses: 19
    • Registered: 4 November 2009 05:24PM
    • Last active: 11 September 2018 05:40PM

    How do I show programatically a map scale below the large map control like the one at https://footpathmaps.com/

    2 responses

    • Tony
    • Rating: 323 points Expert
      • 6 January 2018 03:17PM
      • Visits: 1,769
      • Discussions: 4
      • Responses: 193
      • Registered: 16 May 2009 11:44AM
      • Last active: 25 April 2018 01:46PM

      Hi Ray,

      The map scale bars and scale ratio can be added to a map using the OpenLayers controls ScaleLine and Scale respectively. These controls need to be moved from the default position which is behind the OpenSpace logo at the bottom left of the map! I don't know how to place them where they are in footpathmaps.com, but the following example code places the scale controls below the map canvas and it works for me in a test on one of my maps.

      // Add scale bar and scale text
      var scaleline = new OpenLayers.Control.ScaleLine({
      div: document.getElementById("scaleline")

      var scale = new OpenLayers.Control.Scale();
      scale.div = document.getElementById("scale");

      Note the use of the DOM div elements which should be defined in the html, possibly after the map div. E.g.:

      div id="map" style="width: 800px; height: 600px; border: 1px solid black;">
      div id="scaleline" style="padding-bottom: 20px">
      div id="scale"> (leading <'s removed to prevent lines being swallowed by the forum code).

      For some unknown reason, setting the Scale DOM dev element using the constructor argument (as with ScaleLine) doesn't work with Scale for which it has to be assigned separately as in my code above.

      - Tony

      • Ray
      • Rating: 28 points Intermediate
        • 8 January 2018 01:23AM
        • Visits: 317
        • Discussions: 15
        • Responses: 19
        • Registered: 4 November 2009 05:24PM
        • Last active: 11 September 2018 05:40PM

        Thanks, Tony. I got it working and displayed on the map using div positioning:

        div id="map" name="map" style="border: 1px solid black; height:600px; width:1200px; position:relative;"
        div id="OSscaleline" style="background:white; position:absolute; top:200px; left:8px; z-index:1000;"
        div id="OSscale" style="background:white; position:absolute; top:250px; left:8px; z-index:1000;"

        You can see the results here: http://table-top-rallying.org.uk/Scale.png

        Another question for you or another moderator.

        On the above screen shot you can see a feature I have implemented - a mouse-controlled magnifier, which displays the map underneath with a magnification x2. Since the magnification window is small the OS logo takes up a lot of window space. Is there anyway I can remove it? I understand the OpenSpace licensing agreements, but the main map does show the logo and copyright message correctly. I just want to remove, if possible, from the magnifier.

        There may be responses for this discussion that are currently awaiting moderation and not visible yet.

        Please login or sign-up to respond to this discussion.

        © Ordnance Survey 2018