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

Hoover Javascript API

akashmagoon

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>

Vind meer berichten getagd met

Accepted answers

All comments

ShreyasVakil

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>

TomJacoby

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

akashmagoon

<!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

ShreyasVakil

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.

akashmagoon

Thanks Vakil Ji and Steven. Thanks for the quick reply

StephenLead

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

ShreyasVakil

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!

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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