Overview

You will learn: how to create geometries and graphics from coordinates and add them to a map.

With the ArcGIS Runtime SDK for Java it's easy to add Graphics to a GraphicsOverlay and display them to the MapView. Graphics are in-memory objects that represent geographic elements. They have a Geometry, a Symbol, and optionally some attributes. They can be created interactively by listening to mouse or touch events, or manually by providing the map coordinates.

In this lab, you will build a simple app that creates point, line, and polygon graphics and then displays them using a graphics overlay. The graphics will be created directly from latitude and longitude coordinates.

Before you begin

Reuse the starter project

If you have not done the starter project lab, be sure to review it first so you are familiar with running the app.

In a new or empty folder, make a copy of the Create a starter app solution.

Steps

Update the project

  1. Open the settings.gradle file in an editor of your choice and change the rootProject.name value to display-point-line-and-polygon-graphics.

Imports and variable declarations

  1. Open the App.java file in src/main/java/com/arcgis/developers/labs. Then add the following with the existing imports.

    import com.esri.arcgisruntime.geometry.Point;
    import com.esri.arcgisruntime.geometry.PointCollection;
    import com.esri.arcgisruntime.geometry.Polygon;
    import com.esri.arcgisruntime.geometry.Polyline;
    import com.esri.arcgisruntime.geometry.SpatialReferences;
    import com.esri.arcgisruntime.mapping.view.Graphic;
    import com.esri.arcgisruntime.mapping.view.GraphicsOverlay;
    import com.esri.arcgisruntime.symbology.SimpleFillSymbol;
    import com.esri.arcgisruntime.symbology.SimpleLineSymbol;
    import com.esri.arcgisruntime.symbology.SimpleMarkerSymbol;
    import com.esri.arcgisruntime.mapping.Viewpoint;
    
  2. Add new private fields for colors and graphics overlay.

      /* ** ADD ** */
      private int hexRed = 0xFFFF0000;
      private int hexBlue = 0xFF00FF00;
      private int hexGreen = 0xFF0000FF;
    
      private GraphicsOverlay graphicsOverlay;
      /* ** ADD ** */
      private MapView mapView;
    

Add graphics overlay to a map view

  1. Add a new private method setupGraphicsOverlay that creates a graphics overlay and attaches it to the map view to register the graphics to the map. Each graphic must have a symbol assigned in order to be visible on the map.

    private void setupGraphicsOverlay() {
      if (mapView != null) {
        graphicsOverlay = new GraphicsOverlay();
        mapView.getGraphicsOverlays().add(graphicsOverlay);
      }
    }
    
  2. Make a call to the method just created.

    setupMap();
    
    /* ** ADD ** */
    setupGraphicsOverlay();
    

Add a point graphic

  1. Add a new private method addPointGraphic that creates a graphic using a simple marker symbol, with an outline, and a point. Add this graphic to the graphics overlay.

    private void addPointGraphic() {
      if (graphicsOverlay != null) {
        SimpleMarkerSymbol pointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.Style.CIRCLE, hexRed, 10.0f);
        pointSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.Style.SOLID, hexBlue, 2.0f));
        Point point = new Point(-118.29507, 34.13501, SpatialReferences.getWgs84());
        Graphic pointGraphic = new Graphic(point, pointSymbol);
        graphicsOverlay.getGraphics().add(pointGraphic);
      }
    }
    
  2. Make a call to the method just created.

    setupGraphicsOverlay();
    /* ** ADD ** */
    addPointGraphic();
    
  3. Run the app and you should see the red point graphic in the Los Angeles area.

Add a line graphic

  1. Add a new private method addPolylineGraphic that creates a graphic using line geometry and line symbol. Add this graphic to the graphics overlay.

    private void addPolylineGraphic() {
      if (graphicsOverlay != null) {
        PointCollection polylinePoints = new PointCollection(SpatialReferences.getWgs84());
        polylinePoints.add(new Point(-118.29026, 34.1816));
        polylinePoints.add(new Point(-118.26451, 34.09664));
        Polyline polyline = new Polyline(polylinePoints);
        SimpleLineSymbol polylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.Style.SOLID, hexBlue, 3.0f);
        Graphic polylineGraphic = new Graphic(polyline, polylineSymbol);
        graphicsOverlay.getGraphics().add(polylineGraphic);
      }
    }
    
  2. Make a call to the method just created.

    setupGraphicsOverlay();
    addPointGraphic();
    /* ** ADD ** */
    addPolylineGraphic();
    
  3. Run the app again and you should also see the green line graphic in the Los Angeles area.

Add a polygon graphic

  1. Add a private method that creates a graphic using a polygon geometry and fill symbol. Add graphic to the graphics overlay.

    private void addPolygonGraphic() {
      if (graphicsOverlay != null) {
        PointCollection polygonPoints = new PointCollection(SpatialReferences.getWgs84());
        polygonPoints.add(new Point(-118.27653, 34.15121));
        polygonPoints.add(new Point(-118.24460, 34.15462));
        polygonPoints.add(new Point(-118.22915, 34.14439));
        polygonPoints.add(new Point(-118.23327, 34.12279));
        polygonPoints.add(new Point(-118.25318, 34.10972));
        polygonPoints.add(new Point(-118.26486, 34.11625));
        polygonPoints.add(new Point(-118.27653, 34.15121));
        Polygon polygon = new Polygon(polygonPoints);
        SimpleFillSymbol polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.Style.SOLID, hexGreen,
          new SimpleLineSymbol(SimpleLineSymbol.Style.SOLID, hexBlue, 2.0f));
        Graphic polygonGraphic = new Graphic(polygon, polygonSymbol);
        graphicsOverlay.getGraphics().add(polygonGraphic);
      }
    }
    
  2. Make a call to the method just created.

    setupGraphicsOverlay();
    addPointGraphic();
    addPolylineGraphic();
    /* ** ADD ** */
    addPolygonGraphic();
    
  3. Run the app again and you should also see the blue polygon graphic in the Los Angeles area.

Congratulations, you're done!

Your map should show Griffith Park in Los Angeles with three graphics (a point, a line, and a polygon) over a vector basemap.

Challenge

Add graphics with different symbols and styles

  1. Add a composite symbol: Composite symbols are simply a combination of two or more symbols. Change the polygon graphic in the lab to use a composite symbol.
  2. Add a text symbol: Text symbols are used to display text for graphics and features. Add text symbols for the line graphic used in the lab.
  3. Change the marker symbol: Use a different shape (for example a square) for the SimpleMarkerSymbol used in the lab using the available styles, and also try rotating it using the properties defined on MarkerSymbol.

Add multiple graphics overlays

Instead of using a single graphics overlay for points, lines, and polygons, create a graphics overlay for each graphic and add them to map view.