Jenna,
This is the best I could figure out. I tested a lot and it seems like you can not combine dock positions, but bottom seems to default to left in Desktop but when you emulate mobile then it will occupy the whole bottom and no longer just be in the lower left corner.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Dock Popup - 4.0beta3</title>
<style>
html,
body {
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.0beta3/esri/css/main.css">
<script src="https://js.arcgis.com/4.0beta3/"></script>
<script>
require([
"esri/Map",
"esri/PopupTemplate",
"esri/widgets/Popup",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"esri/views/MapView",
"esri/Color",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"dojo/domReady!"
], function(
Map,
PopupTemplate,
Popup,
FeatureLayer,
SimpleRenderer,
MapView,
Color,
SimpleFillSymbol,
SimpleLineSymbol
) {
//Create the map
var map = new Map({
basemap: "gray"
});
//Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
center: [-117.330, 47.662],
zoom: 12
});
var defaultContent =
"<i style='font-size: 1.15em;'>Click a feature to view the" +
" number of households on food stamps and other economic statistics about the block group," +
" including average disposable income and average home value.</i>";
var defaultTitle = "Households on food stamps in Spokane County";
/*************************************************************
* Set the view's default popup title and content to generic values
* prompting the user to click features on the map.
* Use the dock options to automatically show and dock the popup
* at all times and disabling the ability for users to move it.
**************************************************************/
view.then(function() {
view.popup.viewModel.docked = true;
});
view.popup.viewModel.title = defaultTitle;
view.popup.viewModel.content = defaultContent;
view.popup.viewModel.dockOptions = {
responsiveDockEnabled: false,
dockAtBreakpoint: false,
dockButtonEnabled: false,
dockPosition: view.popup.viewModel.dockPositions.bottom
};
console.info(view.popup.viewModel.dockOptions.dockPosition);
var zoomInAction = view.popup.viewModel.actions[0];
view.popup.viewModel.actions = [];
/*************************************************************
* The PopupTemplate content is the text that appears inside the
* popup when a feature is clicked in the layer.
* {fieldName} can be used to reference the value of an
* attribute of the selected feature. HTML elements can be used
* to provide structure and styles within the content. The
* fieldInfos property is an array of objects (each object representing
* a field) that is use to format number fields and customize field
* aliases in the popup and legend (not released yet)
**************************************************************/
var template = new PopupTemplate({
title: "Households on food stamps in {COUNTY}",
content: "<b>Households on food stamps:</b> {ACSSNAP}" +
"<br><b>Average Disposable Income:</b> {AVGDI_CY}" +
"<br><b>Average home value:</b> {AVGVAL_CY}",
fieldInfos: [{
fieldName: "AVGDI_CY",
label: "Average disposable income",
format: {
digitSeparator: true, //Uses a comma separator in large numbers
places: 0 //sets the number of decimal places to 0 and rounds up
}
}, {
fieldName: "ACSSNAP",
format: {
digitSeparator: true,
places: 0
}
}, {
fieldName: "AVGVAL_CY",
format: {
digitSeparator: true,
places: 0
}
}, {
fieldName: "TOTHH_CY",
format: {
digitSeparator: true,
places: 0
}
}],
actions: [zoomInAction]
});
/*******************************************************************
* When a mouse click is made on a location without a graphic,
* the popup normally is hidden. To keep it open, se the visibility
* to true and set the title and content back to the default values
* defined above.
*******************************************************************/
view.on("click", function(evt) {
if (view.popup.viewModel.visible === false) {
view.popup.viewModel.title = defaultTitle;
view.popup.viewModel.content = defaultContent;
view.popup.viewModel.visible = true;
}
});
//Set the renderer on the layer based on % of households with food stamps
var renderer = new SimpleRenderer({
symbol: new SimpleFillSymbol({
outline: new SimpleLineSymbol({
width: 0.3,
color: [255, 255, 255]
})
}),
visualVariables: [{
type: "colorInfo",
field: "ACSSNAP",
normalizationField: "TOTHH_CY",
theme: "high-to-low",
colors: ["#eff3ff", "#08519c"],
minDataValue: 0,
maxDataValue: 0.7
}]
});
//Reference the popupTemplate instance in the
//popupTemplate property of FeatureLayer
featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Spokane_County_INCOME_SPENDING_BG/...",
outFields: ["COUNTY", "AVGVAL_CY", "AVGDI_CY", "ACSSNAP",
"TOTHH_CY", "TOTPOP_CY"
],
popupTemplate: template
});
featureLayer.renderer = renderer;
map.add(featureLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
