Hi, this is probably a stupid question, but I want to have a TMS (raster) as the base layer in my Leaflet map and then overlay vectors from a WMS on top. Is this possible? I thought I had this working but it appears as though the WMS layer completely covers the TMS. I realize that both TMS and WMS are raster but I thought that somehow the TMS layer would show through and not be completely covered by the WMS. Here is my code

         var map = L.map('mapContainer',
                 maxZoom: 15,
                 minZoom: 9
             }).setView([47.58, -122.35], 9);

        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'

        L.tileLayer.wms('https://carto.nationalmap.gov:443/arcgis/services/geonames/MapServer/WmsServer?', {
            layers: '7'

asked 25 Oct '19, 23:44

SeattleHeather's gravatar image

accept rate: 0%

This may not be what you're trying to do, and apologies if I'm stating the bleeding obvious here, but one raster overlay over another will work if the overlay has a transparent background. See this diary entry.

(26 Oct '19, 00:45) SomeoneElse ♦

You can add

transparent: 'true'

to your WMS options (where you currently only have "layers: '7'") and this will tell the WMS that you would like tiles with a transparent background. Not all WMS servers will honour this request, however (yours seems not to, sadly). In which case you might try

opacity: '0.5'

which will at least make the WMS layer semi-transparent so while the underlying OSM map will lose contrast it is still visible.

permanent link

answered 26 Oct '19, 22:01

Frederik%20Ramm's gravatar image

Frederik Ramm ♦
accept rate: 24%

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:


question asked: 25 Oct '19, 23:44

question was seen: 521 times

last updated: 26 Oct '19, 22:01

powered by OSQA