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