AnsweredAssumed Answered

Polygon Barriers JavaScript app

Question asked by ilyass on Feb 13, 2014
Latest reply on Feb 18, 2014 by ilyass
Good Morning,

I am developing a GIS Web app using JavaScript, now i have the possibility to edit points in the Map and click on a button to have the polygon.
What i should do now is to ad two other button one for add stops and the other to solve road, and i should consider the polygon as a barrier so when i click on solve road the app should give me a road between the two stops and avoid the polygon already created

Below the code of creating the polygon (Need help on the second part please):

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <!--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>Foggy Buffer Zone</title>    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">      <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }       #mapu { padding:0; }       #titlePane {         width:200px;         height:300px;       }       .claro .dijitTitlePaneTitle {         background: #A4BDA7;         font-weight:600;         color:#33292B;       }       .dijitButtonNode {         background-color: #A4BDA7 !important;         border: 1px solid #646750 !important;         color:#33292B !important;       }     </style>    <script src="http://js.arcgis.com/3.7/"></script>   <script>   require(["dojo/dom",           "dojo/dom-attr",           "dojo/_base/array",           "dojo/_base/Color",           "dojo/parser",            "esri/config",           "esri/map",           "esri/graphic",                "esri/tasks/GeometryService",           "esri/tasks/BufferParameters",                "esri/toolbars/draw",                "esri/symbols/SimpleMarkerSymbol",           "esri/symbols/SimpleLineSymbol",           "esri/symbols/SimpleFillSymbol",                      "dijit/layout/BorderContainer",           "dijit/layout/ContentPane",     "dijit/TitlePane"     ],          function(dom, domAttr, array, Color, parser, esriConfig, Map,   Graphic, GeometryService, BufferParameters, Draw, SimpleMarkerSymbol,   SimpleLineSymbol, SimpleFillSymbol)    {       var map, geo, tb;           parser.parse();          map = new Map("map", {         basemap: "streets",         center: [54.407, 24.462],         zoom: 13,       });      esriConfig.defaults.io.proxyUrl = "/proxy";     esriConfig.defaults.io.alwaysUseProxy = false;       geo = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");        map.on("load", initToolbar);    /*   **  Initialize the drawing toolbar  */  function initToolbar(evtObj) {       app.tb = new Draw(evtObj.map);       app.tb.on("draw-end", drawPoint);     }   // Array where points are saved  var list = new Array();    /*     ** Draw point  */  function drawPoint(evtObj) {        // Get the click geometry     var geometry = evtObj.geometry;           // Point symbol       var symbol = new SimpleMarkerSymbol(    {     "angle":0,         "xoffset":0,         "yoffset":12,         "type":"esriPMS",         "url":"http://www.iconexperience.com/_img/v_collection_png/512x512/shadow/cloud.png",         "contentType":"image/png",         "width":24,         "height":24         }    );        // Add point to the map       var graphic = new Graphic(geometry, symbol);       app.map.graphics.add(graphic);     // Store the point geometry    list.push(geometry)  }    /*     **  Create the polygon around points  */  function drawEndHandler(){         app.tb.deactivate();            geo.convexHull(list,function(result){             var symbol;             switch(result.type){               case "point":                 symbol = new esri.symbol.SimpleMarkerSymbol();                 break;               case "polyline":                 symbol = new esri.symbol.SimpleLineSymbol();                 break;               case "polygon":                 symbol = new esri.symbol.SimpleFillSymbol();                 break;             }             map.graphics.add(new esri.Graphic(result,symbol));           },function(error){             console.log("An error occured during convex hull calculation");           });             }       app = {       map: map,       tb: tb,       geo: geo,     drawPolygon: drawEndHandler     };   });       function drawClick(){  app.drawPolygon();   }      /*   ** Click on Point button   */   function pointClick(){     app.tb.activate(esri.toolbars.Draw.POINT);  app.map.hideZoomSlider();   }      /*   ** Click on Clear Graphics button   */   function clearGraphicsClick(){     app.map.graphics.clear();   }   </script>  </head>  <body class="claro">   <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters:'false',design:'headline'" style="width: 100%; height: 100%;">       <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"  style="overflow:hidden;">       <div style="position:absolute; right:20px; top:10px; z-Index:999;">         <div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Fog Warning System', closable:'false', open:'true'">             <p style="padding:5px 2px;color:#33292B;">Add foggy point and create the polygon.</p>    <button data-dojo-type="dijit.form.Button" onclick="pointClick();">Report Fog</button>      <button data-dojo-type="dijit.form.Button" type="button" onclick="clearGraphicsClick();">Clear</button>    <button id="point" data-dojo-type="dijit.form.Button" type="button" onclick="drawClick();">Draw The Foggy Zone</button>                      </div>       </div>       </div>     </div>     </body> </html>

Outcomes