You can use graphics
Graphics and graphics overlays allow you to do things like:
- Show updated locations for objects in the map view, such as moving vehicles.
- Display results from an analysis
Analysis is a systematic examination of a problem that provides new information. , geocodingGeocoding is the process of converting text for an address or place to a complete address with a location. , or routingA route is a polyline that defines the best path between two or more points in a street network. operation. - Allow the user to draw temporary sketches on top of the map.
- Store user input, such as a set of route stops
A stop is a single point along a route: it can be the origin, an intermediate stop, or destination. to visit. - Show ad hoc text labels to describe things on the map.
How graphics work
A map view has a graphics overlay collection that may contain zero or more graphics overlays
Graphics in map views and scene views
The pattern for working with graphics is the same whether in a map view
For more information about working with graphics in 3D, see Add graphics to a scene view.
Graphics overlays
A GraphicsOverlay is a container for temporary graphics
The following code shows how to create a new graphics overlay and add it to your map view.
// Create a graphics overlay.graphicsOverlay = new GraphicsOverlay();
// Add graphics overlay to the geo view (MapView or SceneView).geoView.getGraphicsOverlays().add(graphicsOverlay);Unlike a feature layer
For more information and a description of when to use each, see the Features and graphics topic.
Graphics
Graphics are created at run time and only persist for as long as the app is running. You can create them to show geocode
A Graphic uses the following to represent an object on the map view:
- Geometry: a point, line, or polygon that represents the object’s location and shape.
- Attributes: a collection of one or more pairs of fields and values that describe the object.
- Symbol: an object that controls the visual representation of the graphic’s geometry on the display.
Draw order (z-index)
A graphic’s z-index defines the draw order of that graphic within its graphics overlay. It is primarily intended for use when working with graphics in a 2D map view.
If the z-index is not set, the graphics will render in the order in which they were added to the graphics overlay
Work with graphics
Because they are both geoelements
Add a graphics overlay and a graphic
The following example shows how to create a graphics overlay
-
Create a new
GraphicsOverlay. -
Create a
Geometryto define the graphic’s shape and geographic location. -
Create a symbol
A symbol defines the properties used to display a geometry or text. to display the graphic.- You can also do this by defining a
Rendererfor the graphics overlayA graphics overlay is a client-side, temporary container of graphics to display on a map view or scene view. . See Styles and data visualization for more information about symbolizing geoelementsA geoelement refers to any geographic element in a map or map view that can be identified by its location to return attribute information. .
- You can also do this by defining a
-
Create a new
Graphicusing the geometry and symbol.- Optionally, you can define a set of attributes
Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. for the graphicA graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. .
- Optionally, you can define a set of attributes
-
Add the graphic to the graphics overlay.
-
Add the graphics overlay to the map view.
// Create a graphics overlay.graphicsOverlay = new GraphicsOverlay();
// Create a map point for the Santa Monica pier.Point pierPoint = new Point(-118.4978, 34.0086, SpatialReferences.getWgs84());
// Create a red circle simple marker symbol.SimpleMarkerSymbol redCircleSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.Style.CIRCLE, Color.RED, 10);
// Create a graphic from the point and symbol.Graphic pierGraphic = new Graphic(pierPoint, redCircleSymbol);
// Add the graphic to the graphics overlay.graphicsOverlay.getGraphics().add(pierGraphic);
// Add graphics overlay to the geo view (MapView or SceneView).geoView.getGraphicsOverlays().add(graphicsOverlay);Symbolize
A comprehensive API for creating and modifying symbols
There are two ways to symbolize a graphic
- Apply a symbol directly to the graphic. Graphics expose a symbol property that you can use to define the symbol.
- Apply a renderer to the graphics overlay. A renderer
A renderer is a collection of rules and symbols used to display the data in a layer. is a collection of one or more symbols that are applied to all graphics in the graphics overlay. A renderer allows you to do things like control symbology based on attributeAttributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. values.
If you define a renderer for a graphics overlay, you do not need to assign symbols to the individual graphics it contains. Assigning a symbol directly to a graphic overrides the symbology defined by the renderer of the graphics overlay.
Display text
To display text on the map view as a graphic, create a graphic with a point, line, or polygon to define the location for your text. You can then provide a TextSymbol that defines the font, color, size, and text to display.
// Create text symbol.TextSymbol pierTextSymbol = new TextSymbol(10, "Santa Monica Pier", Color.BLUE, TextSymbol.HorizontalAlignment.LEFT, TextSymbol.VerticalAlignment.BOTTOM);
// Create a text graphic from the previous pier point defined earlier and text symbol.Graphic pierTextGraphic = new Graphic(pierPoint, pierTextSymbol);Identify
A graphic can contain descriptive information in the form of attributes
The following example shows how you can identify a graphics overlay in response to a tap on the map view.
// Identify a limited number of graphics in the specified graphics overlay, at the given screen point.final ListenableFuture<IdentifyGraphicsOverlayResult> identifyFuture = geoView.identifyGraphicsOverlayAsync(graphicsOverlay, screenPoint, 10, false, 10);
identifyFuture.addDoneListener(new Runnable() { @Override public void run() { try { // Get the list of graphics returned by identify. List<Graphic> identifiedGraphics = identifyFuture.get().getGraphics();
// Iterate the graphics. for (Graphic graphic : identifiedGraphics) { // Use identified graphics as required, for example access attributes or // geometry, select, build a table, and so on. graphic.setSelected(true); }
} catch (InterruptedException | ExecutionException ex) { dealWithException(ex); } }});Select
Select graphics to highlight them on the display. You can select zero, one, or several graphics in a graphics overlay. Each graphic’s selection state is represented with an isSelected() property that is either true or false.
Use setSelected(true) to select a graphic in the view.
// Iterate the graphics. for (Graphic graphic : identifiedGraphics) { // Use identified graphics as required, for example access attributes or // geometry, select, build a table, and so on. graphic.setSelected(true); }Move graphics
To move a graphic, you only need to update its geometry. This is much more efficient than creating a new graphic and replacing the existing one. Updating a graphic’s geometry will cause it to immediately display at the new location. Use this technique to animate the display of moving geoelements
The following example moves a selected graphic to the location specified by the user.
// Enable dragging of the identified graphic to move its location.mapView.setOnMouseDragged(event -> { if (identifiedGraphic.isSelected() && identifiedGraphic != null) { // Create a point from the dragged location. geoViewPoint = new Point2D(event.getX(), event.getY());
// Converts a JavaFX local coordinate to a location in map coordinates. Point mapPoint = mapView.screenToLocation(geoViewPoint);
// Update the location of the graphic to the dragged location. identifiedGraphic.setGeometry(mapPoint); }});