Add layer switch (front-end)

[k-rns]

Hi @rsignell-usgs,

I would like to add a layer switch into the Melown browser. I'm trying to put the sampling locations on there, but I don't really see it. So I think with that switch it will already be good for me to see if I do it well or not. I'm trying to follow this tutorial: http://vtsdocs.melown.com/en/latest/tutorials/landuse-frontend.html

Ok, I just did a liiiitle bit more research, there is a step by step approach on the melown website that I didn`t see. But sty tuned for more html questions :), exciting to learn something new (again!)

Thanks

[k-rns]

Hi @rsignell-usgs , @ladislavhorky and @DavidLevinsky ,

After setting up a dem, orhophoto and vector layer on our own machine (This is my workflow), I would like to add a switch in the browser so I can check that vector layer on and off. I`m following some frontend tutorials, the basic one and the layerswitch one. I do however have a couple of starter questions:

• Am I correct to assume that it is compulsory to add the JavaScript Melown API in the HTML head? (src="https://cdn.melown.com/libs/vtsjs/browser/v2/vts-browser.min.js")
• I don`t know where to find the mapConfig.json that is necessary to display the map. This is the URL I have after setting up the backend: http://jetstream.signell.us:8070/mapproxy/melown2015/surface/sandwich/sandwich_dem_resampling/
• In the tutorial it says to add some CSS sugar. What does that mean? Do I need to copy this file https://cdn.melown.com/libs/vtsjs/browser/v2/vts-browser.min.css and add the styling for the layerswitcher to this file?

Thanks a lot Karen

[davidmtech]

Hi Keren,

I will be glad to answer your questions.

• yes, in case you want to use vts-browser-js (JavaScript Melown API) it is compulsory to load vts-browser.min.js (js library containing vts-browser) and vts-browser.min.css (css stylesheet needed to correctly display vts-browser).

• your URL is almost correct. Just add mapConfig.json at the end of your url: http://jetstream.signell.us:8070/mapproxy/melown2015/surface/sandwich/sandwich_dem_resampling/mapConfig.json

• I recommend you to look at these examples which also contain used code. Most useful will be this example , (full code is here) which does exactly what you want. You can modify look of the panel with the switch in the css section (.switch-panel-div). The map "view" and names of the free layers, surfaces, ... can be found by investigating mapConfig.json file.

[k-rns]

Hi @DavidLevinsky,

The mapConfig.json URL doesn't work: http://jetstream.signell.us:8070/mapproxy/melown2015/surface/sandwich/sandwich_dem_resampling/mapConfig.json. The link without the mapConfig.json does work, so I don't know what's wrong or how to solve that issue.

Any ideas?

[davidmtech]

I have tested your link and it works very well. In which way it does not work? Hints for diagnostic:

• use Chrome web browser and display Developer Tools (Ctrl+Shift+I), search for errors/warnings in the Console or Network panel.

• in case that you just copy/paste mapConfig path in to the existing example, make sure that example does not have some initial position. In case that example contains some initial position, just remove that position and position from the mapConfig will be used.

• check your firewall / antivirus software or other security settings of your network connection