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
Matej,
You can get the current basemap using this.map.getLayer(this.map.layerIds[0]); The basemap is almost always the 0 index layer.
Dear Robert,
thank you for your reply. Unfortunately I get the error "Cannot read property '0' of undefined".
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?
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>
Matej,
Wow this is off on so many levels...
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?
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
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.
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 :
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.