[GIS] OpenLayers 2.13 : How to display a local tiled raster

openlayers-2rastertiles

I am trying to display (on OpenLayers 2.13) a local tiled raster I made with gdal2tiles.py. Unfortunately it's all blank or pink. Here is my layer definition:

var tiles = new OpenLayers.Layer.XYZ("Local tiles", "tiles/${z}/${x}/${y}.png", {
    isBaseLayer: true,
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    maxExtent: [-75.1729846, 39.9439032, -75.1529085, 39.9599679]
});

map.addLayer(tiles);

What is wrong?

Here is a link to my OpenLayers test page : http://popopopopo.voila.net/index.html

And here is the original image: http://popopopopo.voila.net/raster.tif (EPSG: 3857)

Best Answer

Gdal2tiles numbers the tiles from South to North (according to the OGC TMS sepcification), while OSM numbers from North to South (like Google and bing does it).

I described here what I changed to make it numbering in correct (OSM) order:

GDAL2Tiles: MapTiles from BSB/KAP are Switched

If I load the OSM tile with the example numbers you gave above, I get one from the Pacific off the coast of Chile, at -75° East -39.95° North. I guess that is not what you intended with your extent, which should direct to Philadelphia.

The mapquest tiles you show in your map are in the range of

http://otile4.mqcdn.com/tiles/1.0.0/map/14/4770/6205.jpg

So you have to make sure your self rendered tiles have the same number if they should appear in the same place.

Leaflet has an option to set tms=true for tiles generated according to the TMS specification. Openlayers seems to lack this opportunity yet.

Testing

It could be useful for you to determine the minimum machine spec you are going to support, and then see how the browser performs with your tiles. This could be done on a virtual machine or using IEThrottle and FireFox Throttle

One way to check how many elements you are dealing with at any one time is to paste the following JavaScript lines in your browser's address bar:

This shows total DIV elements in the page:

Javascript:alert(document.getElementsByTagName("div").length);

This shows number of DIVs in your OpenLayers map, assuming it has an ID of mymap (just change this if it is not the case):

Javascript:alert(document.getElementById("mymap").getElementsByTagName("div").length);

Tile Benefits

The use of cached tiles is likely to far outweigh any negative impacts of using 20 tiles as opposed to one large dynamically generated WMS image.

As you pointed out in your post, performance is likely to be negatively impact due to the maximum number of requests to a single domain, before number of DOM elements causes issues.

Tile Performance

To speed up tile performance you have a number of options, the key ones you have already listed:

Using multiple DNSs
grouping layers together
merging cached tiles together on the server (if you have the PIL installed with TileCache then this should happen automatically
increase tile sizes to reduce requests (though you will need to recalculate resolutions etc.)
cache tiles on the client by setting the right request headers

Great examples and FireBug performance logging can be found at http://ol-performance.appspot.com/

Training Users

As well as technical solutions, the UI should also be geared up to limiting the number of tiles a user requests. I hope to implement this in the next round of development for http://maps.seai.ie/wind which uses several tiles (and you can see how it performs when all layers are switched on - use the above JavaScript to see how many tiles are loaded). With just three layers there are 160 DIVs in the map, but performance is fine in most setups.

Two things to implement:

use radio buttons to switch continuous layers on and off - as these would cover up the other layers anyway there is no point having the DOM elements if they are invisible
remove the "Select All" checkboxes - this will force a user to only turn on layers they really want to see

I'd be interested to hear your results on how many tiles you managed to load in different browsers.

[GIS] Openlayers and Geoserver fail to reproject while editing Vector with WFS-T

On the protocol definition, you need to set srsName:

        new OpenLayers.Layer.Vector('Wells', {
            strategies: [new OpenLayers.Strategy.BBOX(), config.saveStrategy],
            protocol: new OpenLayers.Protocol.WFS({
                url: config.vectorWfs,
                featureType: "Wells_PRS",
                featureNS: "http://gisxxxx",
                geometryName: "GEOM",
                srsName: 'EPSG:4326'
            }),
            version: "1.1.0"
        }),

You do not need proj4js.

Best Answer

Related Solutions

[GIS] Maximum number of Tiled Layers in OpenLayers

Testing

Tile Benefits

Tile Performance

Training Users

[GIS] Openlayers and Geoserver fail to reproject while editing Vector with WFS-T

Related Question