Maps are containers used to manage references to layers and basemaps. Views are used to display the map layers and handle user interactions, popups, widgets, and the map location.
Working with mapsMaps are created from the Map class. Map objects are always passed to a View object. To display maps in 2D, use the MapView class and to display maps in 3D, use the SceneView class.
See Maps (2D) in this guide for more information about working in 2D.
Create a new mapOne way to create a map is to make a new instance of the Map class while specifying a basemap and optionally a collection of layers.
Use dark colors for code blocks Copy
1
2
3
4
5
6
7
8
9
10
11
const myMap = new Map({
// Create a Map object
basemap: "streets-vector",
layers: additionalLayers, // Optionally, add additional layers collection
});
const sceneView = new SceneView({
// The View for the Map object
map: myMap,
container: "mapDiv",
});Learn more about the different types of Layers you can add to a map.
Create a map from a web sceneThe second way to create a map is to load a web map (for 2D maps) or a web scene (for 3D maps).
Web maps and web scenes are JSON structures that contain settings for a map or a scene. This includes settings for the basemap, layers, layer styling, popups, legends, labels, and more. They are typically created interactively with the ArcGIS Online map viewer or the ArcGIS Online scene viewer. ArcGIS Online or ArcGIS Enterprise assigns them a unique ID and stores them as portal items.
The WebMap and WebScene classes can be used to access and load web maps and web scenes by their unique ID. An item's ID can be identified in the URL in the map viewer and scene viewer or in the item page. The default portal is ArcGIS Online and the URL is https://www.arcgis.com. If using ArcGIS Enterprise, the portal URL must be specified.
When the WebMap and WebScene object load a web map and web scene, all of the settings are automatically applied to the Map and Scene. For example, the basemap and layers are set, the layer styles are applied, and the popups are defined for each layer.
Creating web scenes interactively and loading them by unique ID is the fastest way to configure a Scene. Learn how to create and load web scenes in the Create a web scene tutorial.
Use dark colors for code blocks Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
const webScene = new WebScene({
// Define the web scene reference
portalItem: {
id: "3a9976baef9240ab8645ee25c7e9c096",
portal: "https://www.arcgis.com", // Default: The ArcGIS Online Portal
},
});
const view = new SceneView({
// Load the web scene
map: webScene,
container: "viewDiv",
});The primary role of the view is to display layers, popups, and UI widgets, handle user interactions, and to specify which portion of the world the map should be focused on (i.e. the "extent" of the map).
Create a viewThere are separate classes for creating views for maps and scenes: a MapView and SceneView class. A MapView displays a 2D view, and a SceneView displays a 3D view, of a Map object.
For a map to be visible, a view object requires a Map object and a String identifying the id attribute of a div element or a div element reference.
Use dark colors for code blocks Copy
1
2
3
4
5
const sceneView = new SceneView({
// Create SceneView object
map: myMap,
container: "sceneViewDiv",
});When using the SceneView (3D), the position of the observer can by set by defining the properties of the camera property. The view position can also be updated after it is initialized by updating the properties programmatically.
Use dark colors for code blocks Copy
1
2
3
4
5
6
7
8
9
10
11
var view = new SceneView({
camera: {
position: [
-122, // lon
38, // lat
50000, // elevation in meters
],
heading: 95, // direction the camera is looking
tilt: 65, // tilt of the camera relative to the ground
},
});Alternatively, the initial position can be set by set, like for MapView, using center and zoom or scale properties.
Use dark colors for code blocks Copy
1
2
3
4
const view = new SceneView({
center: [-112, 38], // The center of the map as lon/lat
zoom: 13, // Sets the zoom level of detail (LOD) to 13
});Learn how to create 3D views in the Display a scene tutorial.
Animate the view to a new positionThe goTo method of SceneView also changes the location of the view but provides the additional option to transition smoothly. This technique is often used to "fly" from one location to another on the surface or to zoom to results of a search.
The goTo method can accept a Geometry, Graphic, or Viewpoint object. Additional options can control the animation.
Use dark colors for code blocks Copy
1
2
3
4
5
view.goTo(
// go to point with a custom animation duration
{ center: [-114, 39] },
{ duration: 5000 },
);The view is also responsible for handling user interaction and displaying popups. The view provides multiple event handlers for user interactions such as mouse clicks, keyboard input, touch screen interactions, joysticks, and other input devices.
When a user clicks on the map, the default behavior is to show any popups that have been pre-configured in your layers. This behavior can also be approximated manually with the following code by listening for the click event and using the hitTest() method to find features where the user clicked.
Use dark colors for code blocks Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
view.popupEnabled = false; // Disable the default popup behavior
view.on("click", function (event) {
// Listen for the click event
view.hitTest(event).then(function (hitTestResults) {
// Search for features where the user clicked
if (hitTestResults.results) {
view.openPopup({
// open a popup to show some of the results
location: event.mapPoint,
title: "Hit Test Results",
content: hitTestResults.results.length + "Features Found",
});
}
});
});Learn more about about view events and manually configuring popups.
The view is also a container for overlaying widgets and HTML Elements. The view.ui provides a DefaultUI container that is used to display the default widgets for the view. Additional widgets and HTML Elements can also be added to the view by using the view.ui.add method. The code snippet below demonstrates adding widgets that allows users to search for an address or place.
Use dark colors for code blocks Copy
1
2
3
4
5
6
7
8
var searchWidget = new Search({
view: view,
});
// Add the search widget to the top right corner of the view
view.ui.add(searchWidget, {
position: "top-right",
});Learn more about adding widgets to the view.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4