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
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
//
// 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.