ArcGIS API for JavaScript

Migrating Web Apps from Google to ArcGIS: Adding a Shape

This is the fourth post in a blog series covering the basic topics related to migrating your app built with the Google Maps JavaScript API to the ArcGIS API for JavaScript (JavaScript API). The series covers the following topics:

In this post, we’ll do an overview on adding a shape to the map.

Getting started

To get started with ArcGIS, sign up for the ArcGIS Developer Program at no cost. This account will get you access to the JavaScript API, 1,000,000 basemaps and geosearch (e.g. interactive find and zoom) transactions per month, access to a wide selection of rich content and services hosted in ArcGIS Online, unlimited non-revenue generating apps deployed, and quite a bit more for free. More information can be found in the first blog of this series.

Create a basic mapping app

Check out the Getting Started blog for an overview on how to load the JavaScript API and create a map.

Adding a polyline

Shapes such as polylines, polygons, and circles are defined by their geometry and either a default symbol or custom symbol. Optionally, you can assign attribute information to each shape and attach a popup that displays the attributes. In this overview, we will simply add a polyline to the map without attributes.

To add a polyline to the map with Google you create an array of two or more latitude and longitude coordinates which define a series of line segments, or path, passing through each coordinate in the order they are listed. The polyline is then added to the map.

const map = new google.maps.Map(document.getElementById('map'), {
  zoom: 3,
  center: {lat: 21.4691, lng: -78.6569}
});

const polylineCoordinates = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}

];
const polyline = new google.maps.Polyline({
  path: polylineCoordinates
});

polyline.setMap(map);

To create a polyline in the ArcGIS API for JavaScript the pattern is similar. The geometry of a polyline consists of an array of two or more latitude and longitude coordinates which defines the polyline path. To display a polyline on the map, create a graphic with the polyline geometry, set a simple line symbol on the graphic, then add it to a graphics layer.

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/GraphicsLayer"

], function(
  Map, MapView, GraphicsLayer
) {

  const graphicsLayer = new GraphicsLayer();

  const map = new Map({
    basemap: "streets-vector",
    layers: [graphicsLayer]
  });

  const view = new MapView({
    center: {latitude: 21.4691, longitude: -78.6569},
    container: "viewDiv",
    map: map,
    zoom: 3
  });

  const polylineGraphic = {
    geometry: {
      type: "polyline",
      paths: [
        [-80.190, 25.774],
        [-66.118, 18.466],
        [-64.757, 32.321]]
    },
    symbol: {
      type: "simple-line"
    }
  };

  graphicsLayer.add(polylineGraphic);
});

For a step-by-step tutorial on creating a shape, assigning attributes, and attaching a popup, check out this DevLab.

Interactively draw a shape

An alternative to predefining a shape in code is to allow the end user to interactively draw a shape using the sketch tool. To do this, initialize an instance of the sketch tool and listen for the create-complete event. In your event handler, create a new graphic using the polyline geometry and add it to a graphics layer:

require([
  "esri/views/MapView",
  "esri/Map",
  "esri/widgets/Sketch/SketchViewModel",
  "esri/layers/GraphicsLayer",
], function(
  MapView, Map,
  SketchViewModel, GraphicsLayer
) {

  // GraphicsLayer to hold graphics created via sketch view model
  const graphicsLayer = new GraphicsLayer();

  const map = new Map({
    basemap: "streets-vector",
    layers: [graphicsLayer]
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 3
  });

  view.when(function() {
    const sketchViewModel = new SketchViewModel({
      view: view,
      layer: graphicsLayer
    });

    sketchViewModel.on("create-complete", function(event){
      graphicsLayer.add({
        geometry: event.geometry,
        symbol: sketchViewModel.graphic.symbol
      });
    });

    sketchViewModel.create("polyline");

  });
});

The sketch tool can be used to create a variety of geometry types. If you’d like to see it in action, check out the sketch temporary geometries sample.

Next Steps & more resources

There are a variety of resources for learning about the ArcGIS API for JavaScript and maximizing your productivity when building your web apps:

About

Julie Powell is a Technical Product Manager, with her primary focus on the ArcGIS API for JavaScript. She interfaces with a wide user community to maintain awareness and insight into GIS community needs, meanwhile contributing feedback to development teams in order to help ensure users can be successful in building state of the art, purposeful solutions using ArcGIS software. Julie presents GIS technology trends and innovative solutions at the Esri Developer Summit, Esri International User Conference, Esri Latin American User Conference, and other regional conferences. Julie brings seventeen years of experience working with global leaders such as Hewlett-Packard and Esri, delivering a variety of software solutions for both the enterprise and consumer markets. Julie has worked on a wide range of projects and consulting endeavors, including serving as technical lead for web mapping solutions for strategic customers.

About

I spend a ton of time outdoors and when not on a mountain somewhere I'm a Technical Product Manager for the ArcGIS API for JavaScript. I also work on 3rd party frameworks and mobile.

Next Article

Personalize your maps with vector basemaps webinar

Read this article