Skip to content

Commit 890e35d

Browse files
martinoyovomartinoyovo
authored
Apply style to WMS Layer (#188)
Apply style to WMS Layer
1 parent 471e699 commit 890e35d

File tree

6 files changed

+321
-4
lines changed

6 files changed

+321
-4
lines changed

‎assets/generated_samples_list.json‎

Lines changed: 94 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -365,6 +365,34 @@
365365
"title": "Apply simple renderer to feature layer",
366366
"key": "apply_simple_renderer_to_feature_layer"
367367
},
368+
"apply_style_to_wms_layer": {
369+
"category": "Layers",
370+
"description": "Change the style of a Web Map Service (WMS) layer.",
371+
"ignore": false,
372+
"images": [
373+
"apply_style_to_wms_layer.png"
374+
],
375+
"keywords": [
376+
"WMS",
377+
"imagery",
378+
"styles",
379+
"visualization",
380+
"WmsLayer",
381+
"WmsLayerInfo",
382+
"WmsSublayer"
383+
],
384+
"redirect_from": [],
385+
"relevant_apis": [
386+
"WmsLayer",
387+
"WmsLayerInfo",
388+
"WmsSublayer"
389+
],
390+
"snippets": [
391+
"apply_style_to_wms_layer.dart"
392+
],
393+
"title": "Apply style to WMS layer",
394+
"key": "apply_style_to_wms_layer"
395+
},
368396
"apply_unique_value_renderer": {
369397
"category": "Visualization",
370398
"description": "Render features in a layer using a distinct symbol for each unique attribute value.",
@@ -582,18 +610,22 @@
582610
"buffer",
583611
"geometry",
584612
"planar",
585-
"Geometry",
586-
"GeometryEngine.buffer",
613+
"ArcGISMap",
614+
"ArcGISMapImageLayer",
615+
"ArcGISMapView",
587616
"GeometryEngine.bufferCollection",
588617
"GeometryEngine.project",
618+
"GraphicsOverlay",
589619
"SpatialReference"
590620
],
591621
"redirect_from": [],
592622
"relevant_apis": [
593-
"Geometry",
594-
"GeometryEngine.buffer",
623+
"ArcGISMap",
624+
"ArcGISMapImageLayer",
625+
"ArcGISMapView",
595626
"GeometryEngine.bufferCollection",
596627
"GeometryEngine.project",
628+
"GraphicsOverlay",
597629
"SpatialReference"
598630
],
599631
"snippets": [
@@ -1982,6 +2014,64 @@
19822014
"title": "Snap geometry edits",
19832015
"key": "snap_geometry_edits"
19842016
},
2017+
"style_graphics_with_renderer": {
2018+
"category": "Maps",
2019+
"description": "A renderer allows you to change the style of all graphics in a graphics overlay by referencing a single symbol style. A renderer will only affect graphics that do not specify their own symbol style.",
2020+
"ignore": false,
2021+
"images": [
2022+
"style_graphics_with_renderer.png"
2023+
],
2024+
"keywords": [
2025+
"arc",
2026+
"bezier",
2027+
"curve",
2028+
"display",
2029+
"ellipse",
2030+
"graphics",
2031+
"marker",
2032+
"overlay",
2033+
"renderer",
2034+
"segment",
2035+
"symbol",
2036+
"true curve",
2037+
"CubicBezierSegment",
2038+
"EllipticArcSegment",
2039+
"GeodesicEllipseParameters",
2040+
"Geometry",
2041+
"GeometryEngine.ellipseGeodesic",
2042+
"Graphic",
2043+
"GraphicsOverlay",
2044+
"MutablePart",
2045+
"PolygonBuilder",
2046+
"PolylineBuilder",
2047+
"SimpleFillSymbol",
2048+
"SimpleLineSymbol",
2049+
"SimpleMarkerSymbol",
2050+
"SimpleRenderer"
2051+
],
2052+
"redirect_from": [],
2053+
"relevant_apis": [
2054+
"CubicBezierSegment",
2055+
"EllipticArcSegment",
2056+
"GeodesicEllipseParameters",
2057+
"Geometry",
2058+
"GeometryEngine.ellipseGeodesic",
2059+
"Graphic",
2060+
"GraphicsOverlay",
2061+
"MutablePart",
2062+
"PolygonBuilder",
2063+
"PolylineBuilder",
2064+
"SimpleFillSymbol",
2065+
"SimpleLineSymbol",
2066+
"SimpleMarkerSymbol",
2067+
"SimpleRenderer"
2068+
],
2069+
"snippets": [
2070+
"style_graphics_with_renderer.dart"
2071+
],
2072+
"title": "Style graphics with renderer",
2073+
"key": "style_graphics_with_renderer"
2074+
},
19852075
"style_graphics_with_symbols": {
19862076
"category": "Visualization",
19872077
"description": "Use a symbol style to display a graphic on a graphics overlay.",

‎lib/models/samples_widget_list.dart‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import 'package:arcgis_maps_sdk_flutter_samples/samples/add_wmts_layer/add_wmts_
1010
import 'package:arcgis_maps_sdk_flutter_samples/samples/apply_class_breaks_renderer_to_sublayer/apply_class_breaks_renderer_to_sublayer.dart';
1111
import 'package:arcgis_maps_sdk_flutter_samples/samples/apply_scheduled_updates_to_preplanned_map_area/apply_scheduled_updates_to_preplanned_map_area.dart';
1212
import 'package:arcgis_maps_sdk_flutter_samples/samples/apply_simple_renderer_to_feature_layer/apply_simple_renderer_to_feature_layer.dart';
13+
import 'package:arcgis_maps_sdk_flutter_samples/samples/apply_style_to_wms_layer/apply_style_to_wms_layer.dart';
1314
import 'package:arcgis_maps_sdk_flutter_samples/samples/apply_unique_value_renderer/apply_unique_value_renderer.dart';
1415
import 'package:arcgis_maps_sdk_flutter_samples/samples/authenticate_with_oauth/authenticate_with_oauth.dart';
1516
import 'package:arcgis_maps_sdk_flutter_samples/samples/authenticate_with_token/authenticate_with_token.dart';
@@ -84,6 +85,7 @@ final sampleWidgets = {
8485
const ApplyScheduledUpdatesToPreplannedMapArea(),
8586
'apply_simple_renderer_to_feature_layer': () =>
8687
const ApplySimpleRendererToFeatureLayer(),
88+
'apply_style_to_wms_layer': () => const ApplyStyleToWmsLayer(),
8789
'apply_unique_value_renderer': () => const ApplyUniqueValueRenderer(),
8890
'authenticate_with_oauth': () => const AuthenticateWithOAuth(),
8991
'authenticate_with_token': () => const AuthenticateWithToken(),

‎lib/samples/apply_style_to_wms_layer/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Apply style to WMS layer
2+
3+
Change the style of a Web Map Service (WMS) layer.
4+
5+
![Image of apply style to WMS layer](apply_style_to_wms_layer.png)
6+
7+
## Use case
8+
9+
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.
10+
11+
## How to use the sample
12+
13+
Once the layer loads, toggle between the first and second styles of the WMS layer using the dropdown menu.
14+
15+
## How it works
16+
17+
1. Create a `WmsLayer` specifying the URL of the service and the layer names you want `WmsLayer.withUriAndLayerNames(uri: Uri.parse(url), layerNames: names)`.
18+
2. When the layer is done loading, get its list of style strings using `WmsLayer.layerInfos.styles`.
19+
3. Set one of the styles using `WmsSublayer.currentStyle = styles.first`.
20+
21+
## Relevant API
22+
23+
* WmsLayer
24+
* WmsLayerInfo
25+
* WmsSublayer
26+
27+
## About the data
28+
29+
This sample uses a public service managed by the State of Minnesota and provides composite imagery for the state and the surrounding areas.
30+
31+
## Tags
32+
33+
imagery, styles, visualization, WMS

‎lib/samples/apply_style_to_wms_layer/README.metadata.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"category": "Layers",
3+
"description": "Change the style of a Web Map Service (WMS) layer.",
4+
"ignore": false,
5+
"images": [
6+
"apply_style_to_wms_layer.png"
7+
],
8+
"keywords": [
9+
"WMS",
10+
"imagery",
11+
"styles",
12+
"visualization",
13+
"WmsLayer",
14+
"WmsLayerInfo",
15+
"WmsSublayer"
16+
],
17+
"redirect_from": [],
18+
"relevant_apis": [
19+
"WmsLayer",
20+
"WmsLayerInfo",
21+
"WmsSublayer"
22+
],
23+
"snippets": [
24+
"apply_style_to_wms_layer.dart"
25+
],
26+
"title": "Apply style to WMS layer"
27+
}

‎lib/samples/apply_style_to_wms_layer/apply_style_to_wms_layer.dart‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
//
2+
// Copyright 2024 Esri
3+
//
4+
// Licensed under the Apache License, Version 2.0 (the "License");
5+
// you may not use this file except in compliance with the License.
6+
// You may obtain a copy of the License at
7+
//
8+
// https://www.apache.org/licenses/LICENSE-2.0
9+
//
10+
// Unless required by applicable law or agreed to in writing, software
11+
// distributed under the License is distributed on an "AS IS" BASIS,
12+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
// See the License for the specific language governing permissions and
14+
// limitations under the License.
15+
//
16+
17+
import 'package:arcgis_maps/arcgis_maps.dart';
18+
import 'package:arcgis_maps_sdk_flutter_samples/utils/sample_state_support.dart';
19+
import 'package:flutter/material.dart';
20+
21+
class ApplyStyleToWmsLayer extends StatefulWidget {
22+
const ApplyStyleToWmsLayer({super.key});
23+
24+
@override
25+
State<ApplyStyleToWmsLayer> createState() => _ApplyStyleToWmsLayerState();
26+
}
27+
28+
class _ApplyStyleToWmsLayerState extends State<ApplyStyleToWmsLayer>
29+
with SampleStateSupport {
30+
// Create a controller for the map view.
31+
final _mapViewController = ArcGISMapView.createController();
32+
33+
// A flag for when the map view is ready and controls can be used.
34+
var _ready = false;
35+
36+
// Hold a reference to the layer to enable re-styling.
37+
late WmsLayer _wmsLayer;
38+
39+
// String array to store the styles.
40+
final _stylesTitles = [
41+
'Default',
42+
'Contrast stretch',
43+
];
44+
45+
// Create variable for holding sublayer style.
46+
String? _selectedStyle;
47+
48+
@override
49+
Widget build(BuildContext context) {
50+
return Scaffold(
51+
body: SafeArea(
52+
top: false,
53+
child: Stack(
54+
children: [
55+
Column(
56+
children: [
57+
Expanded(
58+
// Add a map view to the widget tree and set a controller.
59+
child: ArcGISMapView(
60+
controllerProvider: () => _mapViewController,
61+
onMapViewReady: onMapViewReady,
62+
),
63+
),
64+
// Build the bottom menu.
65+
buildBottomMenu(),
66+
],
67+
),
68+
// Display a progress indicator and prevent interaction until state is ready.
69+
Visibility(
70+
visible: !_ready,
71+
child: const SizedBox.expand(
72+
child: ColoredBox(
73+
color: Colors.white30,
74+
child: Center(child: CircularProgressIndicator()),
75+
),
76+
),
77+
),
78+
],
79+
),
80+
),
81+
);
82+
}
83+
84+
Widget buildBottomMenu() {
85+
return Center(
86+
// A drop down button for selecting style.
87+
child: DropdownButton(
88+
alignment: Alignment.center,
89+
hint: const Text(
90+
'Choose a style',
91+
style: TextStyle(
92+
color: Colors.deepPurple,
93+
),
94+
),
95+
icon: const Icon(Icons.arrow_drop_down),
96+
iconEnabledColor: Colors.deepPurple,
97+
iconDisabledColor: Colors.grey,
98+
style: const TextStyle(color: Colors.deepPurple),
99+
value: _selectedStyle,
100+
items: _stylesTitles.map((items) {
101+
return DropdownMenuItem(
102+
value: items,
103+
child: Text(items),
104+
);
105+
}).toList(),
106+
onChanged: (style) {
107+
if (style != null) {
108+
changeStyle(style);
109+
}
110+
},
111+
),
112+
);
113+
}
114+
115+
void changeStyle(String style) {
116+
// Set the selected style.
117+
setState(() => _selectedStyle = style);
118+
119+
// Get the available styles from the first sublayer.
120+
final styles = _wmsLayer.layerInfos.first.styles;
121+
final wmsSublayer = _wmsLayer.sublayers.first as WmsSublayer;
122+
123+
switch (style) {
124+
case 'Default':
125+
// Apply the first style to the first sublayer.
126+
setState(() => wmsSublayer.currentStyle = styles[0]);
127+
case 'Contrast stretch':
128+
// Apply the second style to the first sublayer.
129+
setState(() => wmsSublayer.currentStyle = styles[1]);
130+
default:
131+
throw StateError('Unknown style');
132+
}
133+
}
134+
135+
void onMapViewReady() async {
136+
// Create a map with spatial reference appropriate for the service.
137+
final map = ArcGISMap(spatialReference: SpatialReference(wkid: 26915))
138+
..minScale = 7000000.0;
139+
// Create a new WMS layer displaying the specified layers from the service.
140+
// The default styles are chosen by default.
141+
const wmsLayerUri =
142+
'https://imageserver.gisdata.mn.gov/cgi-bin/mncomp?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities';
143+
_wmsLayer = WmsLayer.withUriAndLayerNames(
144+
uri: Uri.parse(wmsLayerUri),
145+
layerNames: ['mncomp'],
146+
);
147+
148+
// Wait for the layer to load.
149+
await _wmsLayer.load();
150+
151+
if (_wmsLayer.fullExtent != null) {
152+
// Center the map on the layer's contents.
153+
map.initialViewpoint = Viewpoint.fromTargetExtent(_wmsLayer.fullExtent!);
154+
}
155+
156+
// Add the layer to the map.
157+
map.operationalLayers.add(_wmsLayer);
158+
159+
// Add the map to the view.
160+
_mapViewController.arcGISMap = map;
161+
162+
// Set the ready state variable to true to enable the sample UI.
163+
setState(() => _ready = true);
164+
}
165+
}

‎lib/samples/apply_style_to_wms_layer/apply_style_to_wms_layer.png‎

392 KB
Loading

0 commit comments

Comments
 (0)