Hi all!
I'm having a bit of trouble getting my home button to align correctly inside a content pane. I'm trying to place it under the zoom in/ zoom out button. Below is my CSS and my style. I tried placing it under my map div but that didn't work. Any suggestions?
Body:
CSS:
RESULTS:
Solved! Go to Solution.
Francisco,
The issue is in the comment inside your style block.
Change to this and you will be good to go:
<style> html, body, #map{ height: 100%; width:100%; margin:0; padding:0; } #HomeButton { display: block; position: absolute; top: 90px; left: 20px; z-index: 2; } </style>
This is where I have mine:
**I used the locate button in this example**
JS:
<div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"> <div id="LocateButton"></div> <div id="HomeButton"></div> </div>
CSS:
#LocateButton { position: absolute; top: 95px; left: 20px; z-index: 50; }
Hi Rickey,
I tried placing it the way you suggested it, still no luck though.
Any ideas what else could be causing the alignment?
Best,
Francisco
Can you post all your code or send a link to your site?
Hi Rickey, This is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Table</title>
<script src="https://js.arcgis.com/3.16/"></script>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<style>
html, body, #map{
height: 100%;
width:100%;
margin:0;
padding:0;
}
<!-- This is the Home Button -->
#HomeButton {
display: block;
position: absolute;
top: 90px;
left: 20px;
z-index: 2;
}
</style>
<script>
var map='';
require([
"esri/layers/FeatureLayer",
"esri/dijit/FeatureTable",
"esri/dijit/HomeButton",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"esri/geometry/webMercatorUtils",
"esri/map",
"dojo/dom-construct",
"dojo/dom",
"dojo/parser",
"dojo/ready",
"dojo/on",
"dojo/_base/lang",
"dijit/registry",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dijit/form/TextBox"
], function (
FeatureLayer, FeatureTable, HomeButton, ArcGISDynamicMapServiceLayer, ImageParameters, webMercatorUtils, Map,
domConstruct, dom, parser, ready, on,lang,
registry, Button, ContentPane, BorderContainer, TextBox
) {
parser.parse();
ready(function(){
var myFeatureLayer;
var map = new Map("map",{
basemap: "streets",
center:[-105.89, 34.55],
zoom: 6,
showLabels : "True",
logo: false,
});
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
//This connects the Table to the Map
map.on("load", loadTable);
// This sets the image parameters from the RASTERS from the Map Service
var imageParameters =new ImageParameters();
imageParameters.format = "jpeg";
// This adds the RASTERS from the Map Service
var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://128.123.187.240:6080/arcgis/rest/services/TEST_ET/ET_SSEB/MapServer",{
"opacity" : 0.95,
"imageParameters" : imageParameters
});
dynamicMapServiceLayer.setVisibleLayers([0]);
var layerDefinitions = [];
layerDefinitions[0] = "Year";
dynamicMapServiceLayer.setLayerDefinitions(layerDefinitions);
map.addLayers([dynamicMapServiceLayer]);
function loadTable(){
// Create the feature layer
myFeatureLayer = new FeatureLayer("http://128.123.187.240:6080/arcgis/rest/services/TEST_ET/ET_SSEB_YEARLY/MapServer/3", {
mode: FeatureLayer.MODE_ONDEMAND,
visible: true,
outFields: ["*"],
id: "fLayer"
});
//set map extent
on(myFeatureLayer, "load", function(evt){
var extent = myFeatureLayer.fullExtent;
if (webMercatorUtils.canProject(extent, map)) {
map.setExtent( webMercatorUtils.project(extent, map) );
}
});
map.addLayer(myFeatureLayer);
myFeatureTable = new FeatureTable({
"featureLayer" : myFeatureLayer,
"outFields": ["F2004","name"],
"map" : map
}, 'TestTable');
myFeatureTable.startup();
on(myFeatureTable, "load", function(evt){
console.log("The load event - ", evt);
});
myFeatureTable.on("show-statistics", function(evt){
console.log("show-statistics avgfield - ", evt.statistics.avgField);
console.log("show-statistics countfield - ", evt.statistics.countField);
console.log("show-statistics maxfield - ", evt.statistics.maxField);
console.log("show-statistics minfield - ", evt.statistics.minField);
console.log("show-statistics stddevfield - ", evt.statistics.stddevField);
console.log("show-statistics sumfield - ", evt.statistics.sumField)
});
myFeatureTable.on("row-select", function(evt){
console.log("select event - ", evt[0].data);
});
myFeatureTable.on("row-deselect", function(evt){
console.log("deselect event - ", evt[0].data);
});
myFeatureTable.on("refresh", function(evt){
console.log("refresh event - ", evt);
});
myFeatureTable.on("column-resize", function(evt){
//triggered by ColumnResizer extension
console.log("column-resize event- ", evt);
});
myFeatureTable.on("column-state-change", function(evt){
// triggered by ColumnHider extension
console.log("column-state-change event - ", evt);
});
myFeatureTable.on("sort", function(evt){
console.log("sort event - ", evt);
});
myFeatureTable.on("filter", function(evt){
console.log("filter event - ", evt);
});
}
});
});
</script>
</head>
<body class="claro esri">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:50%">
<div id ="map" class="map">
<div id="HomeButton"></div>
</div>
</div>
<div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:50%">
<div id="TestTable"></div>
</div>
</div>
</body>
</html>
Francisco,
You should always place another div inside the ContentPane that has the id where you will place your map (don't give a contentpane the id="map"):
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:50%"> <div id="map" class="map"> <div id="HomeButton"></div> </div> </div>
Hi Robert,
Thanks for all your help!
I added the class="map." However, I kept getting the following result.
Francisco,
The issue is in the comment inside your style block.
Change to this and you will be good to go:
<style> html, body, #map{ height: 100%; width:100%; margin:0; padding:0; } #HomeButton { display: block; position: absolute; top: 90px; left: 20px; z-index: 2; } </style>
Robert! You saved the day!
I know that in JS you can use two // to comment out. Is there any way to comment in the style part of the HTML?
Many many thanks!
Yes it is
/* This is the Home Button */