Search code examples
javascripthtmlmapsopenlayers

Can I use OpenLayers for a simple custom tile grid system?


I have a table in my database with like 2.500 tiles, so 50 x 50. Frontend size is 256px x 256px per tile and there should be no zoom levels. Then the are tables which hold other data (buildings, objects) and every one of this objects may belong to a certain tile.

In the frontend I want to use fullscreen OpenLayers to display a set of tiles to fill the screen and JUST use the dragging and async. reloading of tiles that OpenLayers provides. If possible even automatically stopping the dragging if the border of the world map is reached.

I also don't want to render images (pngs) - the tiles should be empty <div>s or at least transparent because the background of the body is a repeated grass texture anyway and I want to include <img>s depending on the objects which are associated to the tile in the model.

Can anyone familiar with OpenLayers tell me if this is possible with such a simple custom model on the backend? Any resources on this particular case would be very helpful!


Solution

  • Yes, this is possible in OpenLayers if each tile in your table has some geospatial data associated with it, such as a Bounds or the Lat/Lon of a corner.

    OpenLayers wants to place base layers (your tiles as WMS) and features (your buildings and objects as WMS, WFS, or Vector) geospatially within the browser's viewport. The trick is to restrict OpenLayers to a single zoom level (resolution) to match the implicit resolution of your stored tiles, and then set the maxExtent of your OpenLayers.Map object to match the extent of all your tiles such that each WMS tile request generated by OpenLayers has a bounding box that matches one of your tiles.

    Here is a WMS request generated by OpenLayers for a simple base layer I have (the BBOX is in meters). The link is behind a firewall so it won't work for you:

    http://kpnatsp8:9080/WmsServlet?SERVICE=USSTATES&TRANSPARENT=FALSE&FORMAT=image/png&LAYERS=USSTATES&SCALE=4000000.0000000005&SPHERICALMERCATOR=true&MAXEXTENT=-20037508.34,-20037508.34,20037508.34,20037508.34&REQUEST=GetMap&STYLES=&SRS=EPSG:900913&BBOX=-12812623.352549,3443367.869216,-11909512.729118,4346478.492647&WIDTH=640&HEIGHT=640
    

    I have a Java servlet that takes that request and returns a tile image. You would write your own servlet or server-side script to take the request, determine which tile in your database matches the BBOX bounds, and return that tile as an image response.

    Sorry if I'm being pedantic here but you sounded new to OpenLayers. This is the way I would start but I'm open to better ideas.