2

I'm somehow new in making web services using Openlayers and Javascript. I would like to create a clickable grid layer on top of a map (e.g. OSM) which first has a defined spatial resolution (e.g. 200 m) and of course when user zooms the grid size adapts to the new zoom level of the map. Also I want to show every cell of a grid with a specific colour, and when the user clicks on each cell some information can be shown. So, I guess each cell is like a feature in this layer (e.g. polygon). I was wondering if Openlayers has existing function to do such a thing that I can use, or do I have to code all of it? any help and suggestions on how I can manage to do this would be highly appreciated. Below is a link to a service that has created such a service, I would like to do the same... Thanx.

Link to sample:

http://koenigstuhl.geog.uni-heidelberg.de/osmatrix/#timestamp/allotments_area/8/12/-0.2142333984375/51.578776399817066

James Mc
  • 37
  • 1
  • 5
  • There are several solutions when searching for "OpenLayers grid example". What is your actual problem? – scai Oct 13 '13 at 16:02
  • @scai I've seen the examples, but I'm interested on how to create a grid like the one I put a link about it. The question is what technologies are used? and does OpenLayers have existing functions and methods for doing that? – James Mc Oct 13 '13 at 19:41

3 Answers3

4

Having developed the application you mention in your example, I can give you some hints on your question. The solution is pretty straightforward.

  1. The grid you see, i.e. the coloured hexagons, is simply map tiles, that are served by a custom back-end following the Tile Map Service schema (I used NodeJS) that, in turn, uses Mapnik (any other engine should work as well, e.g. GeoServer or MapServer) for rendering the images. The data is stored in a Postgres data base with PostGIS added on.

  2. Use a client-side library to create the map and add the tiled layer. OpenLayers and Leaflet both do the job well. (Leaflet, though, is a bit easier to grasp if your new to the topic).

  3. On client side you register a click-event handler on the Map, that you can use to get the coordinates of the mouse click. Use these coordinates, send them to your back-end and perform a spatial query on the data base to get the polygons adjacent to the coordinates. The server's response should then provide the geometries of the polygons (encoded in GeoJSON in this case, GML, KML should work fine as well) and whatever information you want to display.

  4. Use these polygons and add them to a vector layer using whatever colour scheme you want.

Have a look at the code to see how it works. The important files are osmatrix.js (connects to the back-end), control.js (main module, keeps track of everything) and map.js (surprisingly enough, everything map-related).

Oliver Roick
  • 76
  • 5
1

Openlayers has facilities for creating an interactive vector later. In order to create something like in the example, you would have to 1) add a vector layer, 2) write a loop that adds vector features to the appropriate locations on the map, 3) style the features as hexagons, and 4) create a stylemap that dynamically sets the feature color based on the appropriate parameters. Each step is facilitated by Openlayers.

kjelderg
  • 392
  • 3
  • 5
  • thanks for the tips. do you know any guide that shows how to perform the second step that you mentioned: writing a loop that adds vector features to the appropriate locations on the map? Thank you in advance... – James Mc Oct 23 '13 at 11:20
  • That's great. http://openlayers.org/dev/examples/kml-layer.html is an example of how to use OpenLayers to automatically populate a vector layer from a kml source. Then step two does not even need a loop since OpenLayers has the loop built in. – kjelderg Oct 28 '13 at 05:33
0

A good start is to use the leaflet library because it use the map projection and to read this tutorial: http://build-failed.blogspot.de/2013/07/dynamically-creating-hexagons-from-real.html?m=1.

Micromega
  • 12,486
  • 7
  • 35
  • 72
  • 1
    Why Leaflet instead of OpenLayers? It should be possible to implement a solution with both libraries. – scai Oct 13 '13 at 15:55