HOW TO

Display pop-ups using a mouse hover in ArcGIS API for JavaScript 4.x

Last Published: December 10, 2020

Summary

In ArcGIS API for JavaScript 4.x, pop-ups can display content from feature attributes using a mouse hover instead of a mouse click.

Procedure

The following instructions describe how to display pop-ups with a mouse hover instead of a mouse click using ArcGIS API for JavaScript.

  1. Open a text editor, for example, Notepad++.
  2. Start the <html> and the <head> tag for the script.
<html>

<head>
  1. Within the <head> tag, start the reference to ArcGIS API for JavaScript.
<meta charset="utf-8" /> 
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> 
   <title> 
     Display Popups on Mouse Hover | ArcGIS API for JavaScript 4.16 
   </title> 
 
 
   <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" /> 
   <script src="https://js.arcgis.com/4.16/"></script> 
  1. Specify the style to be used in the map.
<style> 
     html, 
     body, 
     #viewDiv { 
       padding: 0; 
       margin: 0; 
       height: 100%; 
       width: 100%; 
     } 
   </style>
  1. Start the script to specify the feature to use.
<script> 
     require([ 
       "esri/Map", 
       "esri/views/MapView", 
       "esri/layers/FeatureLayer" 
     ], function (Map, MapView, FeatureLayer) { 
 
 
       var map = new Map({ 
         basemap: "gray" 
       }); 
 
 
       var view = new MapView({ 
         container: "viewDiv", 
         map: map, 
         center: [-95.7129, 37.0902], 
         zoom: 5, 
         popup: { 
           autoOpenEnabled: false 
         } 
       }); 
 
 
       var featureLayer = new FeatureLayer({ 
         url: "<Service REST Url>", 
         popupTemplate: { 
           title: "{state_abbr}", 
           content: "{state_name}" 
         } 
       }); 
       map.add(featureLayer); 
  1. Within the same script, include the code to enable the mouse hover function and close the <script> tag.
view.on("pointer-move", function (event) { 
         view.hitTest(event).then(function (response) { 
           if (response.results.length) { 
             var graphic = response.results.filter(function (result) { 
               // check if the graphic belongs to the layer of interest 
               return result.graphic.layer === featureLayer; 
             })[0].graphic; 
             view.popup.open({ 
               location: graphic.geometry.centroid, 
               features: [graphic] 
             }); 
           } else { 
             view.popup.close(); 
           } 
         }); 
       }); 
     }); 
   </script> 

  1. Close all the opened tags and create the <body> tag.
</head> 
 
 <body> 
   <div id="viewDiv"></div> 
 </body> 

 </html> 
  1. Save the file with the .html extension. The following is a sample of the entire script:
<html>

<head>

<meta charset="utf-8" /> 
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> 
   <title> 
     Display Popups on Mouse Hover | ArcGIS API for JavaScript 4.16 
   </title> 
 
 
   <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" /> 
   <script src="https://js.arcgis.com/4.16/"></script> 

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

<script> 
     require([ 
       "esri/Map", 
       "esri/views/MapView", 
       "esri/layers/FeatureLayer" 
     ], function (Map, MapView, FeatureLayer) { 
 
 
       var map = new Map({ 
         basemap: "gray" 
       }); 
 
 
       var view = new MapView({ 
         container: "viewDiv", 
         map: map, 
         center: [-95.7129, 37.0902], 
         zoom: 5, 
         popup: { 
           autoOpenEnabled: false 
         } 
       }); 
 
 
       var featureLayer = new FeatureLayer({ 
         url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2", 
         popupTemplate: { 
           title: "{state_abbr}", 
           content: "{state_name}" 
         } 
       }); 

       map.add(featureLayer);

view.on("pointer-move", function (event) { 
         view.hitTest(event).then(function (response) { 
           if (response.results.length) { 
             var graphic = response.results.filter(function (result) { 
               // check if the graphic belongs to the layer of interest 
               return result.graphic.layer === featureLayer; 
             })[0].graphic; 
             view.popup.open({ 
               location: graphic.geometry.centroid, 
               features: [graphic] 
             }); 
           } else { 
             view.popup.close(); 
           } 
         }); 
       }); 
     }); 
   </script> 

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

 </html> 

Article ID: 000024297

Software:
  • ArcGIS API for JavaScript 4 x

Receive notifications and find solutions for new or common issues

Get summarized answers and video solutions from our new AI chatbot.

Download the Esri Support App

Related Information

Discover more on this topic

Get help from ArcGIS experts

Contact technical support

Download the Esri Support App

Go to download options