topic Re: HTML layout mapping issues in Developers Questions

HTML layout mapping issues

AdamBlough — Mon, 27 Jul 2015 18:32:10 GMT

I am attempting to add html styling to my script. I have a basic map with a search bar and 'change basemap' option button. Everything is working well until I attempt to add it to a layout.

I want the map to be in a window with a header, nav bar, and a footer. But I cannot get it to work. When I put the code together, the search bar pops off the map and sits above the map in a blank space and the basemap button completely disappears. I believe it has to do with the fact that I cannot add the;

style sheet to the code without the entire map disappearing and only leaving the search bar. All I want to do is add a layout to my ESRI API script but am having a terrible time with it.

Any Help would be greatly appreciated!!

I have attached;

The code with the layout that is changing the search bar and removing the basemap (Test)

The origional code where everything is working fine but has no layout (123)

Re: HTML layout mapping issues

JakeSkinner — Sun, 12 Dec 2021 05:40:16 GMT

Hi Adam,

Always happy to help someone representing the Dub C

Below is an example with, I believe, most of the functionality you are looking for. To see the icons for the zoom and pan, extract the zip file to the same location as your application.

<!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>Sample Map</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
    html, body {
      height: 99%;
      width: 99%;      
    }

    #header{
      height: 100px;
      background-color:black;     
    }
    
    #title{
        padding-bottom: 30px;
        color: white;
        text-align: center;
        font-size: 40px;
    }
    
    #footer{
       height: 35px;
       background-color: black;  
       color: white;
       text-align: center;
       font-size: 20px;     
    }
    
    .claro .dijitToolbar{
        padding: 0px;
        text-align: center;              
    }
    
    .zoominIcon {
        background-image: url(images/nav_zoomin.png);
        width: 16px;
        height: 16px;
      }

      .zoomoutIcon {
        background-image: url(images/nav_zoomout.png);
        width: 16px;
        height: 16px;
      }

      .zoomfullextIcon {
        background-image: url(images/nav_fullextent.png);
        width: 16px;
        height: 16px;
      }

      .zoomprevIcon {
        background-image: url(images/nav_previous.png);
        width: 16px;
        height: 16px;
      }

      .zoomnextIcon {
        background-image: url(images/nav_next.png);
        width: 16px;
        height: 16px;
      }

      .panIcon {
        background-image: url(images/nav_pan.png);
        width: 16px;
        height: 16px;
      }

      .deactivateIcon {
        background-image: url(images/nav_decline.png);
        width: 16px;
        height: 16px;
      }
  </style>
  
  <script src="http://js.arcgis.com/3.14/"></script>
  <script>

    require([
        "esri/map",
        "esri/dijit/Search",
        "esri/dijit/InfoWindowLite",
        "esri/InfoTemplate",
        "esri/layers/FeatureLayer",
        "dojo/dom-construct",
        "esri/dijit/BasemapGallery",
        "esri/arcgis/utils",
        "dojo/on",
        "dijit/registry",
        "dojo/parser",
        "esri/toolbars/navigation",
        "dijit/Toolbar",
        "dijit/TitlePane",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dijit/form/Button" ,
        "dojo/domReady!"       
      ], function(
          Map,
          Search,
          InfoWindowLite,
          InfoTemplate,
          FeatureLayer,
          domConstruct,
          BasemapGallery,
          arcgisUtils,
          on,
          registry,
          parser,
          Navigation,
          Toolbar,   
          TitlePane,       
          BorderContainer, 
          ContentPane, 
          Button
         ) {
           parser.parse();
        
            var map = new Map("map", {
              basemap: "topo",
              center: [-75.596472, 39.951433],
              zoom: 16                           
            });
            
            var s = new Search({
                enableButtonMode: true, 
                enableLabel: false,
                enableInfoWindow: true,
                showInfoWindowOnSelect: false,            
                map: map
            }, "search");

           var sources = s.get("sources");
           var sources = [];

         //Push the sources used to search, by default the ArcGIS Online World geocoder is included. 
         sources.push({
            featureLayer: new FeatureLayer("http://services1.arcgis.com/xnOV358bj0tLwxji/arcgis/rest/services/GreenLegacy/FeatureServer/0"),
            searchFields: ["Field1"],
            displayField: "Field1",
            exactMatch: false,
            outFields: ["Field1", "COMMON_NAM", "LATIN_NAME"],
            name: "ID",
            placeholder: "ex. Plot 1 Tree 25 enter '1025'",
            maxResults: 6,
            maxSuggestions: 6,

            //PopUp InfoTemplate
            infoTemplate: new InfoTemplate("Tree ${Field1}", "Common Name: ${COMMON_NAM}</br>Latin Name: ${LATIN_NAME}"),
            enableSuggestions: true,
            minCharacters: 0
         });



         //Activates sources to the search widget
         s.set("sources", sources);
         s.startup();
        
        var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
        map: map
        
      }, "basemapGallery");
      basemapGallery.startup();
      
      var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
        infoWindow.startup();
        map.setInfoWindow(infoWindow);

        var template = new InfoTemplate();
        template.setTitle("<b>${Field1} - ${COMMON_NAM}");
        template.setContent("Tree ${Field1} is a ${COMMON_NAM} (${LATIN_NAME}) located in study plot ${Plot} with a DBH of ${DBH1_cm_}cm.");

        //Static Feature Layer 
        var featureLayer = new FeatureLayer("http://services1.arcgis.com/xnOV358bj0tLwxji/arcgis/rest/services/GreenLegacy/FeatureServer/0", {
          
          mode: FeatureLayer.MODE_ONDEMAND,
          infoTemplate:template,
          outFields: ["Field1" , "COMMON_NAM","LATIN_NAME", "DBH1_cm_", "Plot ", "PA_Native"]
        });
        map.addLayer(featureLayer);

        map.infoWindow.resize(200, 100);
        
        navToolbar = new Navigation(map);
        on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

        registry.byId("zoomin").on("click", function () {
          navToolbar.activate(Navigation.ZOOM_IN);
        });

      registry.byId("zoomout").on("click", function () {
        navToolbar.activate(Navigation.ZOOM_OUT);
      });

      registry.byId("zoomfullext").on("click", function () {
        navToolbar.zoomToFullExtent();
      });

      registry.byId("zoomprev").on("click", function () {
        navToolbar.zoomToPrevExtent();
      });

      registry.byId("zoomnext").on("click", function () {
        navToolbar.zoomToNextExtent();
      });

      registry.byId("pan").on("click", function () {
        navToolbar.activate(Navigation.PAN);
      });

      registry.byId("deactivate").on("click", function () {
        navToolbar.deactivate();
      });

      function extentHistoryChangeHandler () {
        registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
      }  

      });
  </script>

</head>
<body class="claro">
<div id="content"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">     
  <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
      <div id='title'>
          <strong>City Gallery</strong>
      </div>      
      <div id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props: "regions: 'bottom'">
        <div data-dojo-type="dijit/form/Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon'">Zoom In</div>
        <div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div>
        <div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div>
        <div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div>
        <div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div>
        <div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div>
        <div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div>
      </div>
  </div>
    
   
  <div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"
       style="overflow:hidden;">
       <div style="position:absolute; left:74px; top:27px; z-Index:999;">          
            <div id="search"></div>                   
       </div>
       <div style="position:absolute; right:25px; top:10px; z-Index:999;">
            <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Switch Basemap', closable:false, open:false">
              <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
                <div id="basemapGallery"></div>
            </div>
            </div>
       </div> 
    
  </div>
  
  <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
      Copyright © W3Schools.com
  </div>

</div>
</body>

</html>

Re: HTML layout mapping issues

AdamBlough — Mon, 10 Aug 2015 00:45:00 GMT

That looks amazing Jeff, exactly what I was trying to accomplish. Thanks for helping West Chester U out!

One last question is, how difficult would it be to add a side navigation menu beside the map (ie make the map 4/5 across and another bar for the rest. So I can add image links to the credible sources)

I have a simple code of what I am talking about attached. I am only looking to add another section to the code you wrote.

<!DOCTYPE html>

<html>

<?xml version="1.0" encoding="utf-8"?>

</br>

<head>

<title>WCUPA Arboretum</title>

<head>

<style>

#header {

background-color:#45204a;

color:white;

text-align:center;

padding:9px;

line-height: 10%;

}

#nav {

line-height:25px;

background-color:#F9C726;

height:632px;

width:12%;

float:left;

padding:10px;

}

#section {

width:100%

height:632px

float:center

padding:0px;

}

#footer {

background-color:#45204a;

color:white;

clear:both;

text-align:center;

padding:5px;

}

.boxed {

border:2px solid purple;

text-align:center;

}

</style>

</script>

</head>

<br>

</a>

<font face="sans-serif"style="color:#F9C726"Font size="3"><p>ARBORETUM</p></font>

</div>

<div

<p><b><font color="purple" face="verdana" size="3%"> Click on a point to see information on that tree or Search for a specific tree ID Number using the magnifying glass.</font></b></p>

</div>

</div>

</p>

</a>

<br>

</div>

</a>

</p>

<nav>

</div>

function myFunction() {

alert("WCUPA Arboretum Help\n\nSEARCHING FOR A TREE BY ID NUMBER\n\nWest Chester University numbers their trees with blue identification numbers written on each tree. This number is the tree's ID. That tree is also located in a study plot.\nTo search for a specific tree on the WCU campus combine the Study Plot with the Three Digit tree ID \n \n EX. Tree 125 in Study Plot 4 is 4125 \n Tree 25 in Plot 2 is 2025\n\n\n");

}

</script>

</nav>

</div>

<body>

</body>

</div>

</div>

</body>

</html>

Re: HTML layout mapping issues

JakeSkinner — Sun, 12 Dec 2021 05:40:20 GMT

This won't be too difficult. Here is a great link that discusses dojo layout dijits:

Dojo layout dijits | Guide | ArcGIS API for JavaScript

Below is an example of adding a content pane to the left of the map:

<!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>Sample Map</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
    html, body {
      height: 99%;
      width: 99%;      
    }

    #header{
      height: 100px;
      background-color:black;     
    }
    
    #title{
        padding-bottom: 30px;
        color: white;
        text-align: center;
        font-size: 40px;
    }
    
    #footer{
       height: 35px;
       background-color: black;  
       color: white;
       text-align: center;
       font-size: 20px;     
    }
    
    #leftPane{
        width: 150px;
        background-color:black;
        color: white;
    }
    
    .claro .dijitToolbar{
        padding: 0px;
        text-align: center;              
    }
    
    .zoominIcon {
        background-image: url(images/nav_zoomin.png);
        width: 16px;
        height: 16px;
      }

      .zoomoutIcon {
        background-image: url(images/nav_zoomout.png);
        width: 16px;
        height: 16px;
      }

      .zoomfullextIcon {
        background-image: url(images/nav_fullextent.png);
        width: 16px;
        height: 16px;
      }

      .zoomprevIcon {
        background-image: url(images/nav_previous.png);
        width: 16px;
        height: 16px;
      }

      .zoomnextIcon {
        background-image: url(images/nav_next.png);
        width: 16px;
        height: 16px;
      }

      .panIcon {
        background-image: url(images/nav_pan.png);
        width: 16px;
        height: 16px;
      }

      .deactivateIcon {
        background-image: url(images/nav_decline.png);
        width: 16px;
        height: 16px;
      }
  </style>
  
  <script src="http://js.arcgis.com/3.14/"></script>
  <script>

    require([
        "esri/map",
        "esri/dijit/Search",
        "esri/dijit/InfoWindowLite",
        "esri/InfoTemplate",
        "esri/layers/FeatureLayer",
        "dojo/dom-construct",
        "esri/dijit/BasemapGallery",
        "esri/arcgis/utils",
        "dojo/on",
        "dijit/registry",
        "dojo/parser",
        "esri/toolbars/navigation",
        "dijit/Toolbar",
        "dijit/TitlePane",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dijit/form/Button" ,
        "dojo/domReady!"       
      ], function(
          Map,
          Search,
          InfoWindowLite,
          InfoTemplate,
          FeatureLayer,
          domConstruct,
          BasemapGallery,
          arcgisUtils,
          on,
          registry,
          parser,
          Navigation,
          Toolbar,   
          TitlePane,       
          BorderContainer, 
          ContentPane, 
          Button
         ) {
           parser.parse();
        
            var map = new Map("map", {
              basemap: "topo",
              center: [-75.596472, 39.951433],
              zoom: 16                           
            });
            
            var s = new Search({
                enableButtonMode: true, 
                enableLabel: false,
                enableInfoWindow: true,
                showInfoWindowOnSelect: false,            
                map: map
            }, "search");

           var sources = s.get("sources");
           var sources = [];

         //Push the sources used to search, by default the ArcGIS Online World geocoder is included. 
         sources.push({
            featureLayer: new FeatureLayer("http://services1.arcgis.com/xnOV358bj0tLwxji/arcgis/rest/services/GreenLegacy/FeatureServer/0"),
            searchFields: ["Field1"],
            displayField: "Field1",
            exactMatch: false,
            outFields: ["Field1", "COMMON_NAM", "LATIN_NAME"],
            name: "ID",
            placeholder: "ex. Plot 1 Tree 25 enter '1025'",
            maxResults: 6,
            maxSuggestions: 6,

            //PopUp InfoTemplate
            infoTemplate: new InfoTemplate("Tree ${Field1}", "Common Name: ${COMMON_NAM}</br>Latin Name: ${LATIN_NAME}"),
            enableSuggestions: true,
            minCharacters: 0
         });



         //Activates sources to the search widget
         s.set("sources", sources);
         s.startup();
        
        var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
        map: map
        
      }, "basemapGallery");
      basemapGallery.startup();
      
      var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
        infoWindow.startup();
        map.setInfoWindow(infoWindow);

        var template = new InfoTemplate();
        template.setTitle("<b>${Field1} - ${COMMON_NAM}");
        template.setContent("Tree ${Field1} is a ${COMMON_NAM} (${LATIN_NAME}) located in study plot ${Plot} with a DBH of ${DBH1_cm_}cm.");

        //Static Feature Layer 
        var featureLayer = new FeatureLayer("http://services1.arcgis.com/xnOV358bj0tLwxji/arcgis/rest/services/GreenLegacy/FeatureServer/0", {
          
          mode: FeatureLayer.MODE_ONDEMAND,
          infoTemplate:template,
          outFields: ["Field1" , "COMMON_NAM","LATIN_NAME", "DBH1_cm_", "Plot ", "PA_Native"]
        });
        map.addLayer(featureLayer);

        map.infoWindow.resize(200, 100);
        
        navToolbar = new Navigation(map);
        on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

        registry.byId("zoomin").on("click", function () {
          navToolbar.activate(Navigation.ZOOM_IN);
        });

      registry.byId("zoomout").on("click", function () {
        navToolbar.activate(Navigation.ZOOM_OUT);
      });

      registry.byId("zoomfullext").on("click", function () {
        navToolbar.zoomToFullExtent();
      });

      registry.byId("zoomprev").on("click", function () {
        navToolbar.zoomToPrevExtent();
      });

      registry.byId("zoomnext").on("click", function () {
        navToolbar.zoomToNextExtent();
      });

      registry.byId("pan").on("click", function () {
        navToolbar.activate(Navigation.PAN);
      });

      registry.byId("deactivate").on("click", function () {
        navToolbar.deactivate();
      });

      function extentHistoryChangeHandler () {
        registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
      }  

      });
  </script>

</head>
<body class="claro">
<div id="content"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">     
  <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
      <div id='title'>
          <strong>City Gallery</strong>
      </div>      
      <div id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props: "regions: 'bottom'">
        <div data-dojo-type="dijit/form/Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon'">Zoom In</div>
        <div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div>
        <div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div>
        <div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div>
        <div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div>
        <div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div>
        <div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div>
      </div>
  </div>
  
  <div id='leftPane' data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left'">
      Example
  </div>
    
   
  <div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"
       style="overflow:hidden;">
       <div style="position:absolute; left:74px; top:27px; z-Index:999;">          
            <div id="search"></div>                   
       </div>
       <div style="position:absolute; right:25px; top:10px; z-Index:999;">
            <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Switch Basemap', closable:false, open:false">
              <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
                <div id="basemapGallery"></div>
            </div>
            </div>
       </div> 
    
  </div>
  
  <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
      Copyright © W3Schools.com
  </div>

</div>
</body>

</html>

Re: HTML layout mapping issues

AdamBlough — Mon, 10 Aug 2015 12:16:47 GMT

Thank you so much. This is perfect you helped me with a lot of useful tools!