Angular5 Openlayers4

Question

I am trying to create a map with multiple layers which I can setvisible false or true. This is my code to set up the map:

  this.map = new OlMap({
              target: 'map',
              layers: [
                new OlTileLayer({
                  source: new OSM()
                }), new Group({
                  layers: [
                    new OlTileLayer({
                      source: new TileJSON({
                        url: 'https://api.tiles.mapbox.com/v3/mapbox.20110804-hoa-foodinsecurity-3month.json?secure',
                        crossOrigin: 'anonymous'
                      })
                    }),
                    new OlTileLayer({
                      source: new TileJSON({
                        url: 'https://api.tiles.mapbox.com/v3/mapbox.world-borders-light.json?secure',
                        crossOrigin: 'anonymous'
                      })
                    })
                  ]
                })
              ],
              view: this.view
            });

It works fine I can see the map and all the Layers. With a checkbox I want to set a certain layer to false or true.

How can i get the id of every layer that I have added and how can I set the visibility to false. I am using openlayers4 with Angular5

Thx a lot!

score 0 · Answer 1 · answered Jun 12 '18 at 20:46

0

First I would define my layers out of the map controls as a variable because then they can be turned and off with an event listener on your check box easily. The syntax here is going to be a little different because I'm not using Angular but the functionality is the same.

var floodZones=new ol.layer.Tile({
  source: new ol.source.TileWMS({
  extent: [-8459941, 4191197.5, -8400060, 4333020.5],
  url:'/geoserver/Property_Map/wms',
  params: {'Layers':'Property_Map:flood_3857', 'TILED':true},
  transition:0,
  serverType:'geoserver',
  version: '1.1.0'
 })
});



document.getElementById("flood").addEventListener("click", function(){
  if(!toggleFlood){
     map.removeLayer(floodZones)
  } else {
  map.addLayer(floodZones)
  }
  toggleFlood=!toggleFlood
  });
window.toggleFlood=true;

answered Jun 12 '18 at 20:46

Kristen Stilson

79
1
8

the problem with this is when I have 10 layers i will need to define 10 variables – Hans Jun 13 '18 at 10:52
Yep, I have 12, copy and paste and then changing the names and parameters if your friend. If they aren't named then how will your check-box know which one to turn on/off?? – Kristen Stilson Jun 13 '18 at 14:29
while they have a fixed number its fine to create that number of variables, if you prefer you can add them to an array – nalm Jun 14 '18 at 14:17

score 0 · Answer 2 · answered Jun 15 '18 at 07:47

If you have id or any other property defined to your layers you can get them using map.getLayers() and use foreach to find the layer with that property using layer.get()

Example:

new OlTileLayer({
    id: 'osm',
    source: new OSM()
})

You can get this layer and set visible using this

map.getLayers().forEach(function(layer) {
    if(layer.get('id') == 'osm') {
        layer.setVisible(false);
    }
});

To implement this with a checkbox you will probably have to assign that layer property as checkbox value and compare with layer.get('id')

Note that it doesn't have to be id you can use any name you like. And seems like you are using layer groups and if you want to get the layer of a group you need to get layers from the group instead of map like layergroup.getLayers()

Angular5 Openlayers4

2 Answers2