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