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>

<html>

<head>

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

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

  <title>EarthSurveyor</title>

 

 

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

  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">

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

  <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

  <script src="http://js.arcgis.com/3.13/"></script>

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

 

</head>

 

 

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

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

       data-dojo-props="region:'right'">

 

 

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

 

 

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

           data-dojo-props="title:'Layers'">

 

 

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

 

 

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

 

 

      </div>

    </div>

  </div>

  <div id="map"

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

       data-dojo-props="region:'center'"

       style="overflow:hidden;">

  </div>

  </div>

 

 

</body>

</html>

 

Here is my js:

 

var map;

 

 

    require([

      "esri/map",

      "esri/arcgis/utils",

      "esri/dijit/Legend",

      "esri/layers/ArcGISTiledMapServiceLayer",

      "esri/layers/ArcGISDynamicMapServiceLayer",

      "dojo/dom",

      "dojo/dom-construct",

      "dojo/parser",

      "dojo/_base/array",

      "dijit/form/CheckBox",

      "dijit/layout/AccordionContainer",

      "dijit/layout/BorderContainer",

      "dijit/layout/ContentPane",

      "dojo/domReady!"

    ],

      function (

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

        parser, arrayUtils, CheckBox

      ) {

 

 

        parser.parse();

 

 

        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("http://tiles.arcgis.com/tiles/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/LADA_Land_Use_Systems/MapServer", {

          id: 'landuse'

        });

 

 

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

      

//         to here

 

 

        var WWFTerEco = new ArcGISTiledMapServiceLayer("http://tiles.arcgis.com/tiles/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/LADA_Land_Use_Systems/MapServer", {

          id: 'WWFTerEco'

        });

 

 

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

 

 

        var climateLayer = new ArcGISTiledMapServiceLayer("http://tiles.arcgis.com/tiles/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/LADA_Land_Use_Systems/MapServer", {

            id: 'climate'

        });

 

 

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

          var legend = new Legend({

            map: map,

            layerInfos: legendLayers

          }, "legendDiv");

          legend.startup();

        });

        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" + layer.layer.id,

              value: layer.layer.id,

              checked: layer.layer.visible

            });

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

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

              targetLayer.setVisibility(!targetLayer.visible);

              this.checked = targetLayer.visible;

            });

 

 

            //add the check box and label to the toc

            domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");

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

                'for': checkBox.name,

                innerHTML: layerName

              }, checkBox.domNode, "after");

            domConstruct.place("<br />", checkLabel, "after");

          });

        });

      });

 

Here is the css:

 

html, body {

      height: 92%;

      width: 98%;

      margin: 1%;

    }

 

 

    #rightPane {

      width: 20%;

    }

 

 

    #legendPane {

      border: solid #97DCF2 1px;

    }

   

    #appTitleContainer {

      width:75%;

      height:5%;

      margin: 1%;

      font-size: 22px;

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

      float:left;

    }

   

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

   

    #appReturnLink {

      right: 20%;

      height:5%;

      margin: 1%;

      font-size: 22px;

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

      float: right;

    }

   

    #search {

      display: block;

      position: absolute;

      z-index: 3;

      top: 20px;

      left: 75px;

    }

Outcomes