nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Map hint box

TimWitt2

Hey everyone,

I was wondering if there is some way to have a hint next to your mouse cursor when you enter the map area. I know how to fire it, but I don;t know how to create it.

As an example, click on the point or polygon button in this example to see what I mean:

Maps Toolbar‌

Thanks!

Tim

Trouver plus de publications taguées avec

Accepted answers

rscheitlin

Tim,

Here is an Updated sample.

<!DOCTYPE html>
<html>  
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>Map Tip Sample</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">    
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
  <style> 
    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    #map{
      padding:0;
    }
    .map .tooltip{
      position:fixed;
      overflow:hidden;
      display: block;
      color: black;
      background-color: #FFFFFF;
      border: 1px solid gray;
      padding: 5px;
      border-radius:4px;
      font-size:11px;
      font-family:Verdana;
      z-index: 9999;
    }
  </style> 
  
  <script src="http://js.arcgis.com/3.10/"></script>
  <script> 
    var map;
    require([
      "esri/map",
      "dojo/parser",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      Map, parser
    ) {
      parser.parse();

      map = new Map("map", {
        basemap: "topo",
        center: [-105.255, 40.022],
        zoom: 13
      });

      var tip = "I'm over the map";
      var toolTip = dojo.create("div", { "class": "tooltip", "innerHTML": tip}, map.container);
      toolTip.style.position = "fixed";
        
      map.on("mouse-move",function (evt) {
        var px, py;          
        if (evt.clientX || evt.pageY) {
          px = evt.clientX;
          py = evt.clientY;
        } else {
          px = evt.clientX + win.body().scrollLeft - win.body().clientLeft;
          py = evt.clientY + win.body().scrollTop - win.body().clientTop;
        }

        toolTip.style.display = "none";
        toolTip.style.top = (py + 20) + 'px';
        toolTip.style.left = (px + 20) + 'px';
        toolTip.style.display = "block";
      });
        
      map.on("mouse-out",function (e) {
        toolTip.style.display = "none";
      });
    });
  </script> 
</head> 

<body class="claro"> 
  <div data-dojo-type="dijit/layout/BorderContainer" 
       data-dojo-props="design:'headline', gutters:false" 
       style="width:100%;height:100%;margin:0;">
    <div id="map" 
         data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region:'center'" 
         style="padding:0;" />
  </div>
</body> 

</html>

All comments

rscheitlin

I updated my sample for those who view it in the future.

TimWitt2

No worries, you pointed me in the right direction. Not to mention, I would be happy, if I could just throw something like this together!

And yes you are right, I had to "translate" it into AMD. Don't want that pesky Legacy around

	var tip = "Click the map to get an address!";
	var tooltip = domConstruct.create("div", { "class": "tooltip", "innerHTML": tip }, map.container);
	domStyle.set(tooltip, "position", "fixed");
	var toolFunc = map.on("mouse-move", function(evt){
	var px, py;
	if (evt.clientX \|\| evt.pageY) {
	px = evt.clientX;
	py = evt.clientY;
	} else {
	px = evt.clientX + win.body().scrollLeft - win.body().clientLeft;
	py = evt.clientY + win.body().scrollTop - win.body().clientTop;
	}
	// dojo.style(tooltip, "display", "none");
	tooltip.style.display = "none";
	domStyle.set(tooltip, { left: (px + 15) + "px", top: (py) + "px" });
	// dojo.style(tooltip, "display", "");
	tooltip.style.display = "";
	// console.log("updated tooltip pos.");
		});
	map.on( "mouse-out", function(evt){
	tooltip.style.display = "none";
	});

rscheitlin

Tim,

Sorry I did not notice that when I threw together the sample. The one you found works great just needs to be updated to AMD.

TimWitt2

Robert,

I found a working example, thanks for the help!

Edit fiddle - JSFiddle‌

Tim

TimWitt2

Hey Robert,

after some testing I noticed that some parts of the map act funky once I hover over the map.

For example on the bottom right over the ESRI logo, text starts popping up and when I open the basemap layer tab, depending if my mouse is over the map or not text appears and disappears.

What could cause that?

Tim

TimWitt2

Thanks Robert!

rscheitlin

Tim,

Here is an Updated sample.

<!DOCTYPE html>
<html>  
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>Map Tip Sample</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">    
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
  <style> 
    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    #map{
      padding:0;
    }
    .map .tooltip{
      position:fixed;
      overflow:hidden;
      display: block;
      color: black;
      background-color: #FFFFFF;
      border: 1px solid gray;
      padding: 5px;
      border-radius:4px;
      font-size:11px;
      font-family:Verdana;
      z-index: 9999;
    }
  </style> 
  
  <script src="http://js.arcgis.com/3.10/"></script>
  <script> 
    var map;
    require([
      "esri/map",
      "dojo/parser",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      Map, parser
    ) {
      parser.parse();

      map = new Map("map", {
        basemap: "topo",
        center: [-105.255, 40.022],
        zoom: 13
      });

      var tip = "I'm over the map";
      var toolTip = dojo.create("div", { "class": "tooltip", "innerHTML": tip}, map.container);
      toolTip.style.position = "fixed";
        
      map.on("mouse-move",function (evt) {
        var px, py;          
        if (evt.clientX || evt.pageY) {
          px = evt.clientX;
          py = evt.clientY;
        } else {
          px = evt.clientX + win.body().scrollLeft - win.body().clientLeft;
          py = evt.clientY + win.body().scrollTop - win.body().clientTop;
        }

        toolTip.style.display = "none";
        toolTip.style.top = (py + 20) + 'px';
        toolTip.style.left = (px + 20) + 'px';
        toolTip.style.display = "block";
      });
        
      map.on("mouse-out",function (e) {
        toolTip.style.display = "none";
      });
    });
  </script> 
</head> 

<body class="claro"> 
  <div data-dojo-type="dijit/layout/BorderContainer" 
       data-dojo-props="design:'headline', gutters:false" 
       style="width:100%;height:100%;margin:0;">
    <div id="map" 
         data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region:'center'" 
         style="padding:0;" />
  </div>
</body> 

</html>

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.