Brain,
Here is a sample using just JS API (not WAB stuff).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Popup</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
}
/* Change color of icons to match bar chart and selection symbol */
.esriPopup.dark div.titleButton,
.esriPopup.dark div.titlePane .title,
.esriPopup.dark div.actionsPane .action {
color: #A4CE67;
}
/* Additional customizations */
.esriPopup.dark .esriPopupWrapper {
border: none;
}
.esriPopup .contentPane {
text-align: center;
}
.esriViewPopup .gallery {
margin: 0 auto;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 74px;
}
</style>
<script src="http://js.arcgis.com/3.11/"></script>
<script>
var map;
require([
"esri/map", "dojo/dom", "esri/geometry/Point",
"esri/dijit/Popup", "esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer", "esri/dijit/Geocoder",
"esri/symbols/SimpleFillSymbol", "esri/Color",
"dojo/dom-class", "dojo/dom-construct", "dojo/on",
"dojox/charting/Chart", "dojox/charting/themes/Dollar",
"dojo/domReady!"
], function(
Map, dom, Point,
Popup, PopupTemplate,
FeatureLayer, Geocoder,
SimpleFillSymbol, Color,
domClass, domConstruct, on,
Chart, theme
) {
//The popup is the default info window so you only need to create the popup and
//assign it to the map if you want to change default properties. Here we are
//noting that the specified title content should display in the header bar
//and providing our own selection symbol for polygons.
var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
var popup = new Popup({
fillSymbol: fill,
titleInBody: false
}, domConstruct.create("div"));
//Add the dark theme which is customized further in the <style> tag at the top of this page
domClass.add(popup.domNode, "dark");
map = new Map("map", {
basemap: "gray",
center: [-98.57, 39.82],
zoom: 4,
infoWindow: popup
});
var template = new PopupTemplate({
title: "Boston Marathon 2013",
description: "{STATE_NAME}: {Percent_Fi} of starters finished",
fieldInfos: [{ //define field infos so we can specify an alias
fieldName: "Number_Ent",
label: "Entrants"
},{
fieldName: "Number_Sta",
label: "Starters"
},{
fieldName: "Number_Fin",
label: "Finishers"
}],
mediaInfos:[{ //define the bar chart
caption: "",
type:"barchart",
value:{
theme: "Dollar",
fields:["Number_Ent","Number_Sta","Number_Fin"]
}
}]
});
var featureLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/FeatureServer/0",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: template
});
map.addLayer(featureLayer);
geocoder = new Geocoder({
map: map,
autoNavigate: false
}, "search");
geocoder.startup();
on(geocoder, "find-results", function(results){
console.info(results.results);
var mpPt = results.results.results[0].feature.geometry;//new Point(-122, 45.6);
var scrPt = map.toScreen(mpPt);
map.emit("click", { bubbles: true, cancelable: true, screenPoint: scrPt, mapPoint: mpPt });
});
});
</script>
</head>
<body class="claro">
<div id="search"></div>
<div id="map"></div>
</body>
</html>
