- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- Adding the Geocoder Widget
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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;
}
Solved! Go to Solution.
Accepted Solutions
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
) {
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
) {
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thank you - that helps
