topic Re: Content Pane & Button Placements? in ArcGIS JavaScript Maps SDK Questions

Content Pane & Button Placements?

NMWater — Wed, 18 May 2016 15:46:04 GMT

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:

Re: Content Pane & Button Placements?

RickeyFight — Fri, 10 Dec 2021 23:04:18 GMT

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;
            }

Re: Content Pane & Button Placements?

KenBuja — Wed, 18 May 2016 16:20:19 GMT

Have you seen this sample?

Home Button | ArcGIS API for JavaScript

Re: Content Pane & Button Placements?

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:04:21 GMT

Francisco,

This seems to work fine for me (I built an app based on the code you show):

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Home Extent</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
  <style>
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }
    #HomeButton {
      display: block;
      position: absolute;
      top: 90px;
      left: 20px;
      z-index: 2;
    }
  </style>
  <script src="//js.arcgis.com/3.16/"></script>
  <script>

    require([
      "esri/map", 
      "esri/dijit/HomeButton",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      Map, HomeButton, parser
    )  {
      parser.parse();
      var map = new Map("map", {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"
      });

      var home = new HomeButton({
        map: map
      }, "HomeButton");
      home.startup();

    });
  </script>
</head>
<body class="claro esri">
  <div data-dojo-type="dijit/layout/BoarderContainer" 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 data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:50%">
      <div id="TesTable"></div>
    </div>
  </div>
</body>
</html>

Re: Content Pane & Button Placements?

NMWater — Wed, 18 May 2016 16:27:13 GMT

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

Re: Content Pane & Button Placements?

RickeyFight — Wed, 18 May 2016 16:32:22 GMT

Can you post all your code or send a link to your site?

Re: Content Pane & Button Placements?

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:04:24 GMT

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>

Re: Content Pane & Button Placements?

NMWater — Wed, 18 May 2016 16:39:57 GMT

Hi Rickey, This is my code:

<!DOCTYPE html>

<html>

<head>

<title>Test Table</title>

<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>

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>

</div>

</div>

</body>

</html>

Re: Content Pane & Button Placements?

NMWater — Wed, 18 May 2016 16:55:50 GMT

Hi Robert,

Thanks for all your help!

I added the class="map." However, I kept getting the following result.

Re: Content Pane & Button Placements?

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:04:26 GMT

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>

Re: Content Pane & Button Placements?

NMWater — Wed, 18 May 2016 17:09:11 GMT

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!

Re: Content Pane & Button Placements?

RobertScheitlin__GISP — Wed, 18 May 2016 17:14:29 GMT

Yes it is

/* This is the Home Button */