1

I'm 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?

  • Can you really have shapefiles in a PostGIS database? – Son of a Beach Mar 8 '17 at 2:21
  • @SonofaBeach yes by converting them into geojson format. – drissrais Mar 8 '17 at 10:11
  • If they are geojson, they are not shapefiles. Shapefiles are a format, geojson is a format. You can convert between them, but you cannot have shapefiles in geojson format. Just a minor technicallity. Doesn't really matter. :-) – Son of a Beach Mar 8 '17 at 10:55
  • @SonofaBeach you're right. – drissrais Mar 8 '17 at 14:13
1

Swap the order in which you add the layers. Add the base layer first, and then add the vector layer after that. The last layer added will be on top.

  • 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 Mar 8 '17 at 10:48
  • When you change the base layer, are you removing the old one and adding the new one? If so, you need to either specify where in the layer order to add it, or to also remove and re-add the vector layer again (ie, on top of the new base layer). – Son of a Beach Mar 8 '17 at 10:54
  • this is my function of changing base layers: vm.changeLayer = function(layer) { vm.layers.map(function(l) { l.active = (l === layer); }); }; You can see it above in my map.controller.js I am setting active attribute to true when changing base layers. – drissrais Mar 8 '17 at 10:55

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.