Highlighting points on map view

NachiChidambaram · ‎11-08-2017

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 :

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
 <title>Intro to graphics - 4.5</title>

 <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/Graphic",
 "dojo/domReady!"
 ], function(
 Map, MapView, Graphic,
 ) {

 var map = new Map({
 basemap: "hybrid"
 });

 var view = new MapView({
 center: [-80, 35],
 container: "viewDiv",
 map: map,
 zoom: 3
 });

 createPoint(-49.97,41.73);
 createPoint(-49.97,47.73);

 function createPoint(lng, lat){
 var point = {
 type: "point",
 longitude: lng,
 latitude: lat
 };

 var markerSymbol = {
 type: "simple-marker",
 color: [226, 119, 40],
 outline: { 
 color: [255, 255, 255],
 width: 2
 }
 };

 var pointGraphic = new Graphic({
 geometry: point,
 symbol: markerSymbol
 });

 view.graphics.add(pointGraphic);
 
 } 

 });
 </script>
</head>

<body>
 <div id="viewDiv"></div>
</body>

</html>

RobertScheitlin__GISP · ‎11-09-2017

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.

NachiChidambaram · ‎11-09-2017

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.

RobertScheitlin__GISP · ‎11-09-2017

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍