Display tooltip on map on mouse hover

Question

Display tooltip on map on mouse hover

2.2k Views Asked by Sarah At 07 April 2025 at 04:32

I want to show a tooltip with an attribute when the user hovers over an area of the map for more than a few seconds.

In this example I am trying to show the state name when a user hovers over that state.

I have implemented the tooltip but the state name is not showing up. The tooltip is blank.

I'm also unsure how to implement the delay. Currently the tooltip appears as soon as the mouse hovers over the map.

I need this to work with an ArcGISDynamicMapServiceLayer.

Here is the fiddle:

tooltip fiddle

HTML:

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Select Features</title>

         <!-- Configure dojo for asynchronous module loading -->
         <script>
            var dojoConfig = {
                 async: true
             };
         </script>

         <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
         <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
         <script src="https://js.arcgis.com/3.18/"></script>
    </head>

<body class="claro">
     <div id="bcMain" data-dojo-type="dijit/layout/BorderContainer"
 data-dojo-props="design:'headline', liveSplitters:'true'">
         <div id="cpCenter" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
          <div id="divMap"></div>
          <div id="divRenderer">
          </div>
      </div>
            <div id="cpBottom" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:'true', region:'bottom'">
                <div id="divGrid"></div>
            </div>
        </div>
    </body>
</html>

JS:

// @formatter:off
require([
    "esri/map",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/FeatureLayer",
    "esri/toolbars/draw",
    "esri/graphic",
    "esri/tasks/query",


    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleMarkerSymbol",

    "dojo/ready",
    "dojo/parser",
    "dojo/on",
    "dojo/dom",

    "dojo/store/Memory",
    "dojo/date/locale",

    "dojo/_base/Color",
    "dojo/_base/declare",
    "dojo/_base/array",

    "dgrid/OnDemandGrid",
    "dgrid/Selection",

    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/form/Button"],
function (Map, ArcGISDynamicMapServiceLayer, FeatureLayer, Draw, Graphic,
          SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol, Query,
          ready, parser, on, dom,
          Memory, locale,
          Color, declare, array,
          Grid, Selection,
          BorderContainer, ContentPane, Button) {
// @formatter:on

    ready(function () {

        parser.parse();

        var sUrlUSAService = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer";

        var mapMain = new Map("divMap", {
            basemap: "satellite",
            center: [-119.65, 36.87],
            zoom: 4
        });

        var lyrUSA = new ArcGISDynamicMapServiceLayer(sUrlUSAService, {
            opacity: 0.5
        });
        lyrUSA.setVisibleLayers([2]);

        mapMain.addLayers([lyrUSA]);

        var infoTemplate = new esri.InfoTemplate("<b>State Name</b>","${STATE_NAME}");

        dojo.connect(mapMain, "onMouseMove", function(evt) {
        mapMain.graphics.clear();

        var graphic = new esri.Graphic(evt.mapPoint, null);

        graphic.setInfoTemplate(infoTemplate);

        mapMain.graphics.add(graphic);

        mapMain.infoWindow.show(evt.screenPoint, mapMain.getInfoWindowAnchor(evt.screenPoint));
        });


    });
});

CSS:

html, body, #divMap {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}

#bcMain {
width: 100%;
height: 100%;
}

#divRenderer {
position: absolute;
left: 27px;
bottom: 27px;
}

#cpBottom {
height: 100px;
}

#divGrid {
height: 100%;
}

.dgrid {
border: none;
}

.field-eqid {
width: 100px;
}

.field-datetime {
width: 160px;
}

.field-magnitude {
width: 60px;
}

.field-longitude {
width: 100px;
}

.field-latitude {
width: 100%;
}

Original Q&A

There are 1 best solutions below

**Sarah** · Answer 1

I believe I have a solution. infoTemplate with state name will popup after 4 seconds of hovering over a point on the map.

There needs to be a call back to the server because we are using ArcGISDynamicMapServiceLayer not a FeatureLayer.

Tooltip fiddle

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Select Features</title>

<!-- Configure dojo for asynchronous module loading -->
<script>
    var dojoConfig = {
        async: true
    };
</script>

<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<script src="https://js.arcgis.com/3.18/"></script>
</head>

<body class="claro">
<div id="bcMain" data-dojo-type="dijit/layout/BorderContainer"
 data-dojo-props="design:'headline', liveSplitters:'true'">
<div id="cpCenter" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
    <div id="divMap"></div>
    <div id="divRenderer">
    </div>
</div>
<div id="cpBottom" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:'true', region:'bottom'">
    <div id="divGrid"></div>
</div>
</div>
</body>
</html>

JS:

var mapMain, infoTemplate;
// @formatter:off
require([
    "esri/map",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/FeatureLayer",
    "esri/toolbars/draw",
    "esri/graphic",
    "esri/tasks/query",


    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleMarkerSymbol",

    "dojo/ready",
    "dojo/parser",
    "dojo/on",
    "dojo/dom",

    "dojo/store/Memory",
    "dojo/date/locale",

    "dojo/_base/Color",
    "dojo/_base/declare",
    "dojo/_base/array",

    "dgrid/OnDemandGrid",
    "dgrid/Selection",

    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/form/Button"],
function (Map, ArcGISDynamicMapServiceLayer, FeatureLayer, Draw, Graphic,
          SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol, Query,
          ready, parser, on, dom,
          Memory, locale,
          Color, declare, array,
          Grid, Selection,
          BorderContainer, ContentPane, Button) {
// @formatter:on

    ready(function () {

        parser.parse();

        var sUrlUSAService = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer";

        mapMain = new Map("divMap", {
            basemap: "satellite",
            center: [-119.65, 36.87],
            zoom: 4
        });

        var lyrUSA = new ArcGISDynamicMapServiceLayer(sUrlUSAService, {
            opacity: 0.5
        });
        lyrUSA.setVisibleLayers([2]);

        mapMain.addLayers([lyrUSA]);

        infoTemplate = new esri.InfoTemplate("<b>State Name</b>","${state_name}");


  queryTask = new esri.tasks.QueryTask(sUrlUSAService+"/2");

        //build query filter
  query = new esri.tasks.Query();
  query.returnGeometry = true;
  query.outFields = ["state_name"];
  dojo.connect(mapMain, "onMouseMove", executeQueryTask);
        //create the infoTemplate to be used in the infoWindow.
        //All ${attributeName} will be substituted with the attribute value for current feature.



    });
});
var lastMapPoint, screenPoint;
 function executeQueryTask(evt) {
    setTimeout(function(){
        if (lastMapPoint==evt.mapPoint) {
            query.geometry = evt.mapPoint;
            screenPoint = evt.screenPoint;
            event = evt;
            //Execute task and call showResults on completion
            queryTask.execute(query, showResults);
        }
    },4000);
    mapMain.infoWindow.hide();

    lastMapPoint = evt.mapPoint;
  }

  function showResults(featureSet) {
    //remove all graphics on the maps graphics layer
    mapMain.graphics.clear();

    var features = featureSet.features;

    //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the map.
    dojo.forEach(features,function(feature){
    var graphic = feature;
   // graphic.setSymbol(new esri.symbol.SimpleMarkerSymbol());

    //Set the infoTemplate.
    graphic.setInfoTemplate(infoTemplate);

    //Add graphic to the map graphics layer.
    mapMain.graphics.add(graphic);
    mapMain.infoWindow.setContent(graphic.getContent());
    mapMain.infoWindow.setTitle(graphic.getTitle());
    mapMain.infoWindow.show(screenPoint,mapMain.getInfoWindowAnchor(screenPoint));

    });

  }

CSS:

html, body, #divMap {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}

#bcMain {
width: 100%;
height: 100%;
}

#divRenderer {
position: absolute;
left: 27px;
bottom: 27px;
}

#cpBottom {
height: 100px;
}

#divGrid {
height: 100%;
}

.dgrid {
border: none;
}

.field-eqid {
width: 100px;
}

.field-datetime {
width: 160px;
}

.field-magnitude {
width: 60px;
}

.field-longitude {
width: 100px;
}

.field-latitude {
width: 100%;
}

Display tooltip on map on mouse hover

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in ESRI

Related Questions in ESRI-JAVASCRIPT-API

Trending Questions

Popular # Hahtags

Popular Questions