<!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">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Maps Toolbar</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.12/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="http://js.arcgis.com/3.12/"></script>
<script>
var map, toolbar, symbol, geomTask;
var _public = {};
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"esri/toolbars/draw",
"esri/graphic",
"esri/geometry/Polygon",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/tasks/FeatureSet",
"esri/geometry/Point",
"esri/SpatialReference",
"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!"
], function(
Map,
ArcGISDynamicMapServiceLayer,
ImageParameters,
Draw,
Graphic,
Polygon,
QueryTask,
Query,
FeatureSet,
Point,
SpatialReference,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
parser,
registry
) {
parser.parse();
map = new Map("map", {
sliderOrientation : "horizontal"
});
var imageParameters = new ImageParameters();
imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.
//Takes a URL to a non cached map service.
var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://192.168.100.72:6080/arcgis/rest/services/ksa_bounaries_wfs/MapServer", {
"opacity" : 0.5,
"imageParameters" : imageParameters
});
map.addLayer(dynamicMapServiceLayer);
map.on("load", createToolbar);
// 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 createToolbar(themap) {
toolbar = new Draw(map);
toolbar.on("draw-end", addToMap);
}
/* function KabTest(evt){
alert ("jjjjj");
}*/
var _kabqueryInside;
var featureSet = new FeatureSet();
function addToMap(evt) {
_public._kabevt= evt;
alert ("here i am in 1");
var symbol;
toolbar.deactivate();
map.showZoomSlider();
switch (evt.geometry.type) {
case "point":
case "multipoint":
symbol = new SimpleMarkerSymbol();
break;
case "polyline":
alert ("this is free hand polyline");
symbol = new SimpleLineSymbol();
break;
default:
symbol = new SimpleFillSymbol();
break;
}
var graphic = new Graphic(evt.geometry, symbol);
_public._kabgraphic=graphic;
alert ("here i am in graphic adding");
map.graphics.add(graphic);
_public._kabgraphic=graphic;
var stateExtent = evt.geometry.getExtent().expand(1.0);
//this code is for search by polygon
_public._kabstateExtent=stateExtent;
map.setExtent(stateExtent);
//constructing Polygon
// var _kabpolygon = ([[xmin=stateExtent.xmin], [ymin=stateExtent.ymin], [xmax=stateExtent.xmax], [ymax=stateExtent.ymax]]);
var symbol1 = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);
var _kabpolygon = new esri.geometry.Polygon(_public._kabgraphic.geometry);
/* var _kabpolygon = {"rings":[[
[xmin=stateExtent.xmin, ymin=stateExtent.ymin],
[xmax=stateExtent.xmax, ymax=stateExtent.ymax],
[xmin=stateExtent.xmin, ymin=stateExtent.ymin],
[xmax=stateExtent.xmax, ymax=stateExtent.ymax]
]] "spatialReference":{" wkid":4326}
};*/
_public._kabpolygon=_kabpolygon;
alert (_kabpolygon);
var polygon = new esri.geometry.Polygon(polygon);
var singleRingPolygon = new Polygon(_kabpolygon, symbol1);
_public._kabsingleRingPolygon=singleRingPolygon;
var gsvc = null;
//constructing points
var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);
gsvc = new esri.tasks.GeometryService("http://192.168.100.72:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
var _kabqueryTaskInside = new QueryTask("http://192.168.100.72:6080/arcgis/rest/services/ksa_mot_roads/FeatureServer/0");
_public._kabqueryTaskInside=_kabqueryTaskInside;
//build query filter
alert ("here i am1");
_kabqueryInside = new Query();
_public._kabqueryInside=_kabqueryInside;
_kabqueryInside.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;
_kabqueryInside.geometry = graphic.geometry;
alert ("here i am2");
_kabqueryInside.returnGeometry = true;
//_kabqueryInside.where = "RYD_MASJID_ID like '%'";
_kabqueryTaskInside.execute(_kabqueryInside, queryCallback);
alert ("here i am3");
function queryCallback(featureSet) {
alert(featureSet);
_public._kabfeatureSet=featureSet;
var symbol = new esri.symbol.SimpleMarkerSymbol();
alert("here i am 5");
symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
symbol.setSize(8);
symbol.setColor(new dojo.Color([255,255,0,0.5]));
_public._kabsymbol=symbol;
var features = featureSet.features;
_public._kabfeatures=features;
dojo.forEach(features, function(feature) {
feature.setSymbol(symbol);
console.log(feature);
_public._kabfeature=feature;
map.graphics.add(feature);
});
}
}
});
</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>
<!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol-->
<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>
Solved! Go to Solution.
Mohammed,
Here is your code with fixes and comments:
<!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"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Maps Toolbar</title> <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/nihilo/nihilo.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.12/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="http://js.arcgis.com/3.12/"></script> <script> var map, toolbar, symbol, geomTask; var _public = {}; require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ImageParameters", "esri/toolbars/draw", "esri/graphic", "esri/geometry/Polygon", "esri/tasks/QueryTask", "esri/tasks/query", "esri/tasks/FeatureSet", "esri/geometry/Point", "esri/SpatialReference", "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!" ], function ( Map, ArcGISDynamicMapServiceLayer, ImageParameters, Draw, Graphic, Polygon, QueryTask, Query, FeatureSet, Point, SpatialReference, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, parser, registry ) { parser.parse(); map = new Map("map", { sliderOrientation: "horizontal" }); var imageParameters = new ImageParameters(); imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8. //Takes a URL to a non cached map service. var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://192.168.100.72:6080/arcgis/rest/services/ksa_bounaries_wfs/MapServer", { "opacity": 0.5, "imageParameters": imageParameters }); map.addLayer(dynamicMapServiceLayer); map.on("load", createToolbar); // 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 createToolbar(themap) { toolbar = new Draw(map); toolbar.on("draw-end", addToMap); } var _kabqueryInside; var featureSet = new FeatureSet(); function addToMap(evt) { _public._kabevt = evt; console.info("here i am in 1"); var symbol; toolbar.deactivate(); map.showZoomSlider(); switch (evt.geometry.type) { case "point": case "multipoint": symbol = new SimpleMarkerSymbol(); break; case "polyline": alert("this is free hand polyline"); symbol = new SimpleLineSymbol(); break; default: symbol = new SimpleFillSymbol(); break; } var graphic = new Graphic(evt.geometry, symbol); _public._kabgraphic = graphic; console.info("here i am in graphic adding"); map.graphics.add(graphic); var stateExtent = evt.geometry.getExtent().expand(1.0); //this code is for search by polygon _public._kabstateExtent = stateExtent; map.setExtent(stateExtent); //constructing Polygon // var _kabpolygon = ([[xmin=stateExtent.xmin], [ymin=stateExtent.ymin], [xmax=stateExtent.xmax], [ymax=stateExtent.ymax]]); var symbol1 = new SimpleFillSymbol(); var _kabpolygon = new Polygon(_public._kabgraphic.geometry); /*var _kabpolygon = { "rings": [[ [xmin = stateExtent.xmin, ymin = stateExtent.ymin], [xmax = stateExtent.xmax, ymax = stateExtent.ymax], [xmin = stateExtent.xmin, ymin = stateExtent.ymin], [xmax = stateExtent.xmax, ymax = stateExtent.ymax] ]] "spatialReference": { " wkid": 4326 } };*/ _public._kabpolygon = _kabpolygon; console.info(_kabpolygon); //Not sure why you had all this... // var polygon = new Polygon(polygon); // var singleRingPolygon = new Polygon(_kabpolygon, symbol1); // _public._kabsingleRingPolygon = singleRingPolygon; // var gsvc = new GeometryService("http://192.168.100.72:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer"); //constructing points var symbol = new SimpleFillSymbol(); //You probably should not use FeatureServer unless you are wanting to edit the feature in your app, instead use MapServer var _kabqueryTaskInside = new QueryTask("http://192.168.100.72:6080/arcgis/rest/services/ksa_mot_roads/FeatureServer/0"); _public._kabqueryTaskInside = _kabqueryTaskInside; //build query filter console.info("here i am 2"); _kabqueryInside = new Query(); _public._kabqueryInside = _kabqueryInside; _kabqueryInside.spatialRelationship = Query.SPATIAL_REL_CONTAINS; _kabqueryInside.geometry = graphic.geometry; console.info("here i am 3"); _kabqueryInside.returnGeometry = true; _kabqueryInside.outSpatialReference = map.spatialReference; //_kabqueryInside.where = "RYD_MASJID_ID like '%'"; _kabqueryTaskInside.execute(_kabqueryInside, queryCallback); console.info("here i am 4"); function queryCallback(featureSet) { console.info(featureSet); _public._kabfeatureSet = featureSet; //You were trying to apply a Simple Marker Symbol to a line feature. // var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 8, null, new dojo.Color([255, 255, 0, 0.5])); //The way you were creating sybology was pretty wierd and ineffecient, use the constructor options to apply everything //this keeps it down to one line. var symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.8]), 2); console.info("here i am 5"); _public._kabsymbol = symbol; var features = featureSet.features; _public._kabfeatures = features; dojo.forEach(features, function (feature) { feature.setSymbol(symbol); console.info(feature); _public._kabfeature = feature; map.graphics.add(feature); }); } } }); </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> <!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol--> <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>
Mohammed,
Here is your code with fixes and comments:
<!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"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Maps Toolbar</title> <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/nihilo/nihilo.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.12/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="http://js.arcgis.com/3.12/"></script> <script> var map, toolbar, symbol, geomTask; var _public = {}; require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ImageParameters", "esri/toolbars/draw", "esri/graphic", "esri/geometry/Polygon", "esri/tasks/QueryTask", "esri/tasks/query", "esri/tasks/FeatureSet", "esri/geometry/Point", "esri/SpatialReference", "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!" ], function ( Map, ArcGISDynamicMapServiceLayer, ImageParameters, Draw, Graphic, Polygon, QueryTask, Query, FeatureSet, Point, SpatialReference, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, parser, registry ) { parser.parse(); map = new Map("map", { sliderOrientation: "horizontal" }); var imageParameters = new ImageParameters(); imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8. //Takes a URL to a non cached map service. var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://192.168.100.72:6080/arcgis/rest/services/ksa_bounaries_wfs/MapServer", { "opacity": 0.5, "imageParameters": imageParameters }); map.addLayer(dynamicMapServiceLayer); map.on("load", createToolbar); // 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 createToolbar(themap) { toolbar = new Draw(map); toolbar.on("draw-end", addToMap); } var _kabqueryInside; var featureSet = new FeatureSet(); function addToMap(evt) { _public._kabevt = evt; console.info("here i am in 1"); var symbol; toolbar.deactivate(); map.showZoomSlider(); switch (evt.geometry.type) { case "point": case "multipoint": symbol = new SimpleMarkerSymbol(); break; case "polyline": alert("this is free hand polyline"); symbol = new SimpleLineSymbol(); break; default: symbol = new SimpleFillSymbol(); break; } var graphic = new Graphic(evt.geometry, symbol); _public._kabgraphic = graphic; console.info("here i am in graphic adding"); map.graphics.add(graphic); var stateExtent = evt.geometry.getExtent().expand(1.0); //this code is for search by polygon _public._kabstateExtent = stateExtent; map.setExtent(stateExtent); //constructing Polygon // var _kabpolygon = ([[xmin=stateExtent.xmin], [ymin=stateExtent.ymin], [xmax=stateExtent.xmax], [ymax=stateExtent.ymax]]); var symbol1 = new SimpleFillSymbol(); var _kabpolygon = new Polygon(_public._kabgraphic.geometry); /*var _kabpolygon = { "rings": [[ [xmin = stateExtent.xmin, ymin = stateExtent.ymin], [xmax = stateExtent.xmax, ymax = stateExtent.ymax], [xmin = stateExtent.xmin, ymin = stateExtent.ymin], [xmax = stateExtent.xmax, ymax = stateExtent.ymax] ]] "spatialReference": { " wkid": 4326 } };*/ _public._kabpolygon = _kabpolygon; console.info(_kabpolygon); //Not sure why you had all this... // var polygon = new Polygon(polygon); // var singleRingPolygon = new Polygon(_kabpolygon, symbol1); // _public._kabsingleRingPolygon = singleRingPolygon; // var gsvc = new GeometryService("http://192.168.100.72:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer"); //constructing points var symbol = new SimpleFillSymbol(); //You probably should not use FeatureServer unless you are wanting to edit the feature in your app, instead use MapServer var _kabqueryTaskInside = new QueryTask("http://192.168.100.72:6080/arcgis/rest/services/ksa_mot_roads/FeatureServer/0"); _public._kabqueryTaskInside = _kabqueryTaskInside; //build query filter console.info("here i am 2"); _kabqueryInside = new Query(); _public._kabqueryInside = _kabqueryInside; _kabqueryInside.spatialRelationship = Query.SPATIAL_REL_CONTAINS; _kabqueryInside.geometry = graphic.geometry; console.info("here i am 3"); _kabqueryInside.returnGeometry = true; _kabqueryInside.outSpatialReference = map.spatialReference; //_kabqueryInside.where = "RYD_MASJID_ID like '%'"; _kabqueryTaskInside.execute(_kabqueryInside, queryCallback); console.info("here i am 4"); function queryCallback(featureSet) { console.info(featureSet); _public._kabfeatureSet = featureSet; //You were trying to apply a Simple Marker Symbol to a line feature. // var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 8, null, new dojo.Color([255, 255, 0, 0.5])); //The way you were creating sybology was pretty wierd and ineffecient, use the constructor options to apply everything //this keeps it down to one line. var symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.8]), 2); console.info("here i am 5"); _public._kabsymbol = symbol; var features = featureSet.features; _public._kabfeatures = features; dojo.forEach(features, function (feature) { feature.setSymbol(symbol); console.info(feature); _public._kabfeature = feature; map.graphics.add(feature); }); } } }); </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> <!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol--> <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>
Thank you very much its working
can you please tell me where was my problem
Thanks
Kabeer
Kabeer,
I have commented in the code about your issues.
Glad to help. Now it is your turn to help the community by marking this question as answered. All you have to do is click the "Correct Answer" link (the one with the little green star) on the post that provided the answer for you. If the answer was not provided by one of the responders then you can mark any of the replies that you received as helpful by clicking on the "Actions" menu and choosing "Mark as Helpful"