Style WMS layer

View inC++QMLView on GitHubSample viewer app

Change the style of a Web Map Service (WMS) layer.

screenshot

Use case

Layers hosted on WMS may have different pre-set styles available to apply to them. Swapping between these styles can help during visual examination of the data. For example, increasing the contrast of satellite images can help in identifying urban and agricultural areas within forested areas.

How to use the sample

Select one of the styles and the map will update the display with the selected style.

How it works

  1. Create a WmsLayer specifying the URL of the service and the layer names you want.
  2. When the layer is done loading, get its list of style strings using wmsLayer.sublayers[0].sublayerInfo.styles.
  3. Set one of the styles using wmsLayer.sublayers[0].currentStyle = styleString.

Relevant API

  • WmsLayer
  • WmsSublayer
  • WmsSublayerInfo

About the data

This sample uses a public service managed by the State of Minnesota and provides composite imagery for the state and the surrounding areas.

Tags

imagery, styles, visualization, WMS

Sample Code

StyleWmsLayer.qml
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
// [WriteFile Name=StyleWmsLayer, Category=Layers]
// [Legal]
// Copyright 2018 Esri.

// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// [Legal]

import QtQuick
import QtQuick.Controls
import Esri.ArcGISRuntime

Rectangle {
    id: rootRectangle
    clip: true
    width: 800
    height: 600

    property var sublayer: null
    property var styles

    MapView {
        id: mapView
        anchors.fill: parent

        Component.onCompleted: {
            // Set the focus on MapView to initially enable keyboard navigation
            forceActiveFocus();
        }

        Map {
            // create a map with spatial reference appropriate for the WMS service (North American Datum 83)
            spatialReference: SpatialReference {wkid: 26915}
            minScale: 7000000

            WmsLayer {
                id: wmsLayer
                url: "https://imageserver.gisdata.mn.gov/cgi-bin/mncomp?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities"
                layerNames: ["mncomp"]

                onLoadStatusChanged: {
                    if (loadStatus !== Enums.LoadStatusLoaded)
                        return;

                    // zoom to the layer
                    mapView.setViewpointGeometry(fullExtent);

                    // get the subLayer
                    sublayer = sublayers[0];

                    // get the styles
                    styles = sublayer.sublayerInfo.styles;
                }
            }
        }
    }

    Rectangle {
        anchors {
            fill: controlColumn
            margins: -5
        }
        color: "lightgray"
        radius: 5
        opacity: 0.75
    }

    ButtonGroup {
        buttons: controlColumn.children
    }

    Column {
        id: controlColumn
        anchors {
            left: parent.left
            top: parent.top
            margins: 10
        }
        spacing: 5

        RadioButton {
            text: "Default"
            checked: true
            onCheckedChanged: {
                if (checked) {
                    if (!sublayer)
                        return;

                    // set the style string on the sublayer
                    sublayer.currentStyle = styles[0];
                }
            }
        }

        RadioButton {
            text: "Contrast Stretch"
            onCheckedChanged: {
                if (checked) {
                    if (!sublayer)
                        return;

                    // set the style string on the sublayer
                    sublayer.currentStyle = styles[1];
                }
            }
        }
    }
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.