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
Info Window Lite
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample demonstrates how to use the InfoWindowLite to display popup content. The 'lite' info window is a simple, easy to customize window. By default content is displayed in the esri.dijit.Popup. In order to use the InfoWindowLite instead you'll need to create the lite info window and assign it to be the map's info window using the setInfoWindow method.
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>Info Window Lite</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
html, body, #mapDiv { height: 100%; margin: 0; padding: 0; }
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
require([
"esri/map",
"esri/dijit/InfoWindowLite",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"dojo/dom-construct",
"dojo/domReady!"
], function(
Map,
InfoWindowLite,
InfoTemplate,
FeatureLayer,
domConstruct
) {
var map = new Map("mapDiv", {
basemap: "topo-vector",
center: [-98.416, 39.781],
zoom: 6
});
var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
infoWindow.startup();
map.setInfoWindow(infoWindow);
var template = new InfoTemplate();
template.setTitle("<b>${STATE_NAME} - ${STATE_ABBR}</b>");
template.setContent("${STATE_NAME} is in the ${SUB_REGION} sub region.");
//add a layer to the map
var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate:template,
outFields: ["STATE_NAME" , "SUB_REGION", "STATE_ABBR"]
});
map.addLayer(featureLayer);
map.infoWindow.resize(200, 75);
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>