Overview

You will learn: how to create graphics from latitude and longitude coordinates.

With the ArcGIS API for JavaScript it's easy to add graphics to the view that represent geographic features. Graphics always live in their own container (layer) and are commonly positioned on top of all of the other layers. They have a single geometry type (point, line or polygon) and a unique symbol style. Graphics can be created interactively by listening mouse or touch events or manually by providing the map coordinates.

In this lab, you will build a simple app that adds a point, line and polygon feature and then adds them to the graphics layer in the view. The shapes will be created directly from latitude and longitude coordinates.

Steps

Create an HTML page

  1. Go to JSBin and create a new bin.

  2. Add the following code to create a basic starter app.

    <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>DevLabs - Create Graphics</title>
        <style>
          html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
          }
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
        <script src="https://js.arcgis.com/4.6/"></script>
        <script>
          require([
              "esri/Map",
              "esri/views/MapView",
              "dojo/domReady!"
            ], function(Map, MapView) {
    
            var map = new Map({
              basemap: "streets-night-vector"
            });
    
            var view = new MapView({
              container: "viewDiv",
              map: map,
              center: [-118.27928,34.13558],
              zoom: 10
            });
          });
        </script>
      </head>
      <body>
        <div id="viewDiv"></div>
      </body>
    </html>
    

Add a point graphic

  1. In the JS code, add modules and code to create a point geometry and marker symbol and then assign these to the graphic. Add the graphic to the view graphics.

    require([
      "esri/Map",
      "esri/views/MapView",
      //*** ADD ***//
      "esri/Graphic",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol",
      "dojo/domReady!"
    ], function(Map, MapView,
          //*** ADD ***//
          Graphic, Point, SimpleMarkerSymbol
    ) {
    
    ...
    
      //*** ADD ***//
    
      // Create a point
      var point = new Point({
        longitude: -118.29507,
        latitude: 34.13501
      });
    
      // Create a symbol for drawing the point
      var markerSymbol = new SimpleMarkerSymbol({
        color: [226, 119, 40],
        outline: {
          color: [255, 255, 255],
          width: 1
        }
      });
    
      // Create a graphic and add the geometry and symbol to it
      var pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol
      });
    
      // Add the graphic to the view
      view.graphics.add(pointGraphic);
    
    
  2. Run the app and you should see a point graphic in Griffith Park.

Add a line graphic

  1. In the JS code, add modules and code to create a line geometry and line symbol and then assign these to the graphic. Add the graphic to the view graphics.

    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol",
      //*** ADD ***//
      "esri/geometry/Polyline",
      "esri/symbols/SimpleLineSymbol",
      "dojo/domReady!"
    ], function(Map, MapView,
          Graphic, Point, SimpleMarkerSymbol,
          //*** ADD ***//
          Polyline, SimpleLineSymbol
    ) {
    
      ...
    
      //*** ADD ***//
    
      // Create a line geometry
      var polyline = new Polyline({
        paths: [
          [-118.29026, 34.1816],
          [-118.26451, 34.09664]
        ]
      });
    
      // Create a symbol for drawing the line
      var lineSymbol = new SimpleLineSymbol({
        color: [226, 119, 40],
        width: 4
      });
    
      // Create a line graphic
      var polylineGraphic = new Graphic({
        geometry: polyline,
        symbol: lineSymbol
      })
    
      // Add the graphic to the view
      view.graphics.add(polylineGraphic);
    
    
  2. Run the app and you should see the line graphic next to Griffith Park.

  3. In the JS code, add modules and code to create a polygon geometry and fill symbol and then assign these to the graphic. Add the graphic to the view graphics.

    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/geometry/Polyline",
      "esri/symbols/SimpleLineSymbol",
      //*** ADD ***//
      "esri/geometry/Polygon",
      "esri/symbols/SimpleFillSymbol",
      "dojo/domReady!"
    ], function(Map, MapView,
          Graphic, Point, SimpleMarkerSymbol,
          Polyline, SimpleLineSymbol
          //*** ADD ***//
          Polygon, SimpleFillSymbol
    ) {
    
      ...
    
      //*** ADD ***//
    
      // Create a polygon geometry
      var polygon = new Polygon({
        rings: [
          [-118.27653, 34.15121],
          [-118.2446, 34.15462],
          [-118.22915, 34.14439],
          [-118.23327, 34.12279],
          [-118.25318, 34.10972],
          [-118.26486, 34.11625],
          [-118.27653, 34.15121]
        ]
      });
    
      // Create a symbol for rendering the graphic
      var fillSymbol = new SimpleFillSymbol({
        color: [227, 139, 79, 0.8],
        outline: {
          color: [255, 255, 255],
          width: 1
        }
      });
    
      // Add the geometry and symbol to a new graphic
      var polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: fillSymbol
      });
    
      // Add the graphic to the view
      view.graphics.add(polygonGraphic);
    
    
  4. Run the app and you should see the polygon graphic next to Griffith Park.

Congratulations, you're done!

Your app should look something like this.

Challenge

Show a pop-up

Graphics can also show pop-ups when users click on them if they have attributes and a pop-up template. Try adding the following code to show a pop-up for the point graphic. Feel free to apply similar code to the other graphics.

...

//*** ADD ***//

// Create attributes
var attributes = {
  Name: "I am a point",
  Park: "Griffith Park",
  City: "Los Angeles"
};

// Create pop-up template
var popupTemplate = {
  title: "{Name}",
  content: "I am located in <b>{Park}</b> in the city of <b>{City}</b>."
};

// Create a graphic and add the geometry and symbol to it
var pointGraphic = new Graphic({
  geometry: point,
  symbol: markerSymbol,
  //*** ADD ***//
  attributes: attributes,
  popupTemplate: popupTemplate
});