My added shapefiles appear behind the base layers?

[drissrais]

Hi there! First thank you for your considerable efforts. I'm facing a problem since a while, working with angular openlayers directive and geoserver. In my map.controller.js i have added four layers as base maps in a variable i've named layers, with a function to allow changing between them, like shown below:

vm.layers = [
    {
        name : 'OpenStreetMap',
        active : true,
        source : {
            type : 'OSM',
            url : "http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            attribution : '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }
    },
    {
        name : 'Stamen',
        active : false,
        source : {
            type : 'Stamen',
            layer : 'terrain'
        }
    },
    {
        name : 'Bing Maps Road',
        active : false,
        source : {
            name : 'Bing Maps',
            type : 'BingMaps',
            key : 'Aj6XtE1Q1rIvehmjn2Rh1LR2qvMGZ-8vPS9Hn3jCeUiToM77JFnf-kFRzyMELDol',
            imagerySet : 'Road'
        }
    },
    {
        name : 'Esri Maps',
        active : false,
        source : {
            layer : 'World_Street_Map',// ['World_Imagery',
            // 'World_Street_Map',
            // 'World_Topo_Map',
            // 'World_Physical_Map',
            // 'World_Terrain_Base',
            // 'Ocean_Basemap',
            // 'World_Light_Gray_Base',
            // 'NatGeo_World_Map']
            type : 'EsriBaseMaps'
        }
    }
];
vm.changeLayer = function(layer) {
    vm.layers.map(function(l) {
        l.active = (l === layer);
    });
    vm.selectedLayer = layer.name;
};

My file map.html is like below: (with a list of 4 radio buttons and using angular-openlayers-directive)

<openlayers custom-layers="true" ol-view="vm.view" ol-center="vm.center" ol-controls="vm.controls" width="100%" height="480px">                                                                             
    <ol-layer name="{{ layer.name }}" ol-layer-properties="layer" ng-repeat="layer in vm.layers|filter: { active: true}"></ol-layer>
    <ol-control name="{{ control.name }}" ng-repeat="control in vm.controls|filter: {active: true}"></ol-control>                   
</openlayers>
<nav id="couches">                                                                                                               
    <ul data-ng-repeat="layer in vm.layers">                                                                                     
    <label>                                                                                                                  
        <input name="name" type="radio" ng-value="layer.name" ng-model="vm.selectedLayer" ng-click="vm.changeLayer(layer)" />
        {{layer.name}}                                                                                                       
    </label>                                                                                                                 
    </ul>                                                                                                                        
</nav>

All is working well, and i can select and see any of my base maps. The problem is when i added my shapefiles stored in a Postgresql/PostGIS database that i've connected with geoserver and published them, i see my shapefiles behind the base layers. In my map.controller.js i have added a variable i named geoserver in which i call my shapefile from geoserver with wms like i've seen in an example, like below:

vm.geoserver = {                                                                                                                                                                                                                                                 
    source: {                                                                                                                                                                                                                                                    
        type: 'ImageWMS',                                                                                                                                                                                                                                        
        url: 'http://10.0.0.20:8090/geoserver/GDRT/wms?service=WMS&version=1.1.0&request=GetMap&layers=GDRT:gvzon_region&styles=&bbox=59854.399822449,1620430.89990564,1197822.00029282,2677440.49973894&width=768&height=713&srs=EPSG:27572&format=image%2Fpng',
        params: {                                                                                                                                                                                                                                                
            LAYERS: 'GDRT:gvzon_region',                                                                                                                                                                                                                         
            FORMAT: 'image/png',                                                                                                                                                                                                                                 
            VERSION: '1.1.0',
            STYLES: ''                                                                                                                                                                                                                                                 
        },                                                                                                                                                                                                                                                       
    crossOrigin: null,                                                                                                                                                                                                                                           
    serverType: 'geoserver',                                                                                                                                                                                                                                     
    }                                                                                                                                                                                                                                                            
};

then i added in my map.html the balise corresponding to my geoserver variable like shown below:

<openlayers custom-layers="true" ol-view="vm.view" ol-center="vm.center" ol-controls="vm.controls" width="100%" height="480px">     
    <ol-layer ol-layer-properties="vm.geoserver"></ol-layer>                                                                        
    <ol-layer name="{{ layer.name }}" ol-layer-properties="layer" ng-repeat="layer in vm.layers|filter: { active: true}"></ol-layer>
    <ol-control name="{{ control.name }}" ng-repeat="control in vm.controls|filter: {active: true}"></ol-control>                   
</openlayers>

After that, i visualized just the base layers like before and didn't see my geoserver layer that i added, i thought first that the adding of the layer from geoserver failed, but when i change from a base layer to another one, in that moment just before the selected base layer appears, i see first my geoserver layer before it is hidden behind the selected base layer, i knew that it is successfully added but is just hidden behind the base layers, so it's just visibility problem. How can i make it over the base layers? is it related with an order that i have to respect or should i add something? Thanks and sorry for being long.

[juristr]

Hi, can you try to invert the order? Like

<openlayers custom-layers="true" ol-view="vm.view" ol-center="vm.center" ol-controls="vm.controls" width="100%" height="480px">     
    <ol-layer name="{{ layer.name }}" ol-layer-properties="layer" ng-repeat="layer in vm.layers|filter: { active: true}"></ol-layer>
    <ol-layer ol-layer-properties="vm.geoserver"></ol-layer>                                                                        
    <ol-control name="{{ control.name }}" ng-repeat="control in vm.controls|filter: {active: true}"></ol-control>                   
</openlayers>

If I recall correctly, the bottom-most layer in the directive configuration is the highest layer (from z-index perspective) in the map. Let me know if that solves your issue

[drissrais]

Yes, that's it. Thank you.

2017-03-08 10:11 GMT+00:00 Juri Strumpflohner notifications@github.com:

Hi, can you try to invert the order? Like

If I recall correctly, the bottom-most layer in the directive configuration is the highest layer (from z-index perspective) in the map. Let me know if that solves your issue

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/tombatossals/angular-openlayers-directive/issues/357#issuecomment-285000849, or mute the thread https://github.com/notifications/unsubscribe-auth/AY7WiWs_ntXlW_HRCFHyMQExA_AHz-wCks5rjn62gaJpZM4MVYeX .

[drissrais]

Another thing plz. When i change the base layer, the selected base layer hide my vector layers again. How to make them visible even when i change the base layer?

[drissrais]

Another thing plz. When i change the base layer, the selected base layer hide my vector layers again. How to make them visible even when i change the base layer?

2017-03-08 10:39 GMT+00:00 Juri Strumpflohner notifications@github.com:

Closed #357 https://github.com/tombatossals/angular-openlayers-directive/issues/357.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/tombatossals/angular-openlayers-directive/issues/357#event-991132740, or mute the thread https://github.com/notifications/unsubscribe-auth/AY7WicJ2AMijJ3deiy9Uda7rj9avK_Boks5rjoV4gaJpZM4MVYeX .

[juristr]

Hmm..not sure. That shouldn't happen, unless the order of layers gets messed up again when you hide/show the base layers.

What I usually do is to pass in the entire set of layers as a single array.

<openlayers custom-layers="true" ol-view="vm.view" ol-center="vm.center" ol-controls="vm.controls" width="100%" height="480px">     
    <ol-layer name="{{ layer.name }}" ol-layer-properties="layer" ng-repeat="layer in vm.layers|filter: { active: true}"></ol-layer>    <ol-control name="{{ control.name }}" ng-repeat="control in vm.controls|filter: {active: true}"></ol-control>                   
</openlayers>

vm.layers basically contains all, the base layers as well as other layers. And I make sure to keep them ordered properly, such that the base layers stay below others.

[drissrais]

I see what you mean, but in case i pass the entire set of layers as a single array, how should i modify my function of changing ONLY base layers, not my vector layers? here is my function: vm.changeLayer = function(layer) { vm.layers.map(function(l) { l.active = (l === layer); }); vm.selectedLayer = layer.name; }; Thanks.

2017-03-08 12:20 GMT+00:00 Juri Strumpflohner notifications@github.com:

Hmm..not sure. That shouldn't happen, unless the order of layers gets messed up again when you hide/show the base layers.

What I usually do is to pass in the entire set of layers as a single array.

vm.layers basically contains all, the base layers as well as other layers. And I make sure to keep them ordered properly, such that the base layers stay below others.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/tombatossals/angular-openlayers-directive/issues/357#issuecomment-285026653, or mute the thread https://github.com/notifications/unsubscribe-auth/AY7WiTiFhCFm1kCBEz2YMEMUfuBBTt5aks5rjpzwgaJpZM4MVYeX .

[drissrais]

Because as you could have seen in my map.html, i've made a list of 4 radio buttons concerning base layers to allow user select between them.

{{layer.name}}

How can i do if i pass the entire set of layers in a single array?

2017-03-08 14:02 GMT+00:00 Driss Rais drissrais@gmail.com:

I see what you mean, but in case i pass the entire set of layers as a single array, how should i modify my function of changing ONLY base layers, not my vector layers? here is my function: vm.changeLayer = function(layer) { vm.layers.map(function(l) { l.active = (l === layer); }); vm.selectedLayer = layer.name; }; Thanks.

2017-03-08 12:20 GMT+00:00 Juri Strumpflohner notifications@github.com:

Hmm..not sure. That shouldn't happen, unless the order of layers gets messed up again when you hide/show the base layers.

What I usually do is to pass in the entire set of layers as a single array.

vm.layers basically contains all, the base layers as well as other layers. And I make sure to keep them ordered properly, such that the base layers stay below others.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/tombatossals/angular-openlayers-directive/issues/357#issuecomment-285026653, or mute the thread https://github.com/notifications/unsubscribe-auth/AY7WiTiFhCFm1kCBEz2YMEMUfuBBTt5aks5rjpzwgaJpZM4MVYeX .