2

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.

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

| improve this answer | |
  • 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. – geogeogeo Dec 10 '16 at 19:15
  • @geogeogeo you're welcome :) – Springer F Dec 10 '16 at 21:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.