Hi
Actually i am making a layer list . I am able to get all layers at one time.I am accessing map service layers.Anyone knows how to get only one layer at a time?
Solved! Go to Solution.
Hi Thejus,
Actually i got sample for following functionalities on arcgis for javascript api website .
1.Zoom by area
2.coordinates
3.center at xy
4.Measurement
5.scale
6.custom scale
7.query task
8.Overview
All are working fine separately.But when i tried to join all functionalities on single html file,all are working but Measurement widget is not working properly.Can you please Look into this .
Refer code:
<!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>Map with scalebar</title>
<link rel="stylesheet" type="text/css" href="localhost URL"/>
<link rel="stylesheet" type="text/css" href="localhost URL" />
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{padding:0;}
.zoominIcon {
width: 16px;
height: 16px;
}
.zoomoutIcon {
width: 16px;
height: 16px;
}
.zoomfullextIcon {
width: 16px;
height: 16px;
}
.zoomprevIcon {
width: 16px;
height: 16px;
}
.zoomnextIcon {
width: 16px;
height: 16px;
}
.panIcon {
width: 16px;
height: 16px;
}
.deactivateIcon {
width: 16px;
height: 16px;
}
#Pane1{
width:240px;
}
.claro .dijitTitlePaneTitle {
background: #fff;
font-weight:600;
border: none;
border-bottom:solid 1px #29201A;
border-top:solid 1px #29201A;
}
.claro .dijitTitlePaneTitleHover {
background:#eee;
}
.claro .dijitTitlePaneTitleActive {
background:#808775;
}
.claro .dijitTitlePaneContentOuter {
border-right: none;
border-bottom: none;
border-left: none;
}
</style>
<script type="text/javascript" src="localhost URL"></script>
<script type="text/javascript">
var map;
require([
"esri/map",
"esri/dijit/Scalebar",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/toolbars/navigation",
"dojo/on",
"dojo/parser",
"esri/dijit/OverviewMap",
"dijit/registry",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/symbols/SimpleMarkerSymbol",
"esri/InfoTemplate",
"dojo/_base/Color",
"dijit/Toolbar",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/keys",
"esri/config",
"esri/sniff",
"esri/SnappingManager",
"esri/dijit/Measurement",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"esri/tasks/GeometryService",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dijit/TitlePane",
"dijit/form/CheckBox",
"dojo/domReady!"
], function(Map, Scalebar,ArcGISDynamicMapServiceLayer,Navigation, on, parser,OverviewMap, registry, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color , keys,esriConfig, has,SnappingManager, Measurement, FeatureLayer, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol) {
//create map and add layer
parser.parse();
var navToolbar;
map = new Map("map");
var myTiledMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...");
map.addLayer(myTiledMapServiceLayer);
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();
});
function extentHistoryChangeHandler () {
registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
}
map.on("load", function() {
//after map loads, connect to listen to mouse move & drag events
map.on("mouse-move", showCoordinates);
map.on("mouse-drag", showCoordinates);
});
//initialize query task
queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...");
//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.05]));
var scalebar = new Scalebar({
map: map,
scalebarUnit: "dual"
});
var overviewMapDijit = new OverviewMap({
map: map,
visible: true
});
overviewMapDijit.startup();
});
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;
alert(resultFeatures.length);
//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);
}
}
function zoomTo(a,b,c)
{
map.centerAndZoom(new esri.geometry.Point(a,b),c);
}
function showCoordinates(evt) {
document.getElementById("info").innerHTML = evt.mapPoint.x.toFixed(3) + ", " + evt.mapPoint.y.toFixed(3);
}
function setScale(a)
{
map.setScale(a);
}
function centerScreen()
{
dojo.connect(map,"onClick",abc);
function abc(evt)
{
map.centerAt(evt.mapPoint);
}
}
</script>
</head>
<body class="claro">
<body>
<div id="navToolbar" data-dojo-type="dijit/Toolbar">
<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>
US city population greater than : <input type="text" id="population" value="10" />
<input type="button" value="Get Details" onclick="executeQueryTask(dojo.byId('population').value);" />
<div id="map" style="width:800px; height:800px; border:1px solid #000;">
<span id="info" style="position:right; left:15px; bottom:5px; color:#000; z-index:50;"></span>
</div>
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"
style="width:100%; height:100%;">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div id="Pane1" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:false, open:false">
<div id="measurementDiv"></div>
<span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>
</div>
</div>
</div>
X coordinate: <input type="text" id="text1"></br>
Y coordinate: <input type="text" id="text2"></br>
ZOOM Level: <input type="text" id="text3"></br>
<input type="button" value="zoom" onClick="zoomTo(document.getElementById('text1').value,document.getElementById('text2').value,document.getElementById('text3').value)"></br>
Scale 1 :<input type="text" id="text4"></br>
<input type="button" value="set Scale" onClick="setScale(document.getElementById('text4').value)"></br>
<input type="button" value="centerAt" onClick="centerScreen()"><br/>
</body>
</html>
Like I mentioned in my previous reply. The order of the require and parameters must match. In you case it was not correct. Below is the correct require for you page.
require([ "esri/map", "esri/dijit/Scalebar", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolbars/navigation", "dojo/on", "dojo/parser", "esri/dijit/OverviewMap", "dijit/registry", "esri/tasks/QueryTask", "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol", "esri/InfoTemplate", "dojo/_base/Color", "dojo/keys", "esri/config", "esri/sniff", "esri/SnappingManager", "esri/dijit/Measurement", "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/tasks/GeometryService", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "dijit/TitlePane", "dijit/form/CheckBox", "dijit/Toolbar", "dijit/form/Button", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function (Map, Scalebar, ArcGISDynamicMapServiceLayer, Navigation, on, parser, OverviewMap, registry, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color, keys, esriConfig, has, SnappingManager, Measurement, FeatureLayer, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol) {
Hi Thejus,
Now its working fine.Thanks a lot for your response.