AnsweredAssumed Answered

Custom query widget

Question asked by matej.cunder on Aug 6, 2019
Latest reply on Sep 25, 2019 by matej.cunder

Hello everyone,

 

I have a script, that works as a standalone application, but would like to make it a Custom widget. I don't know anything about javascript, so would need help on how to make my script into widget.js and widget.html file.

The widget is intended as a structured query. First you make a query on kadaster administrative unit and then on the filtered parcels, which belong only to that kadaster unit. I named my variables as State and City, so it's easier to imagine what I mean.

Second think I would like to add is query, that would work both with names of the Administrative unit and also with administrative numbers of units. At the moment the search works only with names.

 

Thank you in advance,

Matej

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
     <html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> 
    <!--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>Dojo Dropdown Demo</title> 
 
    <link rel="stylesheet" href="//serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css"> 
    <!-- ArcGIS API for JavaScript --> 
    <script type="text/javascript" src="https://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0compact">
   
    </script> 
 
 
 
    <script type="text/javascript"> 
 
      dojo.require("esri.map"); 
      dojo.require("esri.tasks.Query"); 
      dojo.require("dijit.form.FilteringSelect"); 
      dojo.require("dojo.data.ItemFileReadStore"); 
       
      dojo.addOnLoad(init); 
 
      var map,queryTask, queryTask1; 
 
      function init() {      
        queryTask = new esri.tasks.QueryTask("https://gis.arso.gov.si/arcgis/rest/services/Portal/Atlasokolja_javni_PORTAL/MapServer/511"); 
        queryTask1 = new esri.tasks.QueryTask("https://gis.arso.gov.si/arcgis/rest/services/Portal/Atlasokolja_javni_PORTAL/MapServer/5");
        map = new esri.Map("map"); 
     
        dojo.connect(map, "onLoad", function() { 
          //populate dropdown  
          executeQuery();
            //executeQuerySecond();           
        }); 
 
        // Add the campus basemap  
        var campusMap = new esri.layers.ArcGISTiledMapServiceLayer('https://gis.arso.gov.si/arcgis/rest/services/Topografske_karte_ARSO_nova_MGI3912/MapServer'); 
        map.addLayer(campusMap); 
      } 
 
      function executeQuery() { 
 
           
        //execute the query task then populate the dropdown menu with list of building names  
        var query = new esri.tasks.Query(); 
        query.returnGeometry = true; 
        query.outFields = ["KO_IME", "KO_ID","OBJECTID"]; 
        query.where = "1=1"; 
        queryTask.execute(query,populateMenu); 
         
      } 
      function populateMenu(featureSet){ 
         var items = dojo.map(featureSet.features, function (item) { 
                    return { 
                        name: item.attributes.KO_IME,
                              ko_id: item.attributes.KO_ID,          
                        id:item.attributes.OBJECTID,
                              label: item.attributes.KO_ID + " - " + item.attributes.KO_IME
                    }; 
                }); 
             var data = { 
              identifier:"id", 
              items:items 
              }; 
             var objStore = new dojo.data.ItemFileReadStore({data:data}); 
               
               
          var filteringSelect = new dijit.form.FilteringSelect({ 
            style:'width:300px;', 
            placeHolder:'CHOOSE STATE', 
            store:objStore, 
            required:false, 
            labelAttr:'label',
            fetchProperties:[{sort:[{attribute:'name'}]} ],
            onChange:function(val){
               
                if(val){                     
                         executeQuerySecond(this.item.ko_id[0]);
                  var selectQuery = new esri.tasks.Query(); 
                  selectQuery.returnGeometry = true; 
                  selectQuery.objectIds = [val]; 
                  queryTask.execute(selectQuery,function(featureSet){
                     
                    map.graphics.clear(); //clear any existing map graphics  
                    //get the first feature and add to map  
                        if(featureSet.features.length > 0){ 
                          var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
                           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
                           new dojo.Color([255,0,0]), 10),new dojo.Color([255,255,0,0.25])); 
                          var feature = featureSet.features[0]; 
                          var graphic = new esri.Graphic(feature.geometry,symbol); 
                          map.graphics.add(graphic);
                                   var Obcina = graphic.geometry.getExtent();  
                                   map.setExtent(Obcina);                               
                    } 
                }); 
                } 
            }             
          },'STATE'); 
 
 
 
 
      } 
  function executeQuerySecond(sifko) { 
 
           
        //execute the query task then populate the dropdown menu with list of building names  
        var izbor = new esri.tasks.Query(); 
        izbor.returnGeometry = true; 
        izbor.outFields = ["PARCELA","SIFKO","OBJECTID"]; 
        izbor.where = "SIFKO = '" + sifko + "'";; 
        queryTask1.execute(izbor,populateMenu1); 
         
      }
var global_filteringSelect1 = undefined;      
      function populateMenu1(featureSet){ 
       
         var items = dojo.map(featureSet.features, function (item) { 
                    return { 
                        name: item.attributes.PARCELA,
                              sifko: item.attributes.SIFKO,                              
                        id1:item.attributes.OBJECTID 
                    }; 
                }); 
                    
             var data = { 
              identifier:"id1", 
              items:items 
              }; 
             var objStore = new dojo.data.ItemFileReadStore({data:data}); 
               
               if(global_filteringSelect1 != undefined){
                    global_filteringSelect1.destroy();
               }
               let select_container = document.getElementById("select-container");
               let new_input_node = document.createElement("input");
               new_input_node.id = "CITY";
               select_container.appendChild(new_input_node);
               
          global_filteringSelect1 = new dijit.form.FilteringSelect({ 
           
               style:'width:300px;', 
            placeHolder:'CHOOSE CITY', 
            store:objStore, 
            required:false, 
            labelAttr:'name', 
            fetchProperties:{sort:[{attribute:'name'}]}, 
            onChange:function(val){ 
                if(val){ 
                  var selectQuery1 = new esri.tasks.Query(); 
                  selectQuery1.returnGeometry = true; 
                  selectQuery1.objectIds = [val]; 
                  queryTask1.execute(selectQuery1,function(featureSet){
                         
                    map.graphics.clear(); //clear any existing map graphics  
                    //get the first feature and add to map  
                        if(featureSet.features.length > 0){ 
                          var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
                           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
                           new dojo.Color([255,0,0]), 2),new dojo.Color([255,255,0,0.25])); 
                          var feature = featureSet.features[0]; 
                          var graphic = new esri.Graphic(feature.geometry,symbol); 
                          map.graphics.add(graphic);
                              var Parcela = graphic.geometry.getExtent();  
                              map.setExtent(Parcela);                                 
                    } 
                }); 
                } 
            }             
          },'CITY');  
      } 
    </script> 
  </head> 
 
  <body class='claro' style="font-family: Arial Unicode MS,Arial,sans-serif;"> 
     <div id="select-container">
          <input id='STATE'/>
     </div>
     <div id="wrapper" style="position: relative; width: 700px; height: 500px; border:1px solid #000;"> 
      <!-- Map canvas --> 
      <div id="map" style="position: absolute; width: 700px; height: 500px; z-index: 1;"></div> 
    </div>
     
  </body> 
 
</html> 
 

Outcomes