OpenLayers 3 – Dynamically Adding Layer from Folder Contents

asp.netcjavascriptopenlayers

I am new to OpenLayers and have searched far and wide trying to figure out how to programmatically add layers with a default set of parameters from a selected source path, but Google has not produced any meaningful results (at least that I can identify).

I have generated a set of thumbnails to represent each map layer using C# from image files, which I want to use to provide a clickable element that adds the layer to the OL3 map to view/manipulate by the user. The images are dynamically generated, so ideally I want to create a dynamic element (via ASP, JS, or something else) that will feed a full sized image to the map layer. As I see it, it could be done by dynamically changing the URL parameter for a map layer, or adding a whole new layer for each click event on an image. Has anyone tried to do this, or something similar? Perhaps there is a better way to serve images to layers from a folder structure?

Best Answer

I believe I have done something similar using layer groups and the visibility option. I added multiple layer groups to an object and then used the visible option to hide and show the different layers. You can probably do the same thing not using groups as well if you don't want to. I'll try to provide a small example illustrating what I mean.

var layers = {};
layers['map'] = new ol.layer.Group({
  visible: false,
  source: new ol.source.OSM()
});
...//make more layers
map = new ol.Map({
layers: _.values(layers)//you can do something like this if you use underscore or lodash
...
function changeLayer(newLayer, oldLayer) {
  layers[oldLayer].set("visible", false);
  layers[newLayer].set("visible", true);
}
Related Question