Hi All
I have a map that has a sketch widget. Now I want to hide that sketch widget if a certain variable contains data and only show the map. But if that certain variable is null or empty I want the map to show the sketch widget. I am using JavaScript. I hope this question does make sense. Please advise.
Kind Regards
Siyabonga Kubeka
Solved! Go to Solution.
Here is a sample that shows that:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Basic Querying in FeatureLayer - 4.15</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#optionsDiv {
background-color: white;
color: black;
padding: 6px;
max-width: 400px;
}
</style>
<script>
require([
"esri/widgets/Sketch",
"esri/Map",
"esri/Graphic",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer"
], function(Sketch, Map, Graphic, MapView, FeatureLayer, GraphicsLayer) {
// Crime in SF
var layer = new FeatureLayer({
// autocasts as new PortalItem()
portalItem: {
id: "234d2e3f6f554e0e84757662469c26d3"
},
outFields: ["*"]
});
const layer2 = new GraphicsLayer();
var map = new Map({
basemap: "gray",
layers: [layer, layer2]
});
var view = new MapView({
container: "viewDiv",
map: map,
popup: {
autoOpenEnabled: false,
dockEnabled: true,
dockOptions: {
// dock popup at bottom-right side of view
buttonEnabled: false,
breakpoint: false,
position: "bottom-right"
}
}
});
const sketch = new Sketch({
layer: layer2,
view: view,
creationMode: "update"
});
view.ui.add("optionsDiv", "top-right");
view.ui.add(sketch, "top-right");
//create graphic for mouse point click
var pointGraphic = new Graphic({
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [0, 0, 139],
outline: {
color: [255, 255, 255],
width: 1.5
}
}
});
layer.load().then(function() {
// Set the view extent to the data extent
view.extent = layer.fullExtent;
layer.popupTemplate = layer.createPopupTemplate();
});
view.on("click", function(event) {
view.graphics.remove(pointGraphic);
queryFeatures(event);
});
function queryFeatures(screenPoint) {
const point = view.toMap(screenPoint);
layer
.queryFeatures({
geometry: point,
spatialRelationship: "intersects",
returnGeometry: false,
outFields: ["*"]
})
.then(function(featureSet) {
// set graphic location to mouse pointer and add to mapview
pointGraphic.geometry = point;
view.graphics.add(pointGraphic);
if(featureSet.features[0].attributes.Point_Count < 150){
if(view.ui.find(sketch.id)){
view.ui.remove(sketch);
}
}else{
if(!view.ui.find(sketch.id)){
view.ui.add(sketch, "top-right");
}
}
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="optionsDiv" class="esri-widget">
<p>
click a point on the map. If the point count is less than 150 the Sketch will be hidden.
</p>
</div>
</body>
</html>
Here is a sample that shows that:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Basic Querying in FeatureLayer - 4.15</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#optionsDiv {
background-color: white;
color: black;
padding: 6px;
max-width: 400px;
}
</style>
<script>
require([
"esri/widgets/Sketch",
"esri/Map",
"esri/Graphic",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer"
], function(Sketch, Map, Graphic, MapView, FeatureLayer, GraphicsLayer) {
// Crime in SF
var layer = new FeatureLayer({
// autocasts as new PortalItem()
portalItem: {
id: "234d2e3f6f554e0e84757662469c26d3"
},
outFields: ["*"]
});
const layer2 = new GraphicsLayer();
var map = new Map({
basemap: "gray",
layers: [layer, layer2]
});
var view = new MapView({
container: "viewDiv",
map: map,
popup: {
autoOpenEnabled: false,
dockEnabled: true,
dockOptions: {
// dock popup at bottom-right side of view
buttonEnabled: false,
breakpoint: false,
position: "bottom-right"
}
}
});
const sketch = new Sketch({
layer: layer2,
view: view,
creationMode: "update"
});
view.ui.add("optionsDiv", "top-right");
view.ui.add(sketch, "top-right");
//create graphic for mouse point click
var pointGraphic = new Graphic({
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [0, 0, 139],
outline: {
color: [255, 255, 255],
width: 1.5
}
}
});
layer.load().then(function() {
// Set the view extent to the data extent
view.extent = layer.fullExtent;
layer.popupTemplate = layer.createPopupTemplate();
});
view.on("click", function(event) {
view.graphics.remove(pointGraphic);
queryFeatures(event);
});
function queryFeatures(screenPoint) {
const point = view.toMap(screenPoint);
layer
.queryFeatures({
geometry: point,
spatialRelationship: "intersects",
returnGeometry: false,
outFields: ["*"]
})
.then(function(featureSet) {
// set graphic location to mouse pointer and add to mapview
pointGraphic.geometry = point;
view.graphics.add(pointGraphic);
if(featureSet.features[0].attributes.Point_Count < 150){
if(view.ui.find(sketch.id)){
view.ui.remove(sketch);
}
}else{
if(!view.ui.find(sketch.id)){
view.ui.add(sketch, "top-right");
}
}
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="optionsDiv" class="esri-widget">
<p>
click a point on the map. If the point count is less than 150 the Sketch will be hidden.
</p>
</div>
</body>
</html>
Hi Robert,
Thank you very much. It worked.
Hi Siyabonga Kubeka,
You can add a widget to a view with view.ui.add()
. Similarly you can remove this same widget, to effectively hide it, with view.ui.remove()
. So, with an if - else
statement you can accomplish what you want.
Please have a look at this example with a similar use case which I have published recently on GeoNet: https://community.esri.com/people/EPolle_TensingInternational/blog/2020/06/14/arcgis-javascript-tuto...
With the Compass widget you can reset the compass orientation to 0 (i.e. with north at the top of the view). But you really only need this widget when the map is rotated, which most often is not the case. So, by checking the rotation of the view I decide to either show (add) or hide (remove) the Compass widget:
watchUtils.whenTrue(view, "stationary", function() {
if (view.rotation == 0){
view.ui.remove(compassWidget);
} else {
view.ui.add(compassWidget, "top-left");
}
})
(Full code in the blog post mentioned above)
right-click + drag
with the mouse) to rotate it and aww there it is again!Is this useful to you?
Cheers,
Egge-Jan
Hi Egge-Jan Polle
Thank you very much.
Hi Siyabonga Kubeka,
If you think your question has been answered you can close it by marking one of the answers as the correct one. Either the answer given by me or the one given by Robert Scheitlin, GISP, depending on which was most useful to you. In this way it will be clear to other users of this forum with the same question that they can find their answer here.
Cheers,
Egge-Jan