Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how to display information in an InfoWindow when a user clicks the map. The InfoWindow is a dijit (Dojo widget) included in the ArcGIS JavaScript API for the purpose of presenting users with information in a dismissable window. The InfoWindow can contain text, charts, pictures, or anything that can be represented through HTML. This sample displays the map and screen coordinates of the mouse click in the InfoWindow.
Notice that once the map is created, the InfoWindow properties are immediately available. For example, this line explicitly sets the size of the InfoWindow:
map.infoWindow.resize(195, 75);You can choose what kinds of actions will display the InfoWindow. In this sample, a map click displays the InfoWindow. This is possible because of the listener that is added for the onClick event:
dojo.connect(map, "onClick", addPoint);The above line calls the function addPoint whenever the map is clicked. The function uses the setTitle and setContent methods to specify what is going to appear in the window. Notice that the evt argument passed to the addPoint function contains both map and screen coordinates. This is important because the InfoWindow needs to be anchored (pointed) at a screen coordinate. Hence the line of code used to show the InfoWindow passes evt.screenPoint as an argument:
map.infoWindow.show(evt.screenPoint);Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Non graphic info window</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
html, body, #map{
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
var map;
require([
"esri/map",
"dojo/domReady!"
], function(
Map
){
map = new Map("map", {
basemap: "satellite",
center: [-116.96, 33.184],
zoom: 7
});
map.on("load", function(){
map.infoWindow.resize(250,100);
});
map.on("click", addPoint);
function addPoint(evt) {
var latitude = evt.mapPoint.getLatitude();
var longitude = evt.mapPoint.getLongitude();
map.infoWindow.setTitle("Coordinates");
map.infoWindow.setContent(
"lat/lon : " + latitude.toFixed(2) + ", " + longitude.toFixed(2) +
"<br>screen x/y : " + evt.screenPoint.x + ", " + evt.screenPoint.y
);
map.infoWindow.show(evt.mapPoint, map.getInfoWindowAnchor(evt.screenPoint));
}
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>