topic Re: how to add mouse hover event to a polygon in javascript in ArcGIS JavaScript Maps SDK Questions

how to add mouse hover event to a polygon in javascript

purnimamishra — Thu, 13 Apr 2017 09:18:22 GMT

hii,

thank u so much for replying me. now i can add polygon . but can not add any event to it.

kindly help me to add a mouse hover event to a particular polygon.

when i hover on a polygon its fill color should be changed. and show a popup.. i am copy-paste my code here.. u can check it and kindly help me..

my code....

<!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="[Get started with graphics - 4.3]">

<!--

ArcGIS API for JavaScript, https://js.arcgis.com

For more information about the get-started-graphics sample, read the original sample description at developers.arcgis.com.

https://developers.arcgis.com/javascript/latest/get-started-graphics/index.html

-->

<title>Get started with graphics - 4.3</title>

<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">

<script src="https://js.arcgis.com/4.3/"></script>

<style>

html,

body,

#viewDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

</style>

<script>

require([

"esri/Map",

"esri/views/MapView",

"esri/Graphic",

"esri/geometry/Point",

"esri/geometry/Polyline",

"esri/geometry/Polygon",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"dojo/domReady!"

], function(

Map, MapView,

Graphic, Point, Polyline, Polygon,

SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol

) {

var map = new Map({

basemap: "hybrid"

});

var view = new MapView({

center: [-80, 35],

container: "viewDiv",

map: map,

zoom: 3

});

/************************

* Create a polygon graphic

************************/

// Create a polygon geometry

var polygon = new Polygon({

rings: [

[-64.78, 32.3],

[-66.07, 18.45],

[-80.21, 25.78],[-92.21, 35.78],[-85.21, 32.78],

[-64.78, 32.3]

]

});

// Create a symbol for rendering the graphic

var fillSymbol = new SimpleFillSymbol({

color: [227, 139, 79, 0.8],

outline: { // autocasts as new SimpleLineSymbol()

color: [255, 255, 255],

width: 1

}

});

// Add the geometry and symbol to a new graphic

var polygonGraphic = new Graphic({

geometry: polygon,

symbol: fillSymbol

});

// Add the graphics to the view's graphics layer

view.graphics.addMany([polygonGraphic]);

});

</script>

</head>

<body>

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

</body>

</html>

thank u

Re: how to add mouse hover event to a polygon in javascript

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:36:59 GMT

Prunima,

Here is your code updated for that:

<!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="[Get started with graphics - 4.3]">
  <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the get-started-graphics sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/get-started-graphics/index.html
  -->
  <title>Get started with graphics - 4.3</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
  <script src="https://js.arcgis.com/4.3/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    var highfillSymbol, fillSymbol;
    require([
      "esri/core/watchUtils",
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/geometry/Point",
      "esri/geometry/Polyline",
      "esri/geometry/Polygon",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "dojo/_base/array",
      "dojo/domReady!"
    ], function(
      watchUtils, Map, MapView,
      Graphic, GraphicsLayer, Point, Polyline, Polygon,
      SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
      array
    ) {
      var layer = new GraphicsLayer({title: "myPolyGL"});

      var map = new Map({
        basemap: "hybrid",
        layers: [layer]
      });

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

      /************************
       * Create a polygon graphic
       ************************/

      // Create a polygon geometry
      var polygon = new Polygon({
        rings: [
          [-64.78, 32.3],
          [-66.07, 18.45],
          [-80.21, 25.78],
          [-92.21, 35.78],
          [-85.21, 32.78],
          [-64.78, 32.3]
        ]
      });

      // Create a symbol for rendering the graphic
      fillSymbol = new SimpleFillSymbol({
        color: [227, 139, 79, 0.8],
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 1
        }
      });

      // Create a highlight symbol for rendering the graphic
      highfillSymbol = new SimpleFillSymbol({
        color: [255, 139, 0, 0.8],
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 1
        }
      });

      // Add the geometry and symbol to a new graphic
      var polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: fillSymbol
      });

      // Add the graphics to the view's graphics layer
      layer.graphics.addMany([polygonGraphic]);

      function getGraphics(response) {
        //loop through all the layers.graphics and remove any with the highfillsymbol
        array.map(layer.graphics.items, function(gra){
          if(gra.symbol === highfillSymbol){
            layer.graphics.remove(gra);
          }
        });
        // the topmost graphic from the click location
        // from the graphic to the user
        if(response.results[0] && response.results[0].graphic){
          var graphic = response.results[0].graphic.clone();
          graphic.symbol = highfillSymbol;
          layer.graphics.add(graphic);
          view.popup.open({
            title: "Your Popup",
            location: response.results[0].mapPoint
          });
        }else{
          view.popup.close();
        }
      }

      view.then(function() {
        view.whenLayerView(layer).then(function(lview) {
          watchUtils.whenFalseOnce(lview, "updating", function(){
            // Set up a click event handler and retrieve the screen x, y coordinates
            view.on("pointer-move", function(evt) {
                var screenPoint = {
                  x: evt.x,
                  y: evt.y
                };

                // the hitTest() checks to see if any graphics in the view
                // intersect the given screen x, y coordinates
                view.hitTest(screenPoint)
                  .then( function(response){
                    getGraphics(response);
                  });
            });
          });
        });
      });
    });
  </script>
</head>

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

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: how to add mouse hover event to a polygon in javascript

purnimamishra — Sat, 15 Apr 2017 06:04:29 GMT

thank you so much...

if i need any more help can i ask u???

thank u

Purnima

On Thu, Apr 13, 2017 at 7:06 PM, Robert Scheitlin, GISP <geonet@esri.com>

Re: how to add mouse hover event to a polygon in javascript

purnimamishra — Sat, 15 Apr 2017 06:11:08 GMT

thank u for answering my question

thanks a ton

Purnima

Re: how to add mouse hover event to a polygon in javascript

RobertScheitlin__GISP — Tue, 18 Apr 2017 12:36:05 GMT

Prunima,

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question. If you have other questions then start a new question/thread since this question has been answered already.

Re: how to add mouse hover event to a polygon in javascript

AshokP — Sun, 30 Aug 2020 04:04:36 GMT

Where should i paste this code. we have already arcgis portal running, in that we need one maplayer need mousehover action. Shall paste the whole code in main config. Or shall i create a widget? I am confused .Please suggest

Re: how to add mouse hover event to a polygon in javascript

RobertScheitlin__GISP — Sun, 30 Aug 2020 18:29:36 GMT

Ashok,

This is the JS API space and it sounds like you are asking about Web App Builder or Experience Builder... Is that the case?