OpenLayers – Using Local Tiles from Geowebcache with OpenLayers

geoservergeowebcacheopenlayers-2

I am trying to setup an Openlayers page that uses a local tile cache that I have created using Geowebcache. But the HTML page and the tiles will be stored in an Amazon S3 bucket

So far I have setup GeoServer, created a custom gridset and seeded all the zoom levels.

I am having problems writing an OpenLayers HTML page that reads those local tiles.

My tile cache structure looks like this

zoom00/0_0/0_0.png
zoom00/0_0/0_1.png
etc

In my OpenLayers I have the following

var layerExtent = new OpenLayers.Bounds( 0,  0, 700000 , 1344000);
map = new OpenLayers.Map( 'map', {'restrictedExtent': layerExtent} );
layer = new OpenLayers.Layer.XYZ( "Data Layer",
"https://url_goes_here/${z}/${y}/${x}", {sphericalMercator: false} );
map.addLayer(layer);
map.zoomToExtent(map.restrictedExtent);

After some google I found this link to a Dev example that seems to have a geowebcache as an openlayers.layer

http://dev.openlayers.org/sandbox/tschaub/gwc/examples/geowebcache.html

But when I look at the API docs there isnt such a layer? So maybe that it doesn't exist.

I then found an OSM Local Example here

http://wiki.openstreetmap.org/wiki/OpenLayers_Local_Tiles_Example

Which uses

var newLayer = new OpenLayers.Layer.OSM("Local Tiles", "tiles/${z}/${x}/${y}.png", {numZoomLevels: 19, alpha: true, isBaseLayer: false});

But again their PNG files see to have a different naming convention than the ones created by Geowebcache.

Is there a way to change the Geowebcache naming convention or is there something I can do in the OpenLayers code?

thanks for any help

UPDATE

Thanks to CHenderson I have a working solution.

using his option of just downloading the GeoWebCache.js and including it in my HTML I created the following:

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="geowebcache.js" type="text/javascript"></script>
<script type="text/javascript">
     var map;
        function init() {

            var world = new OpenLayers.Bounds(
                0, 0, 700000, 1344000
            );

            map = new OpenLayers.Map({
                div: "map",
                projection: new OpenLayers.Projection("osgb_zoom"),
                numZoomLevels: 11,
                resolutions: [896,448,224,112,56,28,14,7,4,2,1],
                maxExtent: world,
                layers: [
                    new OpenLayers.Layer.GeoWebCache({
                        url: [
                            "https://url_to_tile_cache/"
                        ],
                        
                        buffer: 1
                    })
                ],
                center: new OpenLayers.LonLat(400000, 500000),
                zoom: 0
            });
        }

        OpenLayers.Util.onImageLoadError = function() {
            this.src = "error.png";
            this.style.display = "";
        };

</script>

Even requesting from just one tile cache is impressively quick.

Best Answer

What you have found is something in the OpenLayers sand box, which is an environment where OpenLayers contributors can add their own custom layers, controls, etc. Sometimes things created in the sand box work their way through to the core distribution.

However, it is simple to take what has been created and add it to your OpenLayers build. First, you need to get the source file for the GeoWebCache layer:

http://dev.openlayers.org/sandbox/tschaub/gwc/lib/OpenLayers/Layer/GeoWebCache.js

Save that somewhere locally. Now you need to decide whether you want to build the script into your main OpenLayers library or whether you just want to include it on your page.

Including on your page

The simplest approach is to include it on your page, so just add the script to your HTML header:

<head>
  <title>Your Page Title Here</title>
  <script src="path/to/OpenLayers.js" type="text/javascript"></script>
  <script src="path/to/GeoWebCache.js" type="text/javascript"></script>
  <!-- Other scripts, meta tags, CSS, etc -->
</head>

Now you can use the GeoWebCache layer in your script:

new OpenLayers.Layers.GeoWebCache({
    url: "http://path/to/web/accessible/cache"
});

If you place multiple copies of your cache in different locations then you can supply the url property with an array of urls, this will give you greater throughput on the client as it allows your browser to create more concurrent requests for tiles.

Building into your OpenLayers library

This is a little more involved but has the benefit of making things a little easier to port around and also will keep your code a little cleaner. within the OpenLayers source directory there is a Python build script that allows you to create custom builds of OpenLayers. This can be useful for example to create a small library of only the OpenLayers components you need, rather than the full build.

To add the GeoWebCache layer into the OpneLayers build you need to do the following.

  1. Download the OpenLayers source
  2. Copy the GeoWebCache.js file into the folder /lib/OpenLayers/Layer
  3. Perform an OpenLayers build using the Python build scripts

Building OpenLayers is simply a case of opening a command prompt (assuming Windows), and doing something like:

D:
cd Development\OpenLayers-2.13.1\build
python build.py full OpenLayers-GeoWebCache.js

Note that this assumes you extracted the OpenLayers source to a folder called D:\Development\OpenLayers-2.13.1 so you'll need to change that to your folder. The build command itself can be configured to use a different compression mechanism (the default is jsmin) and the output file can also be set - in this case we called it OpenLayers-GeoWebCache.js.

Now copy that file to where your HTML page is and include it like you would the normal OpenLayers library.

You can also customise the build by creating and using a build script. Note the full argument supplied to the build.py script - this instructs the script to do a full OpenLayers build. You can change this to a customised build by specifying a name and creating a corresponding build script. For example, suppose you only wanted a minimal OpenLayers build including the GeoWebCache layer. You would create a file called minimal-geowebcache.cfg in the build folder. The content of the file should be:

[first]

[last]

[include]
OpenLayers/Map.js
OpenLayers/Kinetic.js
OpenLayers/Projection.js
OpenLayers/Layer/Vector.js
OpenLayers/Layer/OSM.js
OpenLayers/Layer/Bing.js
OpenLayers/Layer/WMS.js
OpenLayers/Layer/Google/v3.js
OpenLayers/Layer/GeoWebCache.js
OpenLayers/Popup/FramedCloud.js
OpenLayers/Control/Navigation.js
OpenLayers/Control/Zoom.js
OpenLayers/Control/Attribution.js
OpenLayers/Control/SelectFeature.js
OpenLayers/Control/Panel.js
OpenLayers/Control/LayerSwitcher.js
OpenLayers/Renderer/SVG.js
OpenLayers/Renderer/VML.js
OpenLayers/Format/GeoJSON.js
OpenLayers/Protocol/HTTP.js
OpenLayers/Strategy/Fixed.js
OpenLayers/Strategy/BBOX.js
OpenLayers/StyleMap.js
OpenLayers/Rule.js
OpenLayers/Filter/Comparison.js
OpenLayers/Filter/Logical.js

[exclude]

Then you can perform a build using this configuration with the command:

python build.py minimal-geowebcache OpenLayers.js

This will create a much smaller OpenLayers library that you can include in your page. Just make sure you build the library with all the bits of OpenLayers you are using!

Related Question