OpenLayers - image Filter for different Layer

based on this tutorial: https://openlayers.org/en/latest/examples/image-filter.html i want apply an filter to my different Layers. To achieve this goal i have an array of Group. var groupsMap = ; My Groups are:

Here WeGo Map

Stamen Map

Bing Map

For example for Bing Map i have:

function bingMaps() {

  var layers = ;

  var i;

  for (i = 0; i < bingStyles.length; ++i) {

    layers.push(new ol.layer.Tile({

      visible: false,

      preload: Infinity,

      source: new ol.source.BingMaps({

        key: KEY_BING, //'Your Bing Maps Key from http://www.bingmapsportal.com/ here',

        imagerySet: bingStyles[i]

        // use maxZoom 19 to see stretched tiles instead of the BingMaps

        // "no photos at this zoom level" tiles

        // maxZoom: 19

      })

    }));

  }



  var bingLayers = new ol.layer.Group({

    title: "Bing",

    layers: layers

  });



  // return bingLayers;

  groupsMap.push(bingLayers);

}

Every Layer is available on sidebar in this way:

for (var i = 0; i < layers.length; ++i) {

      if (groupSelected.values_.title === "Bing") {

        layers[i].setVisible(bingStyles[i] === layerSelected);

      }

...

}

At the end i set my filters:

var selectedKernel = normalize(kernels["sharpen"]);

$('.selected-filter').on("click",function () {

    var filterSelected = $(this).attr("value");

    console.log(filterSelected);

    selectedKernel = normalize(kernels[filterSelected]);

    map.render();

 });

For setting the filters for ALL my layers the only solution that
it seems to work is this:

var layers = groupsMap[0].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }



  var layers = groupsMap[1].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }



  var layers = groupsMap[2].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }



  var layers = groupsMap[3].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }

In fact if i try to use a cycle:

for(var i = 0; i < groupsMap.length; i++){ 

    var layers = groupsMap[i].values_.layers.array_;

    // var layers = groupsMap.getLayers().array_;

    for (var i = 0; i < layers.length; i++) {

        layers[i].on('postcompose', function (event) {

          convolve(event.context, selectedKernel);

        });

    }

  }

or:

for(var i = 0; i < groupsMap.length; i++){ 

    var layers = groupsMap[i].values_.layers.array_;

    applyFilter(map.getLayers().array_,selectedKernel);

  }

does not work. in particular does not work map.render(),method defined befor. Why ?
Can someone help me to understand why it does not work? My first solution works but it's really bad..

asked Nov 20 '18 at 19:41

Antonio Faienza

3318

1

The first method won't work correctly because you are using i for both the inner and outer for loops.

– Mike
Nov 20 '18 at 20:03

ooh Yes ! tiredness makes bad jokes. Thanks :)

– Antonio Faienza
Nov 20 '18 at 20:14

add a comment |

Here WeGo Map

Stamen Map

Bing Map

For example for Bing Map i have:

function bingMaps() {

  var layers = ;

  var i;

  for (i = 0; i < bingStyles.length; ++i) {

    layers.push(new ol.layer.Tile({

      visible: false,

      preload: Infinity,

      source: new ol.source.BingMaps({

        key: KEY_BING, //'Your Bing Maps Key from http://www.bingmapsportal.com/ here',

        imagerySet: bingStyles[i]

        // use maxZoom 19 to see stretched tiles instead of the BingMaps

        // "no photos at this zoom level" tiles

        // maxZoom: 19

      })

    }));

  }



  var bingLayers = new ol.layer.Group({

    title: "Bing",

    layers: layers

  });



  // return bingLayers;

  groupsMap.push(bingLayers);

}

Every Layer is available on sidebar in this way:

for (var i = 0; i < layers.length; ++i) {

      if (groupSelected.values_.title === "Bing") {

        layers[i].setVisible(bingStyles[i] === layerSelected);

      }

...

}

At the end i set my filters:

var selectedKernel = normalize(kernels["sharpen"]);

$('.selected-filter').on("click",function () {

    var filterSelected = $(this).attr("value");

    console.log(filterSelected);

    selectedKernel = normalize(kernels[filterSelected]);

    map.render();

 });

For setting the filters for ALL my layers the only solution that
it seems to work is this:

var layers = groupsMap[0].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }



  var layers = groupsMap[1].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }



  var layers = groupsMap[2].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }



  var layers = groupsMap[3].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }

In fact if i try to use a cycle:

for(var i = 0; i < groupsMap.length; i++){ 

    var layers = groupsMap[i].values_.layers.array_;

    // var layers = groupsMap.getLayers().array_;

    for (var i = 0; i < layers.length; i++) {

        layers[i].on('postcompose', function (event) {

          convolve(event.context, selectedKernel);

        });

    }

  }

or:

for(var i = 0; i < groupsMap.length; i++){ 

    var layers = groupsMap[i].values_.layers.array_;

    applyFilter(map.getLayers().array_,selectedKernel);

  }

does not work. in particular does not work map.render(),method defined befor. Why ?
Can someone help me to understand why it does not work? My first solution works but it's really bad..

asked Nov 20 '18 at 19:41

Antonio Faienza

3318

1

The first method won't work correctly because you are using i for both the inner and outer for loops.

– Mike
Nov 20 '18 at 20:03

ooh Yes ! tiredness makes bad jokes. Thanks :)

– Antonio Faienza
Nov 20 '18 at 20:14

add a comment |

Here WeGo Map

Stamen Map

Bing Map

For example for Bing Map i have:

function bingMaps() {

  var layers = ;

  var i;

  for (i = 0; i < bingStyles.length; ++i) {

    layers.push(new ol.layer.Tile({

      visible: false,

      preload: Infinity,

      source: new ol.source.BingMaps({

        key: KEY_BING, //'Your Bing Maps Key from http://www.bingmapsportal.com/ here',

        imagerySet: bingStyles[i]

        // use maxZoom 19 to see stretched tiles instead of the BingMaps

        // "no photos at this zoom level" tiles

        // maxZoom: 19

      })

    }));

  }



  var bingLayers = new ol.layer.Group({

    title: "Bing",

    layers: layers

  });



  // return bingLayers;

  groupsMap.push(bingLayers);

}

Every Layer is available on sidebar in this way:

for (var i = 0; i < layers.length; ++i) {

      if (groupSelected.values_.title === "Bing") {

        layers[i].setVisible(bingStyles[i] === layerSelected);

      }

...

}

At the end i set my filters:

var selectedKernel = normalize(kernels["sharpen"]);

$('.selected-filter').on("click",function () {

    var filterSelected = $(this).attr("value");

    console.log(filterSelected);

    selectedKernel = normalize(kernels[filterSelected]);

    map.render();

 });

For setting the filters for ALL my layers the only solution that
it seems to work is this:

var layers = groupsMap[0].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }



  var layers = groupsMap[1].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }



  var layers = groupsMap[2].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }



  var layers = groupsMap[3].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }

In fact if i try to use a cycle:

for(var i = 0; i < groupsMap.length; i++){ 

    var layers = groupsMap[i].values_.layers.array_;

    // var layers = groupsMap.getLayers().array_;

    for (var i = 0; i < layers.length; i++) {

        layers[i].on('postcompose', function (event) {

          convolve(event.context, selectedKernel);

        });

    }

  }

or:

for(var i = 0; i < groupsMap.length; i++){ 

    var layers = groupsMap[i].values_.layers.array_;

    applyFilter(map.getLayers().array_,selectedKernel);

  }

does not work. in particular does not work map.render(),method defined befor. Why ?
Can someone help me to understand why it does not work? My first solution works but it's really bad..

asked Nov 20 '18 at 19:41

Antonio Faienza

3318

Here WeGo Map

Stamen Map

Bing Map

For example for Bing Map i have:

function bingMaps() {

  var layers = ;

  var i;

  for (i = 0; i < bingStyles.length; ++i) {

    layers.push(new ol.layer.Tile({

      visible: false,

      preload: Infinity,

      source: new ol.source.BingMaps({

        key: KEY_BING, //'Your Bing Maps Key from http://www.bingmapsportal.com/ here',

        imagerySet: bingStyles[i]

        // use maxZoom 19 to see stretched tiles instead of the BingMaps

        // "no photos at this zoom level" tiles

        // maxZoom: 19

      })

    }));

  }



  var bingLayers = new ol.layer.Group({

    title: "Bing",

    layers: layers

  });



  // return bingLayers;

  groupsMap.push(bingLayers);

}

Every Layer is available on sidebar in this way:

for (var i = 0; i < layers.length; ++i) {

      if (groupSelected.values_.title === "Bing") {

        layers[i].setVisible(bingStyles[i] === layerSelected);

      }

...

}

At the end i set my filters:

var selectedKernel = normalize(kernels["sharpen"]);

$('.selected-filter').on("click",function () {

    var filterSelected = $(this).attr("value");

    console.log(filterSelected);

    selectedKernel = normalize(kernels[filterSelected]);

    map.render();

 });

For setting the filters for ALL my layers the only solution that
it seems to work is this:

var layers = groupsMap[0].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }



  var layers = groupsMap[1].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }



  var layers = groupsMap[2].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }



  var layers = groupsMap[3].values_.layers.array_;

  // var layers = groupsMap.getLayers().array_;

  for (var i = 0; i < layers.length; i++) {

    layers[i].on('postcompose', function (event) {

      convolve(event.context, selectedKernel);

    });

  }

In fact if i try to use a cycle:

for(var i = 0; i < groupsMap.length; i++){ 

    var layers = groupsMap[i].values_.layers.array_;

    // var layers = groupsMap.getLayers().array_;

    for (var i = 0; i < layers.length; i++) {

        layers[i].on('postcompose', function (event) {

          convolve(event.context, selectedKernel);

        });

    }

  }

or:

for(var i = 0; i < groupsMap.length; i++){ 

    var layers = groupsMap[i].values_.layers.array_;

    applyFilter(map.getLayers().array_,selectedKernel);

  }

does not work. in particular does not work map.render(),method defined befor. Why ?
Can someone help me to understand why it does not work? My first solution works but it's really bad..

javascript openlayers

asked Nov 20 '18 at 19:41

Antonio Faienza

3318

asked Nov 20 '18 at 19:41

Antonio Faienza

3318

asked Nov 20 '18 at 19:41

Antonio Faienza

3318

asked Nov 20 '18 at 19:41

Antonio Faienza

3318

asked Nov 20 '18 at 19:41

Antonio Faienza

3318

1

The first method won't work correctly because you are using i for both the inner and outer for loops.

– Mike
Nov 20 '18 at 20:03

ooh Yes ! tiredness makes bad jokes. Thanks :)

– Antonio Faienza
Nov 20 '18 at 20:14

add a comment |

1

The first method won't work correctly because you are using i for both the inner and outer for loops.

– Mike
Nov 20 '18 at 20:03

ooh Yes ! tiredness makes bad jokes. Thanks :)

– Antonio Faienza
Nov 20 '18 at 20:14

The first method won't work correctly because you are using i for both the inner and outer for loops.

– Mike
Nov 20 '18 at 20:03

ooh Yes ! tiredness makes bad jokes. Thanks :)

– Antonio Faienza
Nov 20 '18 at 20:14

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400407%2fopenlayers-image-filter-for-different-layer%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu