I am using arcgisAPI 4.5.
I have two points on map view. I want to highlight second point using a flag/checkbox.
Do I need to remove all graphic on the screen and add them back again using a different marker symbol
or is there a way to identify and update the point using id ?
Here is my code :
Nachi,
If you assign an Id attribute to your point then you can loop through the view.graphics array to find that point with that Id and change it's symbol.
Thank you. Could you show me an example of how to trigger mouse events on points or polylines in view.graphic layer.
For example when I click on a point I want to change outline color , so that it indicates its selected.
Nachi,
Here is a sample (requires 4.5):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="[FeatureLayer - 4.5]">
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the layers-featurelayer sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/layers-featurelayer/index.html
-->
<title>FeatureLayer - 4.3</title>
<script>
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
};
</script>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dojo/domReady!"
],
function(
Map, MapView,
FeatureLayer
) {
var map = new Map({
basemap: "hybrid"
});
var view = new MapView({
container: "viewDiv",
map: map,
extent: { // autocasts as new Extent()
xmin: -9177811,
ymin: 4247000,
xmax: -9176791,
ymax: 4247784,
spatialReference: 102100
}
});
/********************
* Add feature layer
********************/
// Carbon storage of trees in Warren Wilson College.
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
});
map.add(featureLayer);
// declare a variable to hold layerView
var featureLayerView;
// once the layerView has been created by the view, assign the above variable
view.whenLayerView(featureLayer).then(function(lv){
featureLayerView = lv;
});
var highlightSelect;
view.on("click", function(e){
// this function returns a promise or null, which is weird
var hitTestPromise = featureLayerView.hitTest(e.x, e.y);
if (hitTestPromise){
hitTestPromise.then(function(results){
if (highlightSelect) {
highlightSelect.remove();
}
highlightSelect = featureLayerView.highlight(results.attributes["FID"]);
});
} else {
if (highlightSelect) {
highlightSelect.remove();
}
console.log("No Results");
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>