Map hint box

TimWitt2 · ‎08-05-2014

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

RobertScheitlin__GISP · ‎08-05-2014

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>

View solution in original post

RobertScheitlin__GISP · ‎08-05-2014

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>

TimWitt2 · ‎08-05-2014

Thanks Robert!

TimWitt2 · ‎08-05-2014

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 · ‎08-05-2014

Robert,

I found a working example, thanks for the help!

Edit fiddle - JSFiddle‌

Tim

RobertScheitlin__GISP · ‎08-05-2014

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 · ‎08-05-2014

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";
	});

RobertScheitlin__GISP · ‎08-05-2014

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

TimWitt2 · ‎08-05-2014

I marked it as answer since it is in AMD, thanks!