trigger query info window by hovering instead of clicking point feature

BulbulMajumder1 · ‎06-21-2016

Following is the code on which I am working. It is allowing to click the features to get the queried info window.

I am looking for the hover option, instead of clicking. Any help, please.

require([
 "esri/InfoTemplate", "esri/dijit/Legend", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/tasks/query", "esri/tasks/QueryTask",
  "esri/tasks/LegendLayer", "dojo/on", "dijit/registry", "esri/dijit/BasemapGallery", "esri/geometry/webMercatorUtils",
  "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer",
  "dojo/dom", "dojo/dom-construct", "dojo/parser", "dojo/_base/array",
  "dijit/layout/AccordionContainer", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
],
  function (
    Graphic, SpatialReference, Extent, GraphicsLayer, Color,
    InfoTemplate, Legend, SimpleFillSymbol, SimpleLineSymbol, Query, QueryTask,
    LegendLayer, on, registry, BasemapGallery, webMercatorUtils,
    ArcGISDynamicMapServiceLayer, FeatureLayer,
    dom, domConstruct, parser, arrayUtils,
    AccordionContainer, BorderContainer, ContentPane, TitlePane
  ) {

      parser.parse();

      var legendLayers = [];

      var map = new esri.Map("map", {
          basemap: "topo",
          center: [-110, 47],
          zoom: 6
      });

      /* Add the BASEMAP GALLERY from ESRI */

      var basemapGallery = new BasemapGallery(
          );

      /*********************************************************
        HISTORIC QUAKES FEATURE LAYER 
      *********************************************************/

      /* Create a new InfoTemplate for the MBMG SWAMP layer  2014-12-29 */ 
      var historicInfoTemplate = new InfoTemplate();
      historicInfoTemplate.setTitle("SWAMP Record ${GWICId}");
      historicInfoTemplate.setContent("<table>" +
           "<tr valign='top'><td style='white-space:nowrap;'>Event Date</td><td>${Date_}</td></tr>" +
           "<tr><td style='white-space:nowrap;'>Location</td><td style='white-space:nowrap;'>${Lat}, ${Long_}</td></tr>" +
           "<tr><td style='white-space:nowrap;'>Magnitude</td><td style='white-space:nowrap;'>${Mag}</td></tr>" +
           "<tr><td style='white-space:nowrap;'>Approx Location</td><td>${Approximate_Location}</td></tr>" +
           "<tr><td style='white-space:nowrap;'>Source</td><td>${Source}</td></tr>" +
           "<tr><td style='white-space:nowrap;'>Other Info</td><td><a href='${Link}' target='_newwindow'>${Link}</a></td></tr>" +
           "</table>");

      var historicQuakesFeatureLayer = new FeatureLayer("http://mbmgmap.mtech.edu/ArcGIS/rest/services/quakes/Historic_quakes/MapServer/0",
          {
              mode: FeatureLayer.MODE_SNAPSHOT,
              outFields: ["Date_", "Lat", "Long_", "Mag", "Approximate_Location", "Source", "Link"],
              infoTemplate: historicInfoTemplate
          }
          );

      map.addLayers([historicQuakesFeatureLayer]);

      /* Re-size the infoWindow to fit the standard contents */ 

      map.infoWindow.resize(350, 150);
   
  });

RobertScheitlin__GISP · ‎06-22-2016

Bulbul,

Here is a sample working with your data:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=
no">
    <title>Feature Layer - display results as an InfoWindow onHover</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <style>
        html,
        body,
        #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        #mapDiv {
            position: relative;
        }
    </style>

    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
        var map, to;
        require([
                "esri/map", "esri/InfoTemplate", "dojo/on", "esri/layers/FeatureLayer", "dojo/domReady!"
            ],
            function(
                Map, InfoTemplate, on, FeatureLayer
            ) {

                var map = new Map("mapDiv", {
                    basemap: "topo",
                    center: [-110, 47],
                    zoom: 6
                });

                /*********************************************************
                  HISTORIC QUAKES FEATURE LAYER
                *********************************************************/
                /* Create a new InfoTemplate for the MBMG SWAMP layer  2014-12-29 */
                var historicInfoTemplate = new InfoTemplate();
                historicInfoTemplate.setTitle("SWAMP Record ${GWICId}");
                historicInfoTemplate.setContent("<table>" +
                    "<tr valign='top'><td style='white-space:nowrap;'>Event Date</td><td>${Date_}</td></tr>" +
                    "<tr><td style='white-space:nowrap;'>Location</td><td style='white-space:nowrap;'>${Lat}, ${Long_}</td></tr>" +
                    "<tr><td style='white-space:nowrap;'>Magnitude</td><td style='white-space:nowrap;'>${Mag}</td></tr>" +
                    "<tr><td style='white-space:nowrap;'>Approx Location</td><td>${Approximate_Location}</td></tr>" +
                    "<tr><td style='white-space:nowrap;'>Source</td><td>${Source}</td></tr>" +
                    "<tr><td style='white-space:nowrap;'>Other Info</td><td><a href='${Link}' target='_newwindow'>${Link}</a></td></tr>" +
                    "</table>");

                var historicQuakesFeatureLayer = new FeatureLayer("http://mbmgmap.mtech.edu/ArcGIS/rest/services/quakes/Historic_quakes/MapServer/0", {
                    mode: FeatureLayer.MODE_SNAPSHOT,
                    outFields: ["Date_", "Lat", "Long_", "Mag", "Approximate_Location", "Source", "Link"],
                    infoTemplate: historicInfoTemplate
                });

                map.addLayers([historicQuakesFeatureLayer]);

                historicQuakesFeatureLayer.on("mouse-over", function(evt){
                  map.infoWindow.setFeatures([evt.graphic]);
                  map.infoWindow.show(evt.graphic.geometry);
                  clearTimeout(to);
                });

                historicQuakesFeatureLayer.on("mouse-out", function(evt){
                  to = setTimeout(function(){
                    map.infoWindow.hide();
                  }, 500);
                });

                /* Re-size the infoWindow to fit the standard contents */
                map.infoWindow.resize(350, 150);

            });
    </script>
</head>

<body class="tundra">
    <div id="mapDiv"></div>
</body>

</html>

View solution in original post

RobertScheitlin__GISP · ‎06-22-2016

Bulbul,

Here is a sample working with your data:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=
no">
    <title>Feature Layer - display results as an InfoWindow onHover</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <style>
        html,
        body,
        #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        #mapDiv {
            position: relative;
        }
    </style>

    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
        var map, to;
        require([
                "esri/map", "esri/InfoTemplate", "dojo/on", "esri/layers/FeatureLayer", "dojo/domReady!"
            ],
            function(
                Map, InfoTemplate, on, FeatureLayer
            ) {

                var map = new Map("mapDiv", {
                    basemap: "topo",
                    center: [-110, 47],
                    zoom: 6
                });

                /*********************************************************
                  HISTORIC QUAKES FEATURE LAYER
                *********************************************************/
                /* Create a new InfoTemplate for the MBMG SWAMP layer  2014-12-29 */
                var historicInfoTemplate = new InfoTemplate();
                historicInfoTemplate.setTitle("SWAMP Record ${GWICId}");
                historicInfoTemplate.setContent("<table>" +
                    "<tr valign='top'><td style='white-space:nowrap;'>Event Date</td><td>${Date_}</td></tr>" +
                    "<tr><td style='white-space:nowrap;'>Location</td><td style='white-space:nowrap;'>${Lat}, ${Long_}</td></tr>" +
                    "<tr><td style='white-space:nowrap;'>Magnitude</td><td style='white-space:nowrap;'>${Mag}</td></tr>" +
                    "<tr><td style='white-space:nowrap;'>Approx Location</td><td>${Approximate_Location}</td></tr>" +
                    "<tr><td style='white-space:nowrap;'>Source</td><td>${Source}</td></tr>" +
                    "<tr><td style='white-space:nowrap;'>Other Info</td><td><a href='${Link}' target='_newwindow'>${Link}</a></td></tr>" +
                    "</table>");

                var historicQuakesFeatureLayer = new FeatureLayer("http://mbmgmap.mtech.edu/ArcGIS/rest/services/quakes/Historic_quakes/MapServer/0", {
                    mode: FeatureLayer.MODE_SNAPSHOT,
                    outFields: ["Date_", "Lat", "Long_", "Mag", "Approximate_Location", "Source", "Link"],
                    infoTemplate: historicInfoTemplate
                });

                map.addLayers([historicQuakesFeatureLayer]);

                historicQuakesFeatureLayer.on("mouse-over", function(evt){
                  map.infoWindow.setFeatures([evt.graphic]);
                  map.infoWindow.show(evt.graphic.geometry);
                  clearTimeout(to);
                });

                historicQuakesFeatureLayer.on("mouse-out", function(evt){
                  to = setTimeout(function(){
                    map.infoWindow.hide();
                  }, 500);
                });

                /* Re-size the infoWindow to fit the standard contents */
                map.infoWindow.resize(350, 150);

            });
    </script>
</head>

<body class="tundra">
    <div id="mapDiv"></div>
</body>

</html>

BulbulMajumder1 · ‎06-22-2016

Thank you...this works.....Regards

BulbulMajumder1 · ‎06-23-2016

Hi there is there any way that I can actually go in there I mean in that pop up there is a hyperlink and it is not possible to use it....Any help will be appreciated.

Thanks

RobertScheitlin__GISP · ‎06-23-2016

Sure just adjust the timeout:

historicQuakesFeatureLayer.on("mouse-out", function(evt){

to = setTimeout(function(){

map.infoWindow.hide();

}, 2000);

});

BulbulMajumder1 · ‎06-23-2016

Thank you Robert, I appreciate it.

Regards
Bulbul