L.tileLayer: Using a WMS feed. Leaflet?

Q&A about the latest versions
Post Reply
AHartash
Posts: 10
Joined: Mon Sep 24, 2018 10:46 am

Thu Mar 05, 2020 6:41 pm

Hi,

Possibly one for the devs please. We have our own web mapping server which is capable of generating WMS and WMTS service feeds. I would like to display these feeds in a map in my Pano2vr output.

I'm happy to mod some of the output files. I've located the following lines in the skin file:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{}).addTo(me._map_1.ggMap);

var MapLayer = L.TileLayer.extend({

Can I modify any of the lines in any of the output files to read in a WMS or WMTS feed please?

Are you using Leaflet? If so this page explains how leaflet can use a WMS service: https://leafletjs.com/examples/wms/wms.html
This page suggests we have to create a L.TileLayer.WMS layer, provide the base WMS URL, and specify whatever WMS options you need.

Could you explain which lines I need to replace with for example:
var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne'
}).addTo(map);


We appreciate we'll be changing 'https://demo.boundlessgeo.com/geoserver/ows?', { layers: 'ne:ne' with our own WMS service name and layer name.
Thanks for your help.

Andy
christoph
Gnome
Posts: 97
Joined: Mon Aug 20, 2012 3:01 pm

Fri Mar 06, 2020 8:58 am

Hi Andy!
I don't know about WMS (and WMS in Leaflet), but if you want to build the project and skin in Pano2VR, and then edit the skin.js file, i guess you could:
- in the Tour Map, add a map, leave the Map Provider at 'OpenStreetMap' and the Map Style at 'Streets'. Remember the Map Id...
- in the Skin Editor, add a Map Element, pick the map (Map Id from previous step) you just added in the Tour Map from the Combobox, and as API choose 'Leaflet'
- then build the output
- edit the skin.js file in the output folder: you will find a block of code that deals with maps with mapprovider 'openstreetmap' and mapstyle 'streets'. There replace that line of code (the one you mention in your message: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{}).addTo(me._map_1.ggMap);) with the code adding a WMS layer to a map. Just make sure that the skin id of your map element is 'Map 1'. Or if you want to use a different id, then you will have to adjust the '.addTo(...)' part accordingly.

Regards,
Christoph
Post Reply