2

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>
Improve this question

1 Answer 1

Reset to default
4

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
        }
    );
Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.