topic Re: Current basemap in custom widget in Web AppBuilder Custom Widgets Questions

Current basemap in custom widget

MatejCunder1 — Tue, 21 Jan 2020 12:55:19 GMT

Hello everyone,

I have a custom search widget, that needs basemap in order to work. At the moment the widget is set to work with the basemap defined with custom map added to the map:

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/MapServer');
map.addLayer(campusMap);

I want the widget to add current basemap, presen in the app, instead of the defined campusMap

Re: Current basemap in custom widget

RobertScheitlin__GISP — Tue, 21 Jan 2020 15:05:53 GMT

Matej,

You can get the current basemap using this.map.getLayer(this.map.layerIds[0]); The basemap is almost always the 0 index layer.

Re: Current basemap in custom widget

MatejCunder1 — Wed, 22 Jan 2020 07:29:37 GMT

Dear Robert,

thank you for your reply. Unfortunately I get the error "Cannot read property '0' of undefined".

Re: Current basemap in custom widget

RobertScheitlin__GISP — Wed, 22 Jan 2020 13:35:16 GMT

Matej,

Sounds like you function that you are attempting to do this in is out of scope then. If you do console.log(this.map.layerIds); is the returned result null?

Re: Current basemap in custom widget

RobertScheitlin__GISP — Wed, 22 Jan 2020 14:30:27 GMT

Matej,

Wow this is off on so many levels...

You have posted this question in the WAB custom widgets forum, but this question seems to have nothing to do with WAB.
Next you are using JS API 3.0... That is 28 major versions behind the current release...
So now that I understand; you are using very old API version and this is not about WAB it complete changes your question for me.

I want the widget to add current basemap, present in the app, instead of the defined campusMap

I am not sure what the default basemap was for version 3.0 of the API. Not sure how you are even programming against such an old API version. Can you still get access to the documentation?

Re: Current basemap in custom widget

MatejCunder1 — Wed, 22 Jan 2020 15:02:31 GMT

Hi Rober,

there is one level which is even more off...I am not a developer.

I found this script on the web and tried to make it work for my purpose. So looks like we will have to get it done by outsourcing, which is fine. I didn't know how far off was it.

Thanks for your time and help. I will notify you if we get it to work, because it's a functionality that I miss in current widgets.

BR,

Matej

Re: Current basemap in custom widget

RobertScheitlin__GISP — Wed, 22 Jan 2020 15:25:06 GMT

Matej,

Now that I understand your situation better I can help. When you say "I want the widget to add current basemap" which basemap are you speaking of?

Being that you are not a developer maybe you are not using the correct term. A basemap is the maps main background data. Currently your application (a widget is actually something complete different) uses the "Topografske_karte_ARSO_nova_MGI3912" map service from your server.

Re: Current basemap in custom widget

MatejCunder1 — Thu, 23 Jan 2020 10:21:25 GMT

Hi Rober,

the tools doesn't need to add a basemap. It has to recognise the current map as a background layer where the results of the query will be present. Instead of current "Topografske_karte_ARSO_nova_MGI3912" map service I need the widget to use whatever basemap is currently displayed in the APP.

I copied the code from standalone application and tried to make a widget out of it. The code I posted is actually widget.js file.

The standalone application looks like this :

Query Demo

Re: Current basemap in custom widget

RobertScheitlin__GISP — Thu, 23 Jan 2020 15:05:23 GMT

Matej,

OK if you are attempting to add that code to a widget.js file in WAB then you will need to outsource this, as you can not just add html and js code to a widgets.js file and the way the map is interacted with in a widget is different.

Re: Current basemap in custom widget

MatejCunder1 — Fri, 24 Jan 2020 12:22:30 GMT

Rober,

thank you for your time and effort. As I said, I will notify you when I get the widget to work.

BR,

Matej

Re: Current basemap in custom widget

MatejCunder1 — Sun, 12 Dec 2021 08:41:46 GMT

Rober,

I get the name of the current basemap My widget only needs basemap to show the results of the query. 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. Here's the whole code:

<!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="https://community.esri.com//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>