Get started with MapView - Create a 2D map

Loading sample here...

This tutorial will walk you through how to create a simple map in a 2D MapView.

1. Reference the ArcGIS API for JavaScript

First, set up a basic HTML document similar to the following example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Get started with MapView - Create a 2D map</title>
</head>
</html>

Inside the <head> tags, reference the ArcGIS API for JavaScript using <script> and <link> tags:

<link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
<script src="https://js.arcgis.com/4.4/"></script>

The <script> tag loads the ArcGIS API for JavaScript from a CDN. When new versions of the API are released, update the version number to match the newly released version.

The <link> tag references the main.css style sheet which contains styles specific to Esri widgets and components.

2. Load the modules

Use a second <script> tag to load specific modules from the API. Load the following modules using the syntax in the snippet below:

esri/Map - loads code specific to creating a map
esri/views/MapView - loads code that allows for viewing the map in 2D
dojo/domReady! - ensures the DOM is available before executing code.

In addition to dojo/domReady! (the bang or exclamation point denotes that domReady is an AMD loader plug-in), Dojo also provides dojo/ready. The difference between domReady! and ready is that the former waits to fire the callback provided to require until the DOM is available while the latter waits for the DOM to be ready and waits for all outstanding require calls to finish. For more information, see the Dojo documentation for dojo/ready. In simple cases, dojo/domReady! should be used. If an app uses parseOnLoad: true, Dojo Dijits, widgets from the Esri library, or custom dijits, dojo/ready should be used.

<script>
require([
  "esri/Map",
  "esri/views/MapView",
  "dojo/domReady!"
], function(Map, MapView) {
  // Code to create the map and view will go here
});
</script>

Putting JavaScript inside a script tag is useful when building simple pages or experimenting, but not suitable for larger applications. When building a larger application, all JavaScript should be in separate .js files.

The global require() function (provided by Dojo) is used to load modules. Esri's JavaScript API is built on top of Dojo to take advantage of Dojo's modularized code base and its ability to reconcile cross-browser differences. For more information on the relationship between Dojo and the JavaScript API, see Working with Dojo and Why Dojo.

3. Create the map

A new map is created using Map, which is a reference to the Map class that was loaded from the esri/Map module. You can specify map properties, such as basemap, by passing an object to the Map constructor.

require([
  "esri/Map",
  "esri/views/MapView",
  "dojo/domReady!"
], function(Map, MapView) {
  var map = new Map({
    basemap: "streets"
  });
});

Additional basemap options are: satellite, hybrid, topo, gray, dark-gray, oceans, osm, national-geographic. Use alternate basemaps by modifying the basemap option in the sandbox. View the Map class for more details on additional map options.

4. Create a 2D view

Views reference nodes that serve as containers in HTML files, allowing users to view the map inside an HTML page. Create a new MapView and set its properties by passing an object to its constructor:

require([
  "esri/Map",
  "esri/views/MapView",
  "dojo/domReady!"
], function(Map, MapView) {
  var map = new Map({
    basemap: "streets"
  });

  var view = new MapView({
    container: "viewDiv",  // Reference to the DOM node that will contain the view
    map: map               // References the map object created in step 3
  });
});

In this snippet, we set the container property to the name of the DOM node that will hold the map. The map property references the map object we created in the previous step. See the MapView documentation for additional properties you may set on the view, including center and zoom, which may be used to define the initial extent of the view.

There are two types of views available: MapView (used for viewing 2D maps) and SceneView (used for viewing 3D maps). Click here to learn more about creating maps with 3D views.

5. Define the page content

Now the JavaScript needed to create a map and a view is complete! The next step is to add the associated HTML for viewing the map. For this example, the HTML is very simple: add a <body> tag, which defines what is visible in the browser, and a single <div> element inside the body where the view will be created.

<body>
  <div id="viewDiv"></div>
</body>

The <div> has an id of "viewDiv" to match the id that is passed to the MapView's container property in the constructor.

6. Style the page

Style the content of the page using <style> tags inside the <head>. To make the map fill the browser window, add the following CSS inside the page's <style>:

<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>

You've now built your first web application in 2D using the ArcGIS API for JavaScript 4.0! Your final HTML code should look like the following:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Get started with MapView - Create a 2D map</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
<script src="https://js.arcgis.com/4.4/"></script>
<script>
require([
  "esri/Map",
  "esri/views/MapView",
  "dojo/domReady!"
], function(Map, MapView){
  var map = new Map({
    basemap: "streets"
  });
  var view = new MapView({
    container: "viewDiv",  // Reference to the scene div created in step 5
    map: map,  // Reference to the map object created before the scene
    zoom: 4,  // Sets zoom level based on level of detail (LOD)
    center: [15, 65]  // Sets center point of view using longitude,latitude
  });
});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Sample search results

Title	Sample

There were no match results from your search criteria.