Current basemap in custom widget

114
10
01-21-2020 04:55 AM
Highlighted
New Contributor II

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 

Reply
0 Kudos
10 Replies
Highlighted
MVP Esteemed Contributor

Matej,

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

Reply
0 Kudos
Highlighted
New Contributor II

Dear Robert,

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

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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?

Reply
0 Kudos
Highlighted
New Contributor II

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> 
 
Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

Matej,

   Wow this is off on so many levels...

  1. You have posted this question in the WAB custom widgets forum, but this question seems to have nothing to do with WAB.
  2. Next you are using JS API 3.0... That is 28 major versions behind the current release...
  3. 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?

Reply
0 Kudos
Highlighted
New Contributor II

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

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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. 

Reply
0 Kudos
Highlighted
New Contributor II

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 

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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.

Reply
0 Kudos