Style point with simple marker symbol

View on GitHub

Show a simple marker symbol on a map.

Image of style point with simple marker symbol

Use case

Customize the appearance of a point suitable for the data. For example, a point on the map styled with a circle could represent a drilled borehole location, whereas a cross could represent the location of an old coal mine shaft.

How to use the sample

The sample loads with a predefined simple marker symbol, set as a red circle.

How it works

  1. Create a SimpleMarkerSymbol.
  2. Create a Graphic passing in a ArcGISPoint and the simple marker symbol as parameters.
  3. Add the graphic to the graphics overlay with graphicsOverlay.graphics.add(graphic).

Relevant API

  • ArcGISPoint
  • Graphic
  • GraphicsOverlay
  • SimpleMarkerSymbol

Tags

symbol

Sample Code

style_point_with_simple_marker_symbol.dart
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
//
// 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 StylePointWithSimpleMarkerSymbol extends StatefulWidget {
  const StylePointWithSimpleMarkerSymbol({super.key});

  @override
  State<StylePointWithSimpleMarkerSymbol> createState() =>
      _StylePointWithSimpleMarkerSymbolState();
}

class _StylePointWithSimpleMarkerSymbolState
    extends State<StylePointWithSimpleMarkerSymbol> with SampleStateSupport {
  // Create a controller for the map view.
  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() {
    // Create a map with a basemap style.
    final map = ArcGISMap.withBasemapStyle(BasemapStyle.arcGISImageryStandard);

    // Create a point using x and y coordinates.
    final point = ArcGISPoint(
      x: -226773,
      y: 6550477,
      spatialReference: SpatialReference.webMercator,
    );

    // Set the initial viewpoint of the map to the point and provide a scale.
    map.initialViewpoint = Viewpoint.fromCenter(point, scale: 7500);

    // Set the map to the mapview controller.
    _mapViewController.arcGISMap = map;

    // Create a graphics overlay and add it to the mapview controller.
    final graphicsOverlay = GraphicsOverlay();
    _mapViewController.graphicsOverlays.add(graphicsOverlay);

    // Create a simple marker symbol with a style, color and size.
    final simpleMarkerSymbol = SimpleMarkerSymbol(
      style: SimpleMarkerSymbolStyle.circle,
      color: Colors.red,
      size: 10.0,
    );

    // Create a graphic using the point and simple marker symbol.
    final graphic = Graphic(geometry: point, symbol: simpleMarkerSymbol);

    // Add the graphic to the graphics overlay.
    graphicsOverlay.graphics.add(graphic);
  }
}

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close