Show a simple marker symbol on a map.

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
- Create a
SimpleMarkerSymbol. - Create a
Graphicpassing in aArcGISPointand the simple marker symbol as parameters. - 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
//// 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/common/common.dart';import 'package:flutter/material.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(color: Colors.red, size: 10);
// 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); }}