Community
Select to view content in your preferred language

Hoover Javascript API

1314
7
04-26-2012 02:34 PM
akashmagoon
by
Emerging Contributor
‎04-26-2012 02:34 PM
I added onto a sample.

The circle represent pushpin and when you click on it, it will open a info window.

How can i make the info window popup by hovering.

I tried the Mouseover call but it didnt work.

Heres my current code.. Please edit it. Thanks in advance.


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
     
      var map;
      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-14052134,"ymin":5562249,"xmax":-13179529,"ymax":5897349,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:initExtent});
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        dojo.connect(map, "onMouseOver", function() {
          dojo.connect(dijit.byId('map'), 'resize', map, map.resize);

          var points = {
            "points": [[-122.63,45.51],[-122.56,45.51],[-122.56,45.55],[-122.62,45.00],[-122.59,45.53]],
            "spatialReference": ({ "wkid": 4326 })
          };
          var mp = new esri.geometry.Multipoint(points);
          var wm_mp = esri.geometry.geographicToWebMercator(mp);

          var sms = new esri.symbol.SimpleMarkerSymbol();
          var infoTemplate = new esri.InfoTemplate("Bob <br> Lives in the USA", "");
          var graphic = new esri.Graphic(wm_mp, sms, '', infoTemplate);

          map.graphics.add(graphic);
        });
      }
      dojo.ready(init);
    </script>
  </head>
 
  <body class="tundra">
    <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'">
      </div>
    </div>
  </body>
</html>
0 Kudos
7 Replies
ShreyasVakil
by
Frequent Contributor
‎04-26-2012 04:48 PM
I have made some changes to your code to enable hover on the points. Please see if this works for you.
<!doctype html>
<html lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"
        />
        <title></title>
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
        <style>
            html, body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            #map {
                margin: 0;
                padding: 0;
            }
        </style>
        <script>
            var dojoConfig = {
                parseOnLoad: true
            };
        </script>
        <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
        <script>
            dojo.require("dijit.layout.BorderContainer");
            dojo.require("dijit.layout.ContentPane");
   dojo.require("esri.dijit.InfoWindow");
            dojo.require("esri.map");

            var map;

            function init() {
                var initExtent = new esri.geometry.Extent({
                    "xmin": -14052134,
                    "ymin": 5562249,
                    "xmax": -13179529,
                    "ymax": 5897349,
                    "spatialReference": {
                        "wkid": 102100
                    }
                });
                map = new esri.Map("map", {
                    extent: initExtent
                });
                var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
                map.addLayer(basemap);

                dojo.connect(map, "onLoad", initfunctionality);
   }
   
     function initfunctionality() {
                    
     dojo.connect(dijit.byId('map'), 'resize', map, map.resize);

                    var points = {
                        "points": [
                            [-122.63, 45.51],
                            [-122.56, 45.51],
                            [-122.56, 45.55],
                            [-122.62, 45.00],
                            [-122.59, 45.53]
                        ],
                        "spatialReference": ({
                            "wkid": 4326
                        })
                    };
                    var mp = new esri.geometry.Multipoint(points);
                    var wm_mp = esri.geometry.geographicToWebMercator(mp);
     var infoTemplate = new esri.InfoTemplate("Bob <br> Lives in the USA", "");
                    var sms = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE).setColor(new dojo.Color([255,0,0,0.5]));

                    
                    
     var graphic = new esri.Graphic(wm_mp, sms, "",infoTemplate );//, 'onMouseOver', infoTemplate);
                    map.graphics.add(graphic);

     dojo.connect(map.graphics,"onMouseOver",function(evt){
     //map.graphics.clear();  //use the maps graphics layer as the highlight layer
     var content = evt.graphic.getContent();
     map.infoWindow.setContent(content);
     var title = evt.graphic.getTitle();
     map.infoWindow.setTitle(title);
     map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
     });
    
     
    dojo.connect(map.graphics, "onMouseOut", function(evt) {
     map.infoWindow.hide();
    });
               
            }
            dojo.ready(init);
        </script>
    </head>
    
    <body class="tundra">
        <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'"></div>
        </div>
    </body>

</html>


Thanks!
0 Kudos
StephenLead
by
Honored Contributor
‎04-26-2012 05:06 PM
Your code has the onMouseOver event listening to the Map itself - you need to listen to the graphics:

function init() {
 var initExtent = new esri.geometry.Extent({"xmin":-14052134,"ymin":5562249,"xmax":-13179529,"ymax":5897349,"spatialReference":{"wkid":102100}});
 map = new esri.Map("map",{extent:initExtent});
 var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
 map.addLayer(basemap);
 
 dojo.connect(map, "onLoad", function() {
  
  var points = { 
   "points": [[-122.63,45.51],[-122.56,45.51],[-122.56,45.55],[-122.62,45.00],[-122.59,45.53]], 
   "spatialReference": ({ "wkid": 4326 })
  };
  var mp = new esri.geometry.Multipoint(points);
  var wm_mp = esri.geometry.geographicToWebMercator(mp);
  
  var sms = new esri.symbol.SimpleMarkerSymbol();
  var infoTemplate = new esri.InfoTemplate("Bob","Lives in the USA"); 
  var graphic = new esri.Graphic(wm_mp, sms, '', infoTemplate);
  map.graphics.add(graphic);
  
  dojo.connect(map.graphics, "onMouseOver", function(evt) {
                  var g = evt.graphic;
                  map.infoWindow.setContent(g.getContent());
                  map.infoWindow.setTitle(g.getTitle());
                  map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
               });
               dojo.connect(map.graphics, "onMouseOut", function() {map.infoWindow.hide();} );
 
 });
}

Steve
0 Kudos
akashmagoon
by
Emerging Contributor
‎04-26-2012 05:44 PM
Thanks Vakil Ji and Steven. Thanks for the quick reply
0 Kudos
ShreyasVakil
by
Frequent Contributor
‎04-27-2012 08:06 AM
No problem! Let others know if this worked by marking this thread as answered, so that they can follow the same steps and get there issues solved.
0 Kudos
akashmagoon
by
Emerging Contributor
‎04-27-2012 05:57 PM
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
     
      var map;
      function init() {
var initExtent = new esri.geometry.Extent({"xmin":-13114922,"ymin":-5500000,"xmax":9292585,"ymax":10351408, "spatialReference":{"wkid":102100}});
map = new esri.Map("map",{extent:initExtent});
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
map.addLayer(basemap);

dojo.connect(map, "onLoad", function() {
 
  var points = {
   "points": [[-122.63,45.51],[-122.56,45.51],[-122.56,45.55],[-122.62,45.00],[77,19]],
   "spatialReference": ({ "wkid": 4326 })
  };
  var mp = new esri.geometry.Multipoint(points);
  var wm_mp = esri.geometry.geographicToWebMercator(mp);
 
  var sms = new esri.symbol.SimpleMarkerSymbol();
  var infoTemplate = new esri.InfoTemplate("Bob","Lives in the USA");
  var graphic = new esri.Graphic(wm_mp, sms, '', infoTemplate);
  map.graphics.add(graphic);
 
  dojo.connect(map.graphics, "onMouseOver", function(evt) {
                  var g = evt.graphic;
                  map.infoWindow.setContent(g.getContent());
                  map.infoWindow.setTitle(g.getTitle());
                  map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));

               });
               dojo.connect(map.graphics, "onMouseOut", function() {map.infoWindow.hide();} );

});
}
      dojo.ready(init);
    </script>
  </head>
 
  <body class="tundra">
    <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'">
      </div>
    </div>
  </body>
</html>


How can i add to this to show the X and Y coordinates in the bottom left like the sample:
http://help.arcgis.com/en/webapi/javascript/arcgis/demos/map/map_xycoords.html
0 Kudos
TomJacoby
by
Occasional Contributor
‎04-30-2012 09:04 AM
How can i add to this to show the X and Y coordinates in the bottom left like the sample:
http://help.arcgis.com/en/webapi/javascript/arcgis/demos/map/map_xycoords.html


dojo.connect(map, "onMouseMove", function(evt) { 
      var mp = esri.geometry.webMercatorToGeographic(evt.mapPoint);
      dojo.byId("<elementId>").innerHTML = mp.x + ", " + mp.y; 
});
0 Kudos
ShreyasVakil
by
Frequent Contributor
‎04-30-2012 03:13 PM
Answer given by Tom is correct.

Refer this code to see how it is implemented in your application:

<!doctype html>
<html lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"
        />
        <title></title>
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
        <style>
            html, body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            #map {
                margin: 0;
                padding: 0;
            }
        </style>
        <script>
            var dojoConfig = {
                parseOnLoad: true
            };
        </script>
        <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
        <script>
            dojo.require("dijit.layout.BorderContainer");
            dojo.require("dijit.layout.ContentPane");
   dojo.require("esri.dijit.InfoWindow");
            dojo.require("esri.map");

            var map;

            function init() {
                var initExtent = new esri.geometry.Extent({
                    "xmin": -14052134,
                    "ymin": 5562249,
                    "xmax": -13179529,
                    "ymax": 5897349,
                    "spatialReference": {
                        "wkid": 102100
                    }
                });
                map = new esri.Map("map", {
                    extent: initExtent
                });
                var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
                map.addLayer(basemap);

                dojo.connect(map, "onLoad", initfunctionality);
   }
   
     function initfunctionality() {
                    dojo.connect(map, "onMouseMove", showCoordinates);
     dojo.connect(map, "onMouseDrag", showCoordinates);
     dojo.connect(dijit.byId('map'), 'resize', map, map.resize);

                    var points = {
                        "points": [
                            [-122.63, 45.51],
                            [-122.56, 45.51],
                            [-122.56, 45.55],
                            [-122.62, 45.00],
                            [-122.59, 45.53]
                        ],
                        "spatialReference": ({
                            "wkid": 4326
                        })
                    };
                    var mp = new esri.geometry.Multipoint(points);
                    var wm_mp = esri.geometry.geographicToWebMercator(mp);
     var infoTemplate = new esri.InfoTemplate("Bob <br> Lives in the USA", "");
                    var sms = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE).setColor(new dojo.Color([255,0,0,0.5]));

                    
                    
     var graphic = new esri.Graphic(wm_mp, sms, "",infoTemplate );//, 'onMouseOver', infoTemplate);
                    map.graphics.add(graphic);

     dojo.connect(map.graphics,"onMouseOver",function(evt){
     //map.graphics.clear();  //use the maps graphics layer as the highlight layer
     var content = evt.graphic.getContent();
     map.infoWindow.setContent(content);
     var title = evt.graphic.getTitle();
     map.infoWindow.setTitle(title);
     map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
     });
    
     
    dojo.connect(map.graphics, "onMouseOut", function(evt) {
     map.infoWindow.hide();
    });
               
            }
   
   function showCoordinates(evt) {
        //get mapPoint from event
        //The map is in web mercator - modify the map point to display the results in geographic
        var mp = esri.geometry.webMercatorToGeographic(evt.mapPoint);
        //display mouse coordinates
        dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
      }
   
            dojo.ready(init);
        </script>
    </head>
    
    <body class="tundra">
        <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'">
    <span id="info" style="position:absolute; right:150px; bottom:5px; color:#000; z-index:50;"></span>
   </div>
        </div>
    </body>

</html>
0 Kudos