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

schoolfrenz
  • Ray
  • Rating: 28 points Intermediate
    • 6 January 2018 10:40AM
    • 90 Views
    • Visits: 313
    • Discussions: 15
    • Responses: 18
    • Registered: 4 November 2009 05:24PM
    • Last active: 7 January 2018 07:07PM

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

    2 responses

    tonydunlop
    • Tony
    • Rating: 323 points Expert
      • 6 January 2018 03:17PM
      • 89 Views
      • Visits: 1,768
      • Discussions: 4
      • Responses: 191
      • Registered: 16 May 2009 11:44AM
      • Last active: 6 January 2018 02:32PM

      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")
      });
      osMap.addControl(scaleline);

      var scale = new OpenLayers.Control.Scale();
      scale.div = document.getElementById("scale");
      osMap.addControl(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

      schoolfrenz
      • Ray
      • Rating: 28 points Intermediate
        • 8 January 2018 01:23AM
        • 77 Views
        • Visits: 313
        • Discussions: 15
        • Responses: 18
        • Registered: 4 November 2009 05:24PM
        • Last active: 7 January 2018 07:07PM

        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.

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

        © Ordnance Survey 2016