Activating graphic creation from button using ArcGIS API for JavaScript?

Question 1

I need to have 2 graphic layers. One is used to set a starting location on a network, and the other is used to mark a stopping location.

There should only be a maximum of 1 feature in each layer. So, a single starting point, and a single stopping point.

I'd like the user to be able to click a button called, for example, Set Starting Location which would activate that graphic layer and allow the user to put a point on the map. Then there'd be another button that they could click called, for example, Set Stopping Location which would work the same way.

How do I make it so one button activates one graphic layer, and another button actives the other graphic layer? I'd also want to allow only 1 feature per layer, which I assume I'd use some type of count function.

The geometry of these graphics would eventually be used in a Python geoprocessing tool.

Question 2

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

Question 3

I just saw this. I actually figured it out, and it's very similar to what you did. Thanks a lot for taking the time.

Question 4

@geogeogeo you're welcome :)

Bourbia Brahim Bourbia Brahim 9471 gold badge6 silver badges15 bronze badges · Accepted Answer · 2016-11-20 13:39:04Z

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

I just saw this. I actually figured it out, and it's very similar to what you did. Thanks a lot for taking the time.

Stack Exchange Network

Activating graphic creation from button using ArcGIS API for JavaScript?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Activating graphic creation from button using ArcGIS API for JavaScript?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions