Overview

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

With the ArcGIS Runtime SDK for Android it's easy to add graphics to a graphics overlay and display them on a map. Graphics are in-memory objects that represent geographic features. 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 graphic overlay. The graphics will be created directly from latitude and longitude coordinates.

Before you begin

Make sure you have installed the latest version of Android Studio.

Reuse the starter project

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

  • Open the new Android project in Android Studio.

  • Run the project and verify the project builds and the map displays in the device simulator.

  • You may be required to sync the project dependencies.

Steps

Add a graphics overlay to the map view

  1. In the file app > java > {your.package.name} > MainActivity.java, create a new member variable to hold a reference to the graphics overlay. You will use this graphics overlay as a container to display points, lines, and polygons on the map.

    private GraphicsOverlay mGraphicsOverlay;
    
  2. Create a new member function named createGraphicsOverlay. In it, create a GraphicsOverlay object, assign it to the member variable, and add it to the map view.

    private void createGraphicsOverlay() {
        mGraphicsOverlay = new GraphicsOverlay();
        mMapView.getGraphicsOverlays().add(mGraphicsOverlay);
    }
    

Add a point graphic

  1. Add a point graphic to the graphics overlay. Create a new member function named createPointGraphics. Inside the new function, create a point geometry and marker symbol and then assign these to the graphic. Then add the graphic to the graphics overlay. Add the following code after you added the graphics overlay to the collection of overlays in the map view.

     private void createPointGraphics() {
         Point point = new Point(-118.69333917997633, 34.032793670122885, SpatialReferences.getWgs84());
         SimpleMarkerSymbol pointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.Style.CIRCLE, Color.rgb(226, 119, 40), 10.0f);
         pointSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.Style.SOLID, Color.BLUE, 2.0f));
         Graphic pointGraphic = new Graphic(point, pointSymbol);
         mGraphicsOverlay.getGraphics().add(pointGraphic);
     }
    

Add a line graphic

  1. To a line graphic to the map, create a new member function named createPolylineGraphics. Inside the new function, create a line geometry from a collection of points and line symbol and then assign these to a new graphic. Add the graphic to the graphics overlay.

     private void createPolylineGraphics() {
         PointCollection polylinePoints = new PointCollection(SpatialReferences.getWgs84());
         polylinePoints.add(new Point(-118.67999016098526, 34.035828839974684));
         polylinePoints.add(new Point(-118.65702911071331, 34.07649252525452));
         Polyline polyline = new Polyline(polylinePoints);
         SimpleLineSymbol polylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.Style.SOLID, Color.BLUE, 3.0f);
         Graphic polylineGraphic = new Graphic(polyline, polylineSymbol);
         mGraphicsOverlay.getGraphics().add(polylineGraphic);
     }
    

Add a polygon graphic

  1. Add a polygon graphic. Create a new member function named createPolygonGraphics. Inside the new function, create a polygon geometry from a collection of points and fill symbol and then assign these to a polygon graphic. Add the graphic to the graphics overlay.

     private void createPolygonGraphics() {
         PointCollection polygonPoints = new PointCollection(SpatialReferences.getWgs84());
         polygonPoints.add(new Point(-118.70372100524446, 34.03519536420519));
         polygonPoints.add(new Point(-118.71766916267414, 34.03505116445459));
         polygonPoints.add(new Point(-118.71923322580597, 34.04919407570509));
         polygonPoints.add(new Point(-118.71631129436038, 34.04915962906471));
         polygonPoints.add(new Point(-118.71526020370266, 34.059921300916244));
         polygonPoints.add(new Point(-118.71153226844807, 34.06035488360282));
         polygonPoints.add(new Point(-118.70803735010169, 34.05014385296186));
         polygonPoints.add(new Point(-118.69877903513455, 34.045182336992816));
         polygonPoints.add(new Point(-118.6979656552508, 34.040267760924316));
         polygonPoints.add(new Point(-118.70259112469694, 34.038800278306674));
         polygonPoints.add(new Point(-118.70372100524446, 34.03519536420519));
         Polygon polygon = new Polygon(polygonPoints);
         SimpleFillSymbol polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.Style.SOLID, Color.rgb(226, 119, 40),
                 new SimpleLineSymbol(SimpleLineSymbol.Style.SOLID, Color.BLUE, 2.0f));
         Graphic polygonGraphic = new Graphic(polygon, polygonSymbol);
         mGraphicsOverlay.getGraphics().add(polygonGraphic);
     }
    

Put it all together

  1. Create a new member function to assemble your new graphics by first creating the graphics overlay and then calling each create graphics function.

    private void createGraphics() {
        createGraphicsOverlay()
        createPointGraphics()
        createPolylineGraphics()
        createPolygonGraphics()
    }
    
  2. Update onCreate() to call the new createGraphics() function after setupMap().

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mMapView = findViewById(R.id.mapView);
        setupMap();
    
        // ** ADD **
        createGraphics();
    }
    
  3. Press Control-R to run the app in the simulator. You should see the polygon graphic outline Pepperdine University campus, a point on Malibu beach, and a line segment running from the beach to the mountains.

Congratulations, you're done!

Verify your project runs and displays three separate graphics on the map. Compare your solution with our completed solution project.

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 three of them and add them to map view.