You are not logged in.

#1 2009-11-26 16:26:27

barny1
Member
Registered: 2009-11-26
Posts: 4

OSM with grid overlay?

Hopefully there will be a simple answer to this, although I've searched and not found one so far.

I've been contributing to OSM for my area, but now I want to print some maps to give a wider perspective than my gps screen when I'm out mountain-biking, but I can't find out how to get a grid overlaid on the image so it is possible to work out my location on the paper map from the displayed coordinates on my GPS.  It looks like osmarender can overlay a grid but it appears that this is turned off on The Map.  Does anyone know of an existing renderer with grid displayed?

To make the grid usable it needs to have the gridline coordinates printed (e.g. on the edge of the map) as well as the image with gridlines overlaid.  Can Openlayers do this?

My personal preference would be for an OSGB grid to be shown, but I'd survive if it were WGS84.

Thanks
Ian

Offline

#2 2009-11-26 21:10:02

Vclaw
Member
From: Alba
Registered: 2009-02-25
Posts: 522
Website

Re: OSM with grid overlay?

I've just done a bit of playing about with OpenLayers overlays for the British grid.
Result here: http://osmalba.org/grid/

This is using the British Grid KMZ files from http://nearby.org.uk/downloads.html, for 100km and 10km grid lines. Use the layer switcher to choose (and to set it to default Mapnik instead of Gaelic if you want).
Though this is just grid lines, I don't know if there's any way of adding coordinates etc.

Offline

#3 2009-11-27 11:52:54

barny1
Member
Registered: 2009-11-26
Posts: 4

Re: OSM with grid overlay?

Wow, thanks for doing that!

I want a 1km grid (south-east UK will suffice) so it looks like I've got to roll my own.  I can write a program to generate the kmz file, but I need to know how to setup Openlayers to serve (say) Mapnik data and then overlay my grid kml file on it.    Once I've got the basics going I'll be able to try get the coordinates displayed around the map image.  Are there any beginners guides to setting up my own version of what you've got?

Seperate question: does anyone know if there is an OSM server with the UK in the OSGB projection?

Thanks again
Ian

Offline

#4 2009-11-27 12:00:03

barny1
Member
Registered: 2009-11-26
Posts: 4

Re: OSM with grid overlay?

Ah I just found this http://openlayers.org/dev/examples/graticule.html.  Looks like it is possible to get Openlayers to do what I want (in OpenLayer-speack the grid lines are called a graticule), just need to figure out exactly how to get my data source and grid displayed.

Turns out graticule isn't in OpenLayers 2.8, it's in the dev (trunk?) build at http://openlayers.org/dev/OpenLayers.js.

Last edited by barny1 (2009-11-27 14:44:56)

Offline

#5 2009-11-27 15:57:51

Alex McKee
Member
From: Gloucester, UK
Registered: 2008-01-17
Posts: 234

Re: OSM with grid overlay?

barny1 wrote:

Seperate question: does anyone know if there is an OSM server with the UK in the OSGB projection?

I don't think there is. This question has come up once or twice before.

Offline

#6 2009-11-27 16:15:38

barny1
Member
Registered: 2009-11-26
Posts: 4

Re: OSM with grid overlay?

OK so I took the html delivered by openstreetmap.org for an embeddable iframe (as referred to by the exported embedded html from The Map), modified two lines: change the script line referring to openstreetmap version of openlayers.js, to refer to the development trunk (http://openlayers.org/dev/openlayers.js), and added a new Graticule control to the map, and voila! a basic mapnik map with grid overlay and coordinates displayed. 

Html looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>OpenStreetMap Embedded</title>
    <style type="text/css">
        html {
            width: 100%;
            height: 100%;
    }
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        .olControlAttribution {
            bottom: 3px!important;
        }
    </style>
    <script src="http://openlayers.org/dev/OpenLayers.js" type="text/javascript"></script>
    <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
        var map, layer;
        function init(){
            map = new OpenLayers.Map ("map", {
              controls: [
                  new OpenLayers.Control.Attribution(),
                  new OpenLayers.Control.Navigation(),
                  new OpenLayers.Control.Graticule()
                  
              ],
              maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,
                                               20037508.34,20037508.34),
              numZoomLevels: 20,
              maxResolution: 156543.0339,
              displayProjection: new OpenLayers.Projection("EPSG:4326"),
              units: 'm',
              projection: new OpenLayers.Projection("EPSG:900913")
            });

            var attribution = 'Data by <a target="_parent" href="http://www.openstreetmap.org">OpenStreetMap</a>';
            var args = OpenLayers.Util.getParameters();
            if (!args.layer || args.layer == "mapnik") {
                var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
                   displayOutsideMaxExtent: true,
                   wrapDateLine: true,
                   attribution: attribution
                });
                map.addLayer(mapnik);
            } else if (args.layer == "osmarender") {
                var osmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender", {
                   displayOutsideMaxExtent: true,
                   wrapDateLine: true,
                   attribution: attribution
                });
                map.addLayer(osmarender);
            } else if (args.layer == "cycle map") {
                var cyclemap = new OpenLayers.Layer.OSM.CycleMap("Cycle Map", {
                   displayOutsideMaxExtent: true,
                   wrapDateLine: true,
                   attribution: attribution
                });
                map.addLayer(cyclemap);
            }

            if (args.marker) {
                var markers = new OpenLayers.Layer.Markers();
                map.addLayer(markers);
                markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(args.marker[1], args.marker[0]).transform(map.displayProjection, map.getProjectionObject())));
                map.marker = true;
            }

            if (args.bbox) {
                var bounds = OpenLayers.Bounds.fromArray(args.bbox).transform(map.displayProjection, map.getProjectionObject());
                map.zoomToExtent(bounds)
            } else {
                map.zoomToMaxExtent();
            }

            var size = map.getSize();
            if (size.h > 320) {
                map.addControl(new OpenLayers.Control.PanZoomBar());
            } else {
                map.addControl(new OpenLayers.Control.PanZoom());
            }
        }
    // -->
    </script>

  </head>

  <body onload="init()">
    <div id="map"></div>
  </body>
</html>

Now I want to to see if I can get an OSGB overlay (like on the second map down on this page http://www.bdcc.co.uk/Gmaps/BdccGmapBits.htm but of course using OSM data).  That may take rather more effort.

Thanks Vclaw for the pointer!

Last edited by barny1 (2009-11-27 16:17:06)

Offline

Board footer

Powered by FluxBB