Community
Select to view content in your preferred language

HTML layout mapping issues

3799
4
Jump to solution
07-27-2015 11:32 AM
AdamBlough
by
Deactivated User
‎07-27-2015 11:32 AM

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)

123.html.zip
test.html.zip
0 Kudos
1 Solution

Accepted Solutions
JakeSkinner
by Esri Esteemed Contributor
Esri Esteemed Contributor
‎07-29-2015 04:39 AM

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

images.zip
4 Replies
JakeSkinner
by Esri Esteemed Contributor
Esri Esteemed Contributor
‎07-29-2015 04:39 AM

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>
images.zip
AdamBlough
by
Deactivated User
‎08-09-2015 05:45 PM

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
by Esri Esteemed Contributor
Esri Esteemed Contributor
‎08-10-2015 03:51 AM

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
by
Deactivated User
‎08-10-2015 05:16 AM

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

0 Kudos