Hi Javascript Guru's,
As stated in a post a few days ago I am trying to learn javascript and i am pretty sure I am not understanding scope in terms of dojo. My goal is to create a layout that looks something like this.
I look at my code and it seems like it should create it but i am obviously missing something. All my javascript tools work if i don't add in a dojo layout and just use a standard div. It seems that what ever i am missing skips the whole tool bar and non map javascript and css.
Any help would be appreciated!
Thanks,
Matt
<!DOCTYPE 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>ArcGIS API for JavaScript | Basic Search</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#BasemapToggle {
position: absolute;
top: 55px;
right: 74px;
z-index: 2;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 55px;
left: 74px;
background-color: white;
}
.zoominIcon {
background-image: url(images/nav_zoomin.png);
width: 16px;
height: 16px;
}
.zoomoutIcon {
background-image: url(images/nav_zoomout.png);
width: 16px;
height: 16px;
}
.zoomfullextIcon {
background-image: url(images/nav_fullextent.png);
width: 16px;
height: 16px;
}
.zoomprevIcon {
background-image: url(images/nav_previous.png);
width: 16px;
height: 16px;
}
.zoomnextIcon {
background-image: url(images/nav_next.png);
width: 16px;
height: 16px;
}
.panIcon {
background-image: url(images/nav_pan.png);
width: 16px;
height: 16px;
}
.deactivateIcon {
background-image: url(images/nav_decline.png);
width: 16px;
height: 16px;
}
.Turnoff {
background-image: url(images/nav_decline.png);
width: 16px;
height: 16px;
}
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="https://js.arcgis.com/3.15/"></script>
<script>
require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"]);
</script>
<script>
var map;
require([
"esri/map",
"esri/dijit/Search",
"esri/dijit/BasemapToggle",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/symbols/SimpleMarkerSymbol",
"esri/InfoTemplate",
"dojo/_base/Color",
"esri/toolbars/navigation",
"dojo/on",
"dojo/parser",
"dijit/registry",
"dijit/Toolbar",
"dijit/form/Button",
"dojo/domReady!"
],
function (Map, Search, BasemapToggle, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color, Navigation, on, parser, registry) {
parser.parse();
var navToolbar;
var map = new Map("map", {
basemap: "topo",
center: [-120.435, 46.159], // lon, lat
zoom: 7
});
var toggle = new BasemapToggle({
map: map,
basemap: "satellite"
}, "BasemapToggle");
var s = new Search({
map: map
}, "search");
s.startup();
toggle.startup();
var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer", {
"id": "oilAndGasLayer",
"opacity": 0.75
});
map.addLayer(oilAndGasLayer).visible=false;
var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer", {
"id": "rivers",
"opacity": 0.75
});
map.addLayer(layer).visible=false;
//initialize query task
queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");
//initialize query
query = new Query();
query.returnGeometry = true;
query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"];
//initialize InfoTemplate
infoTemplate = new InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}");
//create symbol for selected features
symbol = new SimpleMarkerSymbol();
symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setSize(20);
symbol.setColor(new Color([255,255,0,0.5]));
function executeQueryTask(population) {
//set query based on what user typed in for population;
query.where = "POP1990 > " + population;
//execute query
queryTask.execute(query,showResults);
}
function showResults(featureSet) {
//remove all graphics on the maps graphics layer
map.graphics.clear();
//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures = featureSet.features;
//Loop through each feature returned
for (var i=0, il=resultFeatures.length; i<il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic = resultFeatures;
graphic.setSymbol(symbol);
//Set the infoTemplate.
graphic.setInfoTemplate(infoTemplate);
//Add graphic to the map graphics layer.
map.graphics.add(graphic);
}
}
navToolbar = new Navigation(map);
on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
registry.byId("zoomin").on("click", function () {
navToolbar.activate(Navigation.ZOOM_IN);
});
registry.byId("zoomout").on("click", function () {
navToolbar.activate(Navigation.ZOOM_OUT);
});
registry.byId("zoomfullext").on("click", function () {
navToolbar.zoomToFullExtent();
});
registry.byId("zoomprev").on("click", function () {
navToolbar.zoomToPrevExtent();
});
registry.byId("zoomnext").on("click", function () {
navToolbar.zoomToNextExtent();
});
registry.byId("pan").on("click", function () {
navToolbar.activate(Navigation.PAN);
});
registry.byId("deactivate").on("click", function () {
navToolbar.deactivate();
});
registry.byId("Turnoff").on("click", function () {
if (oilAndGasLayer.visible === true) {
oilAndGasLayer.hide();
} else {
oilAndGasLayer.show();
}
});
function extentHistoryChangeHandler () {
registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
}
on(dojo.byId('btnExec'), 'click', function(){
executeQueryTask(dojo.byId('population').value);
});
on(dojo.byId('btnExec2'), 'click', function(){
if (layer.visible === true) {
layer.hide();
} else {
layer.show();
}
});
//closing of main function
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;">
<div id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'">
<div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'">Zoom In</div>
<div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div>
<div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div>
<div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div>
<div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div>
<div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div>
<div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div>
<div data-dojo-type="dijit/form/Button" id="Turnoff" data-dojo-props="iconClass:'deactivateIcon'">Turn OffLayer</div>
</div>
<div id="search" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
US city population greater than :<input type="text" id="population" value="500000" />
<input type="button" value="Get Details" id="btnExec"/>
<input type="button" value="Turn of Purple" id="btnExec2"/>
</div>
<div id="map" class="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" >
<div id="BasemapToggle"></div>
</div>
</div>
</body>
</html>
