{"id":168371,"date":"2010-02-08T18:39:29","date_gmt":"2010-02-08T18:39:29","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=168371"},"modified":"2018-12-18T10:45:12","modified_gmt":"2018-12-18T18:45:12","slug":"find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript","title":{"rendered":"Find graphics under a mouse click with the ArcGIS API for JavaScript"},"author":4801,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[33811,24921],"industry":[],"product":[36831,36601],"class_list":["post-168371","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-dojo","tag-javascript","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Mapping applications built with the\u00a0ArcGIS API for\r\nJavaScript\u00a0commonly allow users to click or hover over a map and get information","flexible_content":[{"acf_fc_layout":"content","content":"

\"Dojo<\/a>Mapping applications built with the\u00a0ArcGIS API for
\nJavaScript<\/a>\u00a0commonly allow users to click or hover over a map and get information about all the features under the current mouse location.
\nTo add this functionality to your application you can listen for the graphics layer\u2019s onClick event, however if graphics are stacked on
\ntop of each other, only the top one fires an event. So how do you determine how many graphics are under the point?<\/p>\n

One approach is to do the following:<\/p>\n

    \n
  1. Listen for a click event, perhaps onMouseDown or onClick.<\/li>\n
  2. Define a search radius by constructing a new extent around the input point.<\/li>\n
  3. Use dojo.Filter to create a new array that contains only the features that are within the search radius.<\/li>\n<\/ol>\n

    Listen for onClick event<\/h3>\n

    First, we use dojo.connect to listen for the onClick event. The code snippet below
    \nconnects an event handler to the map\u2019s graphics layer that fires whenever a user clicks a graphic.<\/p>\n

    dojo.connect(map.graphics,\"onClick\",identifyFeatures);<\/pre>\n
    The event argument provides access to the screen point, map point, and graphic. The map point is the location, in map units,
    \nunder the mouse cursor. In the handler function identifyFeatures, call a function that builds a search radius around the input mouse location and
    \nreturns the new extent.We\u2019ll examine how to build the pointToExtent function in the next step.<\/p>\n
       function identifyFeatures(evt){\r\n    var extentGeom = pointToExtent(map,evt.mapPoint,10);\r\n   }\r\n<\/pre>\n
    Construct an extent around the input point<\/h3>\n
    In this step, we\u2019ll construct an\u00a0extent<\/a>
    \naround the input map point using the following function. This function uses an input point and tolerance to calculate the extent.<\/p>\n
    function pointToExtent(map, point, toleranceInPixel) {\r\n  \/\/calculate map coords represented per pixel\r\n  var pixelWidth = map.extent.getWidth() \/ map.width;\r\n  \/\/calculate map coords for tolerance in pixel\r\n  var toleraceInMapCoords = toleranceInPixel * pixelWidth;\r\n  \/\/calculate & return computed extent\r\n  return new esri.geometry.Extent( point.x - toleraceInMapCoords,\r\n               point.y - toleraceInMapCoords,\r\n               point.x + toleraceInMapCoords,\r\n               point.y + toleraceInMapCoords,\r\n               map.spatialReference );\r\n}<\/pre>\n
    Filter the graphics collection using dojo.filter and display the results<\/h3>\n
    Dojo.filter<\/a>\u00a0takes an input array and a filtering function
    \nand returns a new array that contains only the items that met the filter requirement.<\/p>\n
    Let\u2019s look at how to use dojo.Filter to loop through the graphics in our graphics layer and test each graphic against a condition.
    \nIn this case, we use extent.contains to perform a spatial query to determine which graphics are within the extent. If a graphic is within the extent, the
    \nfunction returns true and the graphic is included in the filteredGraphics output array.<\/p>\n
      var filteredGraphics = dojo.filter(map.graphics.graphics, function(graphic) {\r\n    return extentGeom.contains(graphic.geometry);\r\n  })<\/pre>\n
    Now we have an array that contains only graphics located within the specified tolerance. We can use this array to build a table containing
    \none row for each graphic under the mouse location. In the snippet below, we construct a table, then use\u00a0    dojo.forEach<\/a>\u00a0to
    \nloop through the filteredGraphics array and add a row that displays the city name and population. Finally we build an\u00a0    info window<\/a>\u00a0to display the results.<\/p>\n
      var content = \"\";\r\n  content = \"<i>Total Features: \" + filteredGraphics.length + \"<\/i>\";\r\n  content += \"<table><tr><th>City<\/th><th>Population<\/th><\/tr>\";\r\n\r\n  \/\/Build a table containing a row for each feature found\r\n  dojo.forEach(filteredGraphics,function(row){\r\n    content += \"\"\r\n      + row.attributes['CITY_NAME'] +\r\n      \"<\/td><td>\" + row.attributes['POP1990'] +\r\n      \"<\/td><\/tr>\";\r\n  })\r\n  content += \"<\/table>\";\r\n\r\n \/\/display the results in an infow window\r\n map.infoWindow.setContent(content);\r\n map.infoWindow.setTitle(\"Identify Results\");\r\n map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));<\/pre>\n
    Click\u00a0here<\/a>\u00a0to view a live sample that uses dojo.filter to display information about all the graphics under the mouse point.<\/p>\n
    Contributed by Kelly Hutchins of the ArcGIS API for JavaScript development team.<\/i><\/p>\n"}],"authors":[{"ID":4801,"user_firstname":"Kelly","user_lastname":"Hutchins","nickname":"Kelly","user_nicename":"kelly","display_name":"Kelly Hutchins","user_email":"khutchins@esri.com","user_url":"","user_registered":"2018-03-02 00:16:25","user_description":"Software developer on the instant apps team building apps that help you share your Online content. Outside of work I enjoy spending time trail running with my dogs.","user_avatar":""}],"related_articles":"","card_image":false,"wide_image":false},"yoast_head":"\nFind graphics under a mouse click with the ArcGIS API for JavaScript<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Find graphics under a mouse click with the ArcGIS API for JavaScript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2018-12-18T18:45:12+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript\"},\"author\":{\"name\":\"Kelly Hutchins\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6a3c399b819d64e44070cdbedbf2cc9b\"},\"headline\":\"Find graphics under a mouse click with the ArcGIS API for JavaScript\",\"datePublished\":\"2010-02-08T18:39:29+00:00\",\"dateModified\":\"2018-12-18T18:45:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript\"},\"wordCount\":12,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"Dojo\",\"JavaScript\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript\",\"name\":\"Find graphics under a mouse click with the ArcGIS API for JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2010-02-08T18:39:29+00:00\",\"dateModified\":\"2018-12-18T18:45:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Find graphics under a mouse click with the ArcGIS API for JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6a3c399b819d64e44070cdbedbf2cc9b\",\"name\":\"Kelly Hutchins\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/IMG_3695-213x200.jpg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/IMG_3695-213x200.jpg\",\"caption\":\"Kelly Hutchins\"},\"description\":\"Software developer on the instant apps team building apps that help you share your Online content. Outside of work I enjoy spending time trail running with my dogs.\",\"url\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Find graphics under a mouse click with the ArcGIS API for JavaScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript","og_locale":"en_US","og_type":"article","og_title":"Find graphics under a mouse click with the ArcGIS API for JavaScript","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2018-12-18T18:45:12+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript"},"author":{"name":"Kelly Hutchins","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6a3c399b819d64e44070cdbedbf2cc9b"},"headline":"Find graphics under a mouse click with the ArcGIS API for JavaScript","datePublished":"2010-02-08T18:39:29+00:00","dateModified":"2018-12-18T18:45:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript"},"wordCount":12,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["Dojo","JavaScript"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript","name":"Find graphics under a mouse click with the ArcGIS API for JavaScript","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2010-02-08T18:39:29+00:00","dateModified":"2018-12-18T18:45:12+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/find-graphics-under-a-mouse-click-with-the-arcgis-api-for-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Find graphics under a mouse click with the ArcGIS API for JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6a3c399b819d64e44070cdbedbf2cc9b","name":"Kelly Hutchins","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/IMG_3695-213x200.jpg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/04\/IMG_3695-213x200.jpg","caption":"Kelly Hutchins"},"description":"Software developer on the instant apps team building apps that help you share your Online content. Outside of work I enjoy spending time trail running with my dogs.","url":""}]}},"text_date":"February 8, 2010","author_name":"Kelly Hutchins","author_page":false,"custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":33811,"name":"Dojo","slug":"dojo","term_group":0,"term_taxonomy_id":33811,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2690,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":362,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":763,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/168371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/4801"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=168371"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/168371\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=168371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=168371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=168371"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=168371"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=168371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}