AnsweredAssumed Answered

Adding the Geocoder Widget

Question asked by whsgis on Apr 28, 2015
Latest reply on Apr 29, 2015 by whsgis

I am somewhat new to javascript and I am having some difficulty bringing this function into my existing project: Geocoder widget | Guide | ArcGIS API for JavaScript


I would like to add the geocoder widget to a project I am working on but as soon as I begin altering the "require" lines in my js file I start losing parts of the app.  Is there a good resource available or can someone guide me through the process and explain the best way to do this?


Any assistance is greatly appreciated.


Here is my HTML: (I realize that the layers are all the same tiled service.  I have not created my additional layers yet.)


<!DOCTYPE html>



  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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




  <link rel="stylesheet" href="">

  <link rel="stylesheet" href="">

  <link rel="stylesheet" type="text/css" href="MapLab3.2.css">

  <link href='' rel='stylesheet' type='text/css'>

  <script src=""></script>

  <script src="MapLab3.2.js"></script>





<body class="claro">



<div id="search"></div>



  <div id="appTitleContainer">EarthSurveyor - World Mapping Lab</div>

<!-- place an html tag here -->

  <div id="appReturnLink">Back to Main</div>



  <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="rightPane"





    <div data-dojo-type="dijit/layout/AccordionContainer">

      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"

           data-dojo-props="title:'Legend', selected:true">



        <div id="legendDiv"></div>






      <div data-dojo-type="dijit/layout/ContentPane"




        <span style="padding:10px 0;">Click to toggle the visibility of the layers</span>



        <div id="toggle" style="padding: 2px 2px;"></div>






  <div id="map"











Here is my js:


var map;



















      function (

        Map, utils, Legend, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, dom, domConstruct,

        parser, arrayUtils, CheckBox

      ) {






        var legendLayers = [];



        map = new Map("map", {

          basemap: "topo",

          center: [10, 23],

          zoom: 2



// duplicate this for each layer - use dynamic layer service for those types



        var LADALandUse = new ArcGISTiledMapServiceLayer("", {

          id: 'landuse'




        legendLayers.push({ layer: LADALandUse, title: 'Land Use' });


//         to here



        var WWFTerEco = new ArcGISTiledMapServiceLayer("", {

          id: 'WWFTerEco'




        legendLayers.push({ layer: WWFTerEco, title: 'WWF Terrestrial Ecoregion' });



        var climateLayer = new ArcGISTiledMapServiceLayer("", {

            id: 'climate'




        map.on('layers-add-result', function () {

          var legend = new Legend({

            map: map,

            layerInfos: legendLayers

          }, "legendDiv");



        legendLayers.push({ layer: climateLayer, title: "Climate" });


        map.addLayers([ climateLayer, LADALandUse, WWFTerEco ]); /*add the layer var here*/



        map.on('layers-add-result', function () {

          //add check boxes

          arrayUtils.forEach(legendLayers, function (layer) {

            var layerName = layer.title;

            var checkBox = new CheckBox({

              name: "checkBox" +,


              checked: layer.layer.visible


            checkBox.on("change", function () {

              var targetLayer = map.getLayer(this.value);


              this.checked = targetLayer.visible;




            //add the check box and label to the toc

  , dom.byId("toggle"), "after");

            var checkLabel = domConstruct.create('label', {


                innerHTML: layerName

              }, checkBox.domNode, "after");

  "<br />", checkLabel, "after");





Here is the css:


html, body {

      height: 92%;

      width: 98%;

      margin: 1%;




    #rightPane {

      width: 20%;




    #legendPane {

      border: solid #97DCF2 1px;



    #appTitleContainer {



      margin: 1%;

      font-size: 22px;

      font-family: 'Oswald', sans-serif;




    /*this needs to allign with the one above it */


    #appReturnLink {

      right: 20%;


      margin: 1%;

      font-size: 22px;

      font-family: 'Oswald', sans-serif;

      float: right;



    #search {

      display: block;

      position: absolute;

      z-index: 3;

      top: 20px;

      left: 75px;