Thanks for your reply.
Based on your sample example, I have integrate code of toolbar and feature layer but below code is not showing feature layer to map. When I try to set feature layer then it is showing error in console "g.set is not a function". Right now i am calling setfeaturelayers() function from map.on("load",...) . Apart from that I want to set map center to newyork city but I don't know how to get center viewpoint of any state/city. Can you please look into this?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Maps Toolbar</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html, body, #mainWindow {
font-family: sans-serif;
height: 100%;
width: 100%;
}
html, body {
margin: 0;
padding: 0;
}
#header {
height: 80px;
overflow: auto;
padding: 0.5em;
}
</style>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map, toolbar ,InfoTemplate, featureLayer;
require([
"esri/map",
"esri/toolbars/draw",
"esri/graphic",
"esri/config",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/parser", "dijit/registry",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
,"esri/layers/FeatureLayer",
"esri/tasks/query",
"esri/InfoTemplate",
"esri/renderers/SimpleRenderer",
"esri/config",
"dojo/dom"
], function(
Map, Draw, Graphic,esriConfig,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
parser, registry
,FeatureLayer,
Query,
InfoTemplate, SimpleRenderer,
dom
) {
parser.parse();
esriConfig.defaults.io.proxyUrl = "/proxy/";
map = new Map("map", {
basemap: "streets",
//center: [-15.469, 36.428],
//zoom: 3
});
map.on("load", function() {
toolbar = new Draw(map);
toolbar.on("draw-end", addToMap);
setFeatureLayers();
});
function setFeatureLayers(){
featureLayer = new FeatureLayer("https://services7.arcgis.com/JRY73mi2cJ1KeR7T/ArcGIS/rest/services/NewYorkHospitalLayer/FeatureServe...",{
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: new InfoTemplate("Name: ${Name}", "${*}"),
outFields: ["Name","Street","City", "Zip", "PhoneNo"]
});
map.addLayer(featureLayer);
}
// loop through all dijits, connect onClick event
// listeners for buttons to activate drawing tools
registry.forEach(function(d) {
// d is a reference to a dijit
// could be a layout container or a button
if ( d.declaredClass === "dijit.form.Button" ) {
d.on("click", activateTool);
}
});
function activateTool() {
var tool = this.label.toUpperCase().replace(/ /g, "_");
toolbar.activate(Draw[tool]);
map.hideZoomSlider();
}
function addToMap(evt) {
var symbol;
toolbar.deactivate();
map.showZoomSlider();
switch (evt.geometry.type) {
case "point":
case "multipoint":
symbol = new SimpleMarkerSymbol();
break;
case "polyline":
symbol = new SimpleLineSymbol();
break;
default:
symbol = new SimpleFillSymbol();
break;
}
map.graphics.clear();
map.infoWindow.show();
var graphic = new Graphic(evt.geometry, symbol);
map.graphics.add(graphic);
var query = new Query();
query.geometry = evt.geometry.getExtent();
//use a fast bounding box query. will only go to the server if bounding box is outside of the visible map
featureLayer.queryFeatures(query, selectInBuffer);
}
function selectInBuffer(response){
var feature;
var features = response.features;
var inBuffer = [];
//filter out features that are not actually in buffer, since we got all points in the buffer's bounding box
for (var i = 0; i < features.length; i++) {
feature = features;
if(circle.contains(feature.geometry)){
inBuffer.push(feature.attributes[featureLayer.objectIdField]);
}
}
var query = new Query();
query.objectIds = inBuffer;
//use a fast objectIds selection query (should not need to go to the server)
featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
var totalLocations = getLayersLocation(results);
var r = "";
r = totalLocations ;
dom.byId("messages").innerHTML = r;
});
}
function getLayersLocation(features) {
var location = "";
debugger;
for (var x = 0; x < features.length; x++) {
location = location + features.attributes["Street"] + " " + features.attributes["City"] + " "+ features.attributes["Zip"] +"<br>";
}
return location;
}
});
</script>
</head>
<body class="nihilo">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<span>Draw:<br /></span>
<button data-dojo-type="dijit/form/Button">Point</button>
<button data-dojo-type="dijit/form/Button">Multi Point</button>
<button data-dojo-type="dijit/form/Button">Line</button>
<button data-dojo-type="dijit/form/Button">Polyline</button>
<button data-dojo-type="dijit/form/Button">Polygon</button>
<button data-dojo-type="dijit/form/Button">Freehand Polyline</button>
<button data-dojo-type="dijit/form/Button">Freehand Polygon</button>
<button data-dojo-type="dijit/form/Button">Arrow</button>
<button data-dojo-type="dijit/form/Button">Triangle</button>
<button data-dojo-type="dijit/form/Button">Circle</button>
<button data-dojo-type="dijit/form/Button">Ellipse</button>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>