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) 123.html.zip test.html.zip

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

HTML layout mapping issues

AdamBlough

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)

123.html.zip

test.html.zip

Encuentra más publicaciones etiquetadas con

Accepted answers

jskinner

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

All comments

AdamBlough

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

jskinner

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

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>

jskinner

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

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.