HTML layout mapping issues

2863
4
Jump to solution
07-27-2015 11:32 AM
AdamBlough
New Contributor II

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;

<link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">

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)

0 Kudos
1 Solution

Accepted Solutions
JakeSkinner
Esri Esteemed Contributor

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>

View solution in original post

4 Replies
JakeSkinner
Esri Esteemed Contributor

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>

View solution in original post

AdamBlough
New Contributor II

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>

  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

  <meta charset="utf-8">

  <!-- TAB TITLE -->

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

<!-- END OF STYLE START OF SCRIPT -->

<!-- HEADER -->

<div id="header">

<br>

<br>

<br>

<a href="http://www.wcupa.edu/"alt="WCU">

  <img src="http://wcupa.edu/images/wcuHeaderLogo.png"alt="ARBNET" style="width:15%;height:15%;border:1;">

</a>

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

</div>

<!-- NAV BAR -->

<div id="nav">

<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 class="boxed">

</div>

<p class="border">

</p>

<p class="border"align="center" valign="top" style="font-size:90%" font face="Arial">

<a href="" style="color:purple" target="_blank"><b>

<a href="http://gis.wcupa.edu/Research%20Services/Green%20Legacy%20Project%20Web%20writeup.pdf">

  <img src="https://sites.google.com/site/wcupaglp/home/Logo.jpg" alt="GLP" style="width:78%;height:78%;border:0;">

</a>

<br>

<a href="http://www.wcupa.edu/sustainability/">

  <img src="https://7ce3569b-a-62cb3a1a-s-sites.googlegroups.com/site/wcupaglp/home/Capture.PNG?attachauth=ANoY7..." alt="HTML tutorial" style="width:78%;height:78%;border:0;">

<a href="http://www.arbnet.org/morton-register/west-chester-university-arboretum">

  <img src="https://sites.google.com/site/wcupaglp/home/14ArbNet_Badges_Level2_web.jpg" alt="ARBNET" style="width:80%;height:80%;border:1;">

<div class="boxed">

</div>

</a>

</a>

</p>

<div class="boxed">

  <nav>

<button onclick="myFunction()">HELP</button>

</div>

<script>

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>

<!-- MAP WINDOW-->

<div id="section">

<body>

</body>

</div>

<div id="footer" style="font-size:65%" font face="Times">

Copyright © 2015  Adam P. Blough

</div>

</body>

</html>

0 Kudos
JakeSkinner
Esri Esteemed Contributor

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>

AdamBlough
New Contributor II

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

0 Kudos