Making Open Street Maps Transparent in Leaflet

Question

Info:

I have a local Open Street Maps Server which is serving tiles for Michigan, Indiana, Ohio, Illinois, and West Virginia. I also have a geoserver set up serving a wms layer containing states. Because I only have several states served in Open Street Maps, OSM does not show state borders, which is why I have a WMS layer.

The Problem:

I wanted to layer OSM over top of my WMS layer and make it transparent so that the state lines will show through from the WMS layer.

Code:

var map;
var feature;

function load_map() {

     map = new L.Map('map', {
            zoomControl: true,
            center: [0, 0],
            zoom: 3
     });


    var osmUrl = 'http://my_server/osm_tiles/{z}/{x}/{y}.png',
    osmAttribution = 'Map data &copy; 2012 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
    osm = new L.TileLayer(osmUrl, {
            maxZoom: 18, 
            attribution: osmAttribution, 
            transparent: true
    });     


    var states = L.tileLayer.wms('http://my_server:8080/geoserver/Indigital/wms', {
            format: 'image/png',
            transparent: false,
            layers: 'Indigital:states'
    });



    var overlays = {
            "States:WMS": states,
            "OSM": osm,
    };

    var layerControl = L.control.layers(null, overlays);
    map.addControl(layerControl);

Answer 1

This is more correctly an issue with your tile server config, and not with your leaflet code. You need to change the layer styling of your OSM tiles so that there is no background-color in the tiles generated.

Your technology may differ, but I have used Mapnik to render transparent tiles, and in the XML style sheet, I notice this bit at the top, where it defines the overall "map" style it's going to render against..

<?xml version="1.0" encoding="utf-8"?>
<Map background-color="rgba(0,0,0,0)" srs="+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=6378137 +b=6378137 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs">

<!-- style rules here -->
<!-- layer declarations here -->
</Map>

Notice the background-color="rgba(0,0,0,0)" attribute. It instructs the renderer to prepare transparent images. The first three 0's are for Red, Green, and Blue, respectively, and the last 0 is for the alpha value (i.e. level of opacity). At 255, you'll have a fully-opaque background color. At 0, you will have a 100% transparent background in areas where your layers are not representing features. Make sense?

..however, if you insist on trying to solve this client-side with Leaflet/JavaScript, you can play around with the order of the layers and their "opacity" values. Start with something like this and then tweak it as necessary:

osm.opacity = .5;
states.opacity = .5;

But I'd bet you will discover this won't look very good/professional, as both layers will appear watered down and smeared together.

Answer 2

You can set the opacity of a tileLayer via the opacity option: TileLayer.options.opacity