Add map image layer sample (#96)

* Created a new sample

* added trailing commas

* Adopted changes

Author: shokhinaToj

assets/generated_samples_list.json

@@ -67,6 +67,28 @@
     "title": "Add feature layers",
     "key": "add_feature_layers"
   },
+  "add_map_image_layer": {
+    "category": "Maps",
+    "description": "Display a layer from an ArcGIS map image layer service.",
+    "ignore": false,
+    "images": [],
+    "keywords": [
+      "display",
+      "image",
+      "layer",
+      "map",
+      "ArcGISMapImageLayer"
+    ],
+    "redirect_from": [],
+    "relevant_apis": [
+      "ArcGISMapImageLayer"
+    ],
+    "snippets": [
+      "add_map_image_layer_sample.dart"
+    ],
+    "title": "Add map image layer",
+    "key": "add_map_image_layer"
+  },
   "add_tiled_layer": {
     "category": "Layers",
     "description": "Load an ArcGIS tiled layer from a URL.",

lib/models/samples_widget_list.dart

@@ -1,5 +1,6 @@
 import 'package:arcgis_maps_sdk_flutter_samples/samples/add_feature_collection_layer_from_table/add_feature_collection_layer_from_table_sample.dart';
 import 'package:arcgis_maps_sdk_flutter_samples/samples/add_feature_layers/add_feature_layers_sample.dart';
+import 'package:arcgis_maps_sdk_flutter_samples/samples/add_map_image_layer/add_map_image_layer_sample.dart';
 import 'package:arcgis_maps_sdk_flutter_samples/samples/add_tiled_layer/add_tiled_layer_sample.dart';
 import 'package:arcgis_maps_sdk_flutter_samples/samples/add_tiled_layer_as_basemap/add_tiled_layer_as_basemap_sample.dart';
 import 'package:arcgis_maps_sdk_flutter_samples/samples/add_vector_tiled_layer/add_vector_tiled_layer_sample.dart';
@@ -46,6 +47,7 @@ const sampleWidgets = <String, Widget>{
   'add_feature_collection_layer_from_table':
       AddFeatureCollectionLayerFromTableSample(),
   'add_feature_layers': AddFeatureLayersSample(),
+  'add_map_image_layer': AddMapImageLayerSample(),
   'add_tiled_layer': AddTiledLayerSample(),
   'add_tiled_layer_as_basemap': AddTiledLayerAsBasemapSample(),
   'add_vector_tiled_layer': AddVectorTiledLayerSample(),
@@ -85,7 +87,7 @@ const sampleWidgets = <String, Widget>{
   'show_magnifier': ShowMagnifierSample(),
   'show_portal_user_info': ShowPortalUserInfoSample(),
   'show_service_area': ShowServiceAreaSample(),
+  'show_legend': ShowLegendSample(),
   'style_point_with_simple_marker_symbol':
       StylePointWithSimpleMarkerSymbolSample(),
-  'show_legend': ShowLegendSample(),
 };

lib/samples/add_map_image_layer/README.md

@@ -0,0 +1,27 @@
+# Add map image layer
+
+Display a layer from an ArcGIS map image layer service.
+
+![Image of add map image layer](add_map_image_layer.png)
+
+## Use case
+
+Map image layers are also referred to as dynamic map services. These services generate images dynamically on the server and send the resulting image to the requesting client. This is useful when rendering complex cartography or large amounts of data in a connected environment, as the client simply displays the image that the server returns. This can result in more accurate and faster-performing layers.
+
+## How to use the sample
+
+Run the sample and view the map image layer. As you navigate the map, the layer issues image requests for the new map extent. The resulting images are rendered on the screen.
+
+## How it works
+
+1. Create an instance of `ArcGISMap`.
+2. Create an `ArcGISMapImageLayer` with the URL to a map image service.
+3. Add it to the map's operational layers collection.
+
+## Relevant API
+
+* ArcGISMapImageLayer
+
+## Tags
+
+display, image, layer, map

lib/samples/add_map_image_layer/README.metadata.json

@@ -0,0 +1,23 @@
+{
+    "category": "Maps",
+    "description": "Display a layer from an ArcGIS map image layer service.",
+    "ignore": false,
+    "images": [
+        "add_map_image_layer.png"
+    ],
+    "keywords": [
+        "display",
+        "image",
+        "layer",
+        "map",
+        "ArcGISMapImageLayer"
+    ],
+    "redirect_from": [],
+    "relevant_apis": [
+        "ArcGISMapImageLayer"
+    ],
+    "snippets": [
+        "add_map_image_layer_sample.dart"
+    ],
+    "title": "Add map image layer"
+}

lib/samples/add_map_image_layer/add_map_image_layer.png

@@ -0,0 +1,59 @@
+//
+// Copyright 2024 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
+//
+//   https://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.
+//
+
+import 'package:arcgis_maps/arcgis_maps.dart';
+import 'package:arcgis_maps_sdk_flutter_samples/utils/sample_state_support.dart';
+import 'package:flutter/material.dart';
+
+class AddMapImageLayerSample extends StatefulWidget {
+  const AddMapImageLayerSample({super.key});
+
+  @override
+  State<AddMapImageLayerSample> createState() => _AddMapImageLayerSampleState();
+}
+
+class _AddMapImageLayerSampleState extends State<AddMapImageLayerSample>
+    with SampleStateSupport {
+  // Create a map view controller.
+  final _mapViewController = ArcGISMapView.createController();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      // Add a map view to the widget tree and set a controller.
+      body: ArcGISMapView(
+        controllerProvider: () => _mapViewController,
+        onMapViewReady: onMapViewReady,
+      ), 
+    );
+  }
+
+  void onMapViewReady() async {
+    // Create a map with a map image layer.
+    final map = ArcGISMap();
+    // Create a map image layer with a uri.
+    final mapImageLayer = ArcGISMapImageLayer.withUri(
+      Uri.parse(
+          'https://sampleserver5.arcgisonline.com/arcgis/rest/services/Elevation/WorldElevations/MapServer'),
+    );
+    // Add the map image layer to the map.
+    map.operationalLayers.add(mapImageLayer);
+    // Load the map image layer.
+    await mapImageLayer.load();
+    // Set the map on the map view controller.
+    _mapViewController.arcGISMap = map;
+  }
+}