Hi
I am using GeoJSON service to plots my point on map and want to label them and for that purpose i create a check box. when event perform on checkbox feature should be labeled but when unchecked label should be hidden from map.
In following code when i checked to checkbox labeling is showing but when unchecked it is not remove/hide from map.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Geojson Label</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.13/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GeoJSONLayer",
], function(
Map,
MapView,
GeoJSONLayer,
) {
const map = new Map({
basemap: "satellite",
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [67.050987, 24.894766],
scale: 288895,
});
let labelClassDC = {
// autocasts as new LabelClassFAT()
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "white",
haloColor: "black",
haloSize: 2,
font: { // autocast as new Font()
family: "Playfair Display",
size: 10,
weight: "bold"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.f1"
}
}
let feature = new GeoJSONLayer({
url: "http://localhost:3000/fat",
labelsVisible: false,
labelingInfo: [labelClassDC],
})
map.add(feature)
view.ui.add(document.getElementById('label'), 'top-right')
document.getElementById('show').addEventListener('click', (e)=>{
feature.labelsVisible = e.target.checked
})
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="label">
<label>Dc</label>
<input type="checkbox" id="show">
</div>
</body>
</html>
Solved! Go to Solution.
Hi kawish abbas,
By pure coincidence (I didn't see your post) I posted a similar question today:
ArcGIS JavaScript: Toggle Labels On and Off?
And, as Noah Sager states above, it really is an issue with the 4.13 version of the ArcGIS API for JavaScript.
It worked fine in 4.12, and will work again in 4.14.
Please note: you can already use a prerelease version of the 4.14 API:
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
<script src="https://js.arcgis.com/4.14/"></script>
By the way, I have chosen to use an action button in the LayerList widget (instead of your checkbox).
You can find my working solution here:
Aan de slag met ArcGIS JavaScript - Labels aan- of uitzetten
Hope this helps. Please let us know what you think.
Cheers,
Egge-Jan
Thank you for the feedback. This is a known issue, and has been fixed for the next release (version 4.14, due out in December).
Hi kawish abbas,
By pure coincidence (I didn't see your post) I posted a similar question today:
ArcGIS JavaScript: Toggle Labels On and Off?
And, as Noah Sager states above, it really is an issue with the 4.13 version of the ArcGIS API for JavaScript.
It worked fine in 4.12, and will work again in 4.14.
Please note: you can already use a prerelease version of the 4.14 API:
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
<script src="https://js.arcgis.com/4.14/"></script>
By the way, I have chosen to use an action button in the LayerList widget (instead of your checkbox).
You can find my working solution here:
Aan de slag met ArcGIS JavaScript - Labels aan- of uitzetten
Hope this helps. Please let us know what you think.
Cheers,
Egge-Jan
Wao its wonderful Egge-Jan thank you so much and yes i have tested labeling with 4.12 version its working properly.
Basically i find such type of stuff that you had shared in which we can use button to LayerList widget for labeling.
Again thank you Egge-Jan
Hi kawish abbas,
Thanks for your reaction. If you think your question has been answered now, would you please be so kind to mark one of the answers as correct. In this way it will be clear to the community that your issue has been solved.
Cheers,
Egge-Jan