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?

  • what's wrong with that example ?
    – ymirsson
    Mar 6 '15 at 21:07
  • In the description of the above example you linked to, it says: "There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857." That makes it difficult to work with sources such as static images doesn't it?
    – kosataka
    Mar 6 '15 at 22:27
  • Perhaps you mean I should use map.getLayers().push? This JSFiddle doesn't work, but here's what I cobbled together... jsfiddle.net/ybrrya57/8
    – kosataka
    Mar 6 '15 at 23:47
  • Please mark my answer as correct if you feel it answered your question. Mar 17 '15 at 20:26

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);
  • Does this mean that every layer you add initially will be part of the load time for the map? This would be ideal if you could set it to load some arbitrary number of layers, say 4, set 1 to visible and 3 to invisible (to be toggled later), but not load say another 4 layers until needed. I like what you suggested, as long as the load time doesn't skyrocket and the map doesn't reach its maximum layer limit over time (perhaps a function that removes old layers completely above a certain number). That means you have to have a way to add the layer back if the user wants to though... ideas? Thanks !
    – kosataka
    Mar 15 '15 at 6:46
  • It depends a lot on your use case, but OL3 is quite dynamic to do different things. If you find a large number of layers being an issue, you could add a group to the map and dynamically add and remove layers from it. Another option would be to change the source on a layer as needed. Or something that I've done is not load or set the source on a layer until a certain time later when needed for instance if you have a large source that takes a while to load and you don't want to bog down the page on load time. Mar 16 '15 at 15:59
  • So, I've set up four layers and have them working with visiblity changes. How would I go about changing the source on the layer? That sounds EXACTLY like what I want to do! If I set the source path of the layer to a variable, can I change the variable when I click on the image preview?
    – kosataka
    Mar 16 '15 at 18:39
  • In theory you might be able to use a variable because most things are just object references, but it's hard to say if there might be some other issues. I'd suggest just calling the setSource function on the layer when you are ready to set the source or want to change it. Mar 16 '15 at 19:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.