Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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 Open Layers. 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 Open Layers. 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 Open Layers, but no luck. I'm wondering if maybe that XYZ format doesn't support transparency, because the Open Layers 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. Thanks for any help.

<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>
share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

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
        }
    );
share|improve this answer
    
You are a genius. It works. Thank you! –  billted98 Jun 25 '12 at 14:26
    
Please accept answer if it was helpful. –  drnextgis Jun 25 '12 at 15:31
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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