how can I bind layers from database or add new layer(s) to existing layer?

8 views

Skip to first unread message

Farzaneh

unread,

Jul 10, 2017, 1:17:05 AM7/10/17

to OpenLayers Dev

First of all, I have to say that I'm new to the OpenLayers. I was used OpenLayers 4 in this project.

We have a map with group layers that can visible or invisible any of them.

var map = new ol.Map({
            controls: ol.control.defaults().extend([
              new ol.control.FullScreen()
            ]),
        layers: [
          new ol.layer.Tile({
              source: new ol.source.OSM()
          }), new ol.layer.Group({
              layers: [
                new ol.layer.Tile({
                    source: new ol.source.TileJSON({
                        url: 'https://api.tiles.mapbox.com/v3/mapbox.20110804-hoa-foodinsecurity-3month.json?secure',
                        crossOrigin: 'anonymous'
                    })
                }),
                new ol.layer.Tile({
                    source: new ol.source.TileJSON({
                        url: 'https://api.tiles.mapbox.com/v3/mapbox.world-borders-light.json?secure',
                        crossOrigin: 'anonymous'
                    })
                }),
                new ol.layer.Tile({
                    source: new ol.source.TileJSON({
                        url: 'https://api.tiles.mapbox.com/v3/mapbox.world-borders-light.json?secure',
                        crossOrigin: 'anonymous'
                    })
                })
              ]
          })
        ],
        target: 'map',
        view: new ol.View({
            center: ol.proj.fromLonLat([51.360294, 35.713068]),
            zoom: 10
        })
    });

now, how can I bind layers from database or add new layer(s) to existing layer?
I create this part of above code with in code behind and then put the output in the place, but it does not work.

,new ol.layer.Tile({                    
     source: new ol.source.TileJSON({
     url: 'https://api.tiles.mapbox.com/v3/mapbox.world-borders-light.json?secure',
     crossOrigin: 'anonymous'
     })
}),
new ol.layer.Tile({
     source: new ol.source.TileJSON({
     url: 'https://api.tiles.mapbox.com/v3/mapbox.world-borders-light.json?secure',
     crossOrigin: 'anonymous'
     })
})

var map = new ol.Map({

        controls: ol.control.defaults().extend([
          new ol.control.FullScreen()
        ]),
        layers: [
          new ol.layer.Tile({
              source: new ol.source.OSM()
          }), new ol.layer.Group({
              layers: [
                  maplayer
              ]
          })
        ],
        target: 'map',
        view: new ol.View({
            center: ol.proj.fromLonLat([51.360294, 35.713068]),
            zoom: 10
        })
    });