Adding the Geocoder Widget

SteveCline — Wed, 29 Apr 2015 02:16:08 GMT

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>

<title>EarthSurveyor</title>

</head>

<div id="appTitleContainer">EarthSurveyor - World Mapping Lab</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/ContentPane" id="legendPane"

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

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

<div id="map"

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

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

style="overflow:hidden;">

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

}

Re: Adding the Geocoder Widget

KenBuja — Sat, 11 Dec 2021 16:20:48 GMT

One thing you have to remember about AMD (Asynchronous Module Definition) is that the arguments in the "function" callback are positional, meaning they have to be in the same order as the modules that are loaded in "require" section.

For example, if you tried to do something like this to add the "Search" tool, you'll run into errors

    require([
      "esri/dijit/Search",
      "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, Search
      )

Since the "esri/dijit/Search" module is first, the argument "Map" would be assigned to it, which would result in an error when you try to create a new map.

        map = new Map("map", {
          basemap: "topo",
          center: [10, 23],
          zoom: 2
        });

This would be the proper way to add the additional module. Note that the modules that don't need arguments are always after the modules that do need arguments ("dijit/layout/AccordionContainer" through "dojo/domReady!").

    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",
      "esri/dijit/Search",
      "dijit/layout/AccordionContainer",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ],
      function (
        Map, utils, Legend, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, dom, domConstruct,
        parser, arrayUtils, CheckBox, Search
      ) {

Re: Adding the Geocoder Widget

SteveCline — Wed, 29 Apr 2015 14:06:58 GMT

Thank you - that helps

topic Adding the Geocoder Widget in ArcGIS JavaScript Maps SDK Questions

Adding the Geocoder Widget

Re: Adding the Geocoder Widget

Re: Adding the Geocoder Widget