[GIS] Show transparency after adding transparent MapBox layer to OpenLayers

openlayers-2tilemilltransparencywms

I'm new to tile set maps. I am trying to add MapBox layers that I made in TileMill (and have sitting in my MapBox Hosting account) into OpenLayers. I have successfully added a non-transparent layer. I have also successfully added a transparent layer, however, that layer does not keep its transparency in OpenLayers. It seems to put a white background behind it, thereby hiding anything underneath it.

I've seen this example which I can get to work fine, but does not address transparency.

I've tried adding every transparency option I can think of in OpenLayers, but no luck. I'm wondering if maybe that XYZ format doesn't support transparency, because the OpenLayers Getting Started tutorial Ex. 5 shows a working example using the WMS format (which has a transparent: "true", parameter.

Anyway, here is the code I am using:

<html>
<head>
    <title>OpenLayers MapBox Example</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
    <div id="map" style="width:800px; height: 600px;"></div>
    <script>    
        var map = new OpenLayers.Map('map');
        var dark = new OpenLayers.Layer.XYZ(
            "MapBox Streets",
            ["http://a.tiles.mapbox.com/v3/billted98.map-cfmrdwtw/${z}/${x}/${y}.png"],
            {
                sphericalMercator: true,
                wrapDateLine: true,
                transitionEffect: "resize",
                buffer: 1,
                numZoomLevels: 16
            },
            {isBaseLayer: true}
        );
        var seismic = new OpenLayers.Layer.XYZ(
            "MapBox Streets",
            ["http://a.tiles.mapbox.com/v3/billted98.shapefile_v3/${z}/${x}/${y}.png"],
            {
                sphericalMercator: true,
                wrapDateLine: true,
                transitionEffect: "resize",
                buffer: 1,
                numZoomLevels: 16   
            },
            {isBaseLayer: false}
        );
        map.addLayer(seismic);
        map.addLayer(dark);
        map.zoomToMaxExtent();
    </script>
</body>
</html>

Best Answer

It's not MapBox issue it is due to mistake in your code. OpenLayers.Layer.XYZ have three groups of parameters, so you need move isBase layer option into third group:

var dark = new OpenLayers.Layer.XYZ(
        "Dark layer",
        ["http://a.tiles.mapbox.com/v3/billted98.map-cfmrdwtw/${z}/${x}/${y}.png"],
        {
            sphericalMercator: true,
            wrapDateLine: true,
            transitionEffect: "resize",
            buffer: 1,
            numZoomLevels: 16,
            isBaseLayer: true
        }
    );
Related Question