Display annotation

View on GitHub

Display annotation from a feature service URL.

Image of display annotation

Use case

Annotation is useful for displaying text that you don't want to move or resize when the map is panned or zoomed (unlike labels which will move and resize). You can use annotation to place text at a fixed size, position, orientation, font, and so on. You may choose to do this for cartographic reasons or because the exact placement of the text is important.

How to use the sample

Pan and zoom to see names of waters and burns in a small region of Scotland.

How it works

Create an ArcGISMap with a light gray canvas and a viewpoint near the data.
Create an AnnotationLayer from a feature service URL.
Add both layers to the operational layers of the map and add it to an ArcGISMapView.

Relevant API

AnnotationLayer
FeatureLayer

About the data

Data derived from the OS Open Rivers dataset from Ordnance Survey . Contains OS data © Crown copyright and database right 2018.

The annotation layer contains two sublayers of rivers in East Lothian, Scotland, which were set by the author to only be visible within the following scale ranges:

Water (1:50,000 - 1:100,000) - A large stream, as defined in the Scots language
Burn (1:25,000 - 1:75,000) - A brook or small stream, as defined in the Scots language

Additional information

Annotation is only supported from feature services hosted on ArcGIS Enterprise.

Sample Code

display_annotation.dart
Use dark colors for code blocksCopy
// 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:flutter/material.dart';

import '../../utils/sample_state_support.dart';

class DisplayAnnotation extends StatefulWidget {
  const DisplayAnnotation({super.key});

  @override
  State<DisplayAnnotation> createState() => _DisplayAnnotationState();
}

class _DisplayAnnotationState extends State<DisplayAnnotation>
    with SampleStateSupport {
  // Create a controller for the map view.
  final _mapViewController = ArcGISMapView.createController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            // Add a map view to the widget tree and set a controller.
            child: ArcGISMapView(
              controllerProvider: () => _mapViewController,
              onMapViewReady: onMapViewReady,
            ),
          ),
        ],
      ),
    );
  }

  void onMapViewReady() {
    // Create a map with a Basemap style and an initial viewpoint.
    final map = ArcGISMap.withBasemapStyle(BasemapStyle.arcGISLightGray);
    map.initialViewpoint = Viewpoint.withLatLongScale(
      latitude: 55.882436,
      longitude: -2.725610,
      scale: 72223.819286,
    );

    // Add a FeatureLayer from the East Lothian Rivers service.
    const riverService =
        'https://services1.arcgis.com/6677msI40mnLuuLr/arcgis/rest/services/East_Lothian_Rivers/FeatureServer/0';
    final featureLayer = FeatureLayer.withFeatureTable(
      ServiceFeatureTable.withUri(Uri.parse(riverService)),
    );
    map.operationalLayers.add(featureLayer);

    // Add an AnnotationLayer from the river annotation service.
    const riverAnnotationService =
        'https://sampleserver6.arcgisonline.com/arcgis/rest/services/RiversAnnotation/FeatureServer/0';
    final annotationLayer =
        AnnotationLayer.withUri(Uri.parse(riverAnnotationService));
    map.operationalLayers.add(annotationLayer);

    // Set the map to the map view.
    _mapViewController.arcGISMap = map;
  }
}