Here is a sample defining your request :
The code bellow or either see Live FIDDLE
HTML :
<script type="text/javascript">
var dojoConfig = {
async: true
};
</script>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" design="headline" splitters="false" id="DashboardContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="DashboardTop" region="top">
<button data-dojo-type="dijit/form/Button" id="setStart" type="button">
Set Starting Location
</button>
<button data-dojo-type="dijit/form/Button" id="setStop" type="button">
Set Stopping Location
</button>
<button data-dojo-type="dijit/form/Button" id="clear" type="button">
clear !
</button>
|
<button data-dojo-type="dijit/form/Button" id="send" type="button">
Send request
</button>
</div>
<div data-dojo-type="dijit/layout/ContentPane" region="center" id="map" >
</div>
</div>
</body>
JS :
require(['esri/map',"esri/toolbars/draw", "dojo/on",'dojo/parser','dojo/ready','dijit/registry',"esri/layers/GraphicsLayer","esri/graphic","esri/symbols/PictureMarkerSymbol",'dijit/layout/BorderContainer','dijit/layout/ContentPane',],
function (Map,Draw,On,parser,ready,registry,GraphicsLayer,Graphic,PictureMarkerSymbol,BorderContainer,ContentPane) {
//parser.parse();
var urlIcoStart ="http://www.mymanatee.org/arcgis_js_api/library/3.12/arcgis/esri/dijit/images/Directions/maneuvers/esriDMTStopOrigin.png";
var urlIcoStop ="http://www.mymanatee.org/arcgis_js_api/library/3.12/arcgis/esri/dijit/images/Directions/maneuvers/esriDMTStopDestination.png"
var map;
var toolbar;
var startGrpahicLayer = new GraphicsLayer({id:"startLyr"});
var stopGrpahicLayer = new GraphicsLayer({id:"stopLyr"});;
var symbolstart = new PictureMarkerSymbol(urlIcoStart, 15, 20);
var symbolstop = new PictureMarkerSymbol(urlIcoStop, 15, 20);
var clickedBtn ="";
ready(function(){
map = new Map("map", {
basemap: "streets",
center: [-90, 39],
zoom: 9
});
map.on("load",function(){
toolbar = new Draw(map);
toolbar.on("draw-end", addToMap);
map.addLayers([startGrpahicLayer,stopGrpahicLayer]);
});
On(registry.byId("setStart"),"click",function(e){
if(startGrpahicLayer.graphics.length==0){
toolbar.activate(Draw.POINT);
map.disableMapNavigation();
clickedBtn = "start";
}else{
alert("Start point already Defined !");
}
});
On(registry.byId("setStop"),"click",function(e){
if(stopGrpahicLayer.graphics.length==0){
toolbar.activate(Draw.POINT);
map.disableMapNavigation();
clickedBtn = "stop";
}else{
alert("Stop point already Defined !");
}
});
On(registry.byId("clear"),"click",function(e){
startGrpahicLayer.clear();
stopGrpahicLayer.clear();
});
On(registry.byId("send"),"click",function(e){
yourRequestTogeoprocessingService();
});
});
addToMap = function(evt) {
var layer ="";
toolbar.deactivate();
map.enableMapNavigation();
if(clickedBtn == "start") { symbol = symbolstart; layer = startGrpahicLayer}
else if(clickedBtn == "stop") {symbol = symbolstop; layer = stopGrpahicLayer}
else return;
layer.add(new Graphic(evt.geometry,symbol));
};
yourRequestTogeoprocessingService = function(e) {
if(startGrpahicLayer.graphics.length ==0 || stopGrpahicLayer.graphics.length ==0 ){
alert("please specify both start and stop locations !!")
return;
}
console.log(startGrpahicLayer.graphics[0]);
console.log(stopGrpahicLayer.graphics[0]);
alert("Start point =\n X : "+startGrpahicLayer.graphics[0].geometry.x+" | Y: "+startGrpahicLayer.graphics[0].geometry.y+"\nStop point =\n X : "+stopGrpahicLayer.graphics[0].geometry.x+" | Y: "+stopGrpahicLayer.graphics[0].geometry.y);
}
});
CSS:
#DashboardContainer {
width: 100%;
height: 100%;
}
#DashboardTop {
height: 30px;
}
html,body{ width: 100%; height: 100%; margin:0px;padding:0px; overflow: hidden;}
Here is a fiddle
