Link Search Menu Expand Document

ArcGIS API for JavaScript

The Esri ArcGIS API for JavaScript natively supports adding our GIS layers to a map with the FeatureLayer layer type.


In this example, we will add the service, Oregon 500-yr Flood Zones, to a web map using the latest version of the ArcGIS API for JavaScript.

To get started, create a file called index.html.


  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>500 Year Flood Zones</title>

  <link rel="stylesheet" href="" />
  <script src=""></script>

    #myMap {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;

  <div id="myMap"></div>
  <script src="./main.js"></script>


In the index.html file, we:

  1. Include th CSS and JavaScript files for the ArcGIS API for JavaScript from the cdn
  2. Create the <div> with an ID of myMap and set it’s height and width to fill up the entire window.
  3. Include our own JavaScript file main.js -> <script src="./main.js"></script>

Next, we need to actually create the main.js file for our site.

], function (Map, MapView, FeatureLayer) {
  var map = new Map({
    basemap: "hybrid"

  var view = new MapView({
    container: "myMap",
    map: map,
    center: [-123.018723,44.925675],
    zoom: 12

  var featureLayer = new FeatureLayer({
    url: ""


In the main.js file, we:

  1. Include the relevant modules (esri/map, esri/views/MapView, esri/layers/FeatureLayer) using the AMD format.
  2. Instantiate our map and view.
  3. Instantiate a new feature layer, providing the url to the 500-yr flood zone service.
  4. Add the layer to our map.