Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Popup widget
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
Description
This sample demonstrates how to replace the map's built-in info window with a popup. The Popup class (introduced at version 2.3) is a custom info window that adds additional functionality to the default info window. To replace the map's info window with the popup first create a new popup and set it to the map's info window when the map is created.
The content for the popup can be formatted using the PopupTemplate class. This class provides the ability to define the title, content and media (charts, images). In this sample, a new PopupTemplate is created and the title and fields are specififed using the {} syntax.
Since the feature layer displayed in the map has attachments enabled we use the showAttachments property to display attachments in the popup.
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>San Francisco</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.esriScalebar {
padding: 20px 20px;
}
#map {
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
var map;
require([
"esri/config",
"esri/map",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/tasks/GeometryService",
"dojo/dom-construct",
"dojo/parser",
"esri/Color",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
],
function (
esriConfig, Map, Popup, PopupTemplate, FeatureLayer,
SimpleMarkerSymbol, GeometryService, domConstruct, parser, Color
) {
parser.parse();
esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
var popupOptions = {
markerSymbol: new SimpleMarkerSymbol("circle", 32, null,
new Color([0, 0, 0, 0.25])),
marginLeft: "20",
marginTop: "20"
};
//create a popup to replace the map's info window
var popup = new Popup(popupOptions, domConstruct.create("div"));
map = new Map("map", {
basemap: "topo",
center: [-122.448, 37.788],
zoom: 17,
infoWindow: popup
});
var popupTemplate = new PopupTemplate({
title: "{address}",
fieldInfos: [
{
fieldName: "req_type",
visible: true,
label: "Type"
},
{
fieldName: "req_date",
visible: true,
label: "Date",
format: {
dateFormat: 'shortDateShortTime'
}
}
],
showAttachments: true
});
//create a feature layer based on the feature collection
var featureLayer = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/MapServer/0",
{
mode: FeatureLayer.MODE_SNAPSHOT,
infoTemplate: popupTemplate,
outFields: ["req_date", "address"]
});
featureLayer.setDefinitionExpression("address != ''");
map.addLayer(featureLayer);
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
style="width: 100%; height: 100%; margin: 0;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"
style="border:1px solid #000;padding:0;">
</div>
</div>
</body>
</html>