2

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);

2 Answers 2

3

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.

1
  • Thank you for your answer, the opacity option worked best for my situation.
    – btald1331
    Sep 2, 2015 at 17:35
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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