Howto get transparent Tiles from OSM using OpenLayers

Question

I am implementing a simple Web-based GIS-Application using OpenLayers. I want to display a heatmap as a background-image - just like the hybrid-view of GoogleMaps. This seems to be impossible - I want a nice looking map, so I am using the OSM-Layer - but the images are fully opaque - so all I can do is overlaying an image (or any other layer) on top of this layer - yes, I can apply some transparency, but of course, the labels will fade out.

There doesn't seem to be a way of asking OSM for ground-tiles only (oceans, etc,) THEN insert my custom layer and THEN on top of that inserting an OSM-Layer with streets, streetnames and all the other elements.

I guess, the only way to accomplish this would be to setup my own OSM-TileServer and configure it accordingly?

Any Ideas?

Thanks in Advance

Answer 1

Looks like you can find osm tiles without labels: http://help.openstreetmap.org/questions/1873/how-can-i-create-a-map-without-any-names-on-it

• example : http://toolserver.org/~osm/locale/en.html?zoom=12&lat=51.51473&lon=-0.13528&layers=BF

I’m not aware of any «label only» OSM tileset.(EDIT: except if I read better the link I paste ;) )

I find here ( https://alastaira.wordpress.com/2011/05/13/displaying-labels-on-top-of-bing-maps-custom-tile-layers/ ) that there seems to be 2 bing tile sets that would fit your needs. I'd guess it shouldn't be that hard to setup them in OpenLayers ( http://dev.openlayers.org/docs/files/OpenLayers/Layer/Bing-js.html ).

Answer 2

Thank you tonio for this fast reply!

It works with OSM now - for everyone who's interested, here is my solution: (MY-MIDDLE-LAYER.KML is a map of germany in red half transparent for testing purposes)

var kml = new OpenLayers.Layer.GML("KML", "MY-MIDDLE-LAYER.KML", {
format: OpenLayers.Format.KML,formatOptions:{extractStyles:true,extractAttributes:true},alwaysInRange:true,isBaseLayer: false,opacity:50,transparent:true
});

OpenLayers.Layer.OSM.Toolserver = OpenLayers.Class(OpenLayers.Layer.OSM, {
    initialize: function(name, options) {
        var url = [
            "http://a.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", 
            "http://b.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png", 
            "http://c.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png",
            "http://d.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png",
            "http://e.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png",
            "http://f.www.toolserver.org/tiles/" + name + "/${z}/${x}/${y}.png"
        ];
        options = OpenLayers.Util.extend({numZoomLevels: 19}, options);
        OpenLayers.Layer.OSM.prototype.initialize.apply(this, [name, url, options]);
    },
    CLASS_NAME: "OpenLayers.Layer.OSM.Toolserver"
});
l1=new OpenLayers.Layer.OSM.Toolserver('osm-labels-de', {isBaseLayer: false, visibility: true});
l2=new OpenLayers.Layer.OSM.Toolserver('osm-no-labels');
map.addLayers([kml,l1,l2]);

... and the labels appear nicely readable above everything :)