{"id":23561,"date":"2016-04-05T15:30:10","date_gmt":"2016-04-05T14:30:10","guid":{"rendered":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/?page_id=23561"},"modified":"2020-12-01T22:40:24","modified_gmt":"2020-12-01T22:40:24","slug":"using-geographic-drill-downs-in-instantatlas","status":"publish","type":"page","link":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/en\/welcome\/support-articles\/using-geographic-drill-downs-in-instantatlas\/","title":{"rendered":"Using Geographic Drill Downs in InstantAtlas"},"content":{"rendered":"\n<h2>Introduction<\/h2>\n<p>The objective of this guide is to help InstantAtlas Desktop users set up area-specific geographic drill downs.<\/p>\n<p>For example, a top level dynamic report might display a thematic map for districts in Nottinghamshire.<\/p>\n<p><a href=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2016\/04\/image1-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2016\/04\/image1-1.png\" alt=\"Local Authority Report\" class=\"alignnone wp-image-23571 size-full\" width=\"1878\" height=\"954\" srcset=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2016\/04\/image1-1.png 1878w, https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2016\/04\/image1-1-300x152.png 300w, https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2016\/04\/image1-1-768x390.png 768w, https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2016\/04\/image1-1-1024x520.png 1024w\" sizes=\"auto, (max-width: 1878px) 100vw, 1878px\" \/><\/a><\/p>\n<p>When an area is double clicked in the top level dynamic report, a new dynamic report opens displaying a thematic map for more detailed areas (e.g. wards) within the selected district. This example is illustrated in the image below for the Bassetlaw District (highlighted in the image above).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2016\/04\/image2-1.png\" alt=\"Bassetlaw District report\" class=\"alignnone wp-image-23581 size-full\" width=\"1854\" height=\"956\" srcset=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2016\/04\/image2-1.png 1854w, https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2016\/04\/image2-1-300x155.png 300w, https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2016\/04\/image2-1-768x396.png 768w, https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2016\/04\/image2-1-1024x528.png 1024w\" sizes=\"auto, (max-width: 1854px) 100vw, 1854px\" \/><\/p>\n<p>This user guide will explain how to setup drill-downs within InstantAtlas. This functionality can be implemented in all templates. It is a known software issue that the second map of the Double Map and the Double Map Time Series template will not react when double-clicked.<\/p>\n<p>To enable this function, a custom script will need to be copied from this guide and pasted into the custom.js file of your top level dynamic report (i.e. the dynamic report you wish to link from).<\/p>\n<h2>Folders and Dynamic Reports<\/h2>\n<p>For a drill down to work correctly it is important that you organise and name your folders correctly. The easiest way is to place the dynamic reports you are drilling down to in subfolders within the folder that contains the top level dynamic report. These subfolders require a specific name so that they can be linked to correctly when the drill-down function is triggered. The name of each subfolder must be the same as the code of the geographic feature in the top level dynamic report that is used to drill down to that dynamic report. The codes of geographic features in the top level dynamic report are listed in the geographies.csv file created when the top level dynamic report was published.<\/p>\n<p>The image below\u00a0shows the contents of the folder containing the top level HTML\u00a0dynamic report:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2016\/04\/image3-1.png\" class=\"alignnone wp-image-23611 size-full\" width=\"745\" height=\"626\" srcset=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2016\/04\/image3-1.png 745w, https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2016\/04\/image3-1-300x252.png 300w\" sizes=\"auto, (max-width: 745px) 100vw, 745px\" \/><\/p>\n<p>Most of the files belong to the top level dynamic report but you can see eight subfolders that contain dynamic reports that will be drilled down to. They have been given folder names that match the codes of the geographic features in the top level dynamic report used to drill down to them. In this example, the Nottinghamshire local authority\u00a0dynamic report contains 8\u00a0districts with codes of &#8217;00FY&#8217;, &#8217;37UB&#8217;, &#8217;37UC&#8217;, &#8217;37UD&#8217;, &#8217;37UE&#8217;, &#8217;37UF&#8217;, &#8217;37UG&#8217; and &#8217;37UJ&#8217; and this is reflected in the naming of subfolders.<\/p>\n<h2>The Drill Down Script<\/h2>\n<p>Now that your dynamic report folders have been correctly organised and named, you can paste the drill down custom script into the <strong>custom.js<\/strong> file of the top level dynamic report.<\/p>\n<p>Please do the following:<\/p>\n<p>1. Navigate to the folder that contains your top level dynamic report and open the custom.js file using a text editor (e.g. Notepad).<\/p>\n<p>2. Copy and paste the following code between the curly brackets of the <code>iaOnReportComplete = function(report)<\/code> function (Line 34):<\/p>\n<div>\n<pre>\/\/ The dataGroup object exposes functions and properties of the data. \r\nvar dataGroup = report.getComponent(\"dataGroup\"); \r\n\r\nmapDrillDown = function()\r\n{\r\n    var baseLayers = dataGroup.mapData.baseLayers;\r\n    for (var i = 0; i &lt; baseLayers.length; i++)\r\n    {\r\n        var layer = baseLayers[i];\r\n        layer.addEventListener(ia.ItemEvent.ITEM_CLICK, itemEventHandler);\r\n    }\r\n\r\n    var clicks = 0\r\n    \r\n    function itemEventHandler(event)\r\n    {\r\n        if (event.type == ia.ItemEvent.ITEM_CLICK)\r\n        {\r\n            \/\/ Test for double click.\r\n            clicks++;\r\n            if (clicks == 1)\r\n            {\r\n                setTimeout(function()\r\n                {\r\n                    if (clicks == 1)\r\n                    {\r\n                        ia.log(\"single click\");\r\n                    \r\n                        \/\/ Open a new page using the id of the clicked item.\r\n                        \/\/ Replace \"_self\" with \"_blank\" to open in a new tab.\r\n                        var w = window.open('.\/' + encodeURIComponent(event.item.id) + '\/atlas.html', \"_self\"); w.focus();\r\n                    }\r\n                    else\r\n                    {\r\n                        ia.log(\"double click\");\r\n                    }\r\n                clicks = 0;\r\n                }, 300);\r\n            }\r\n        }\r\n    };\r\n};\r\nmapDrillDown();\r\n<\/pre>\n<\/div>\n<p>The custom script defined above will enable the drill down dynamic report to be loaded on a single click. If you prefer it to work on a double click, use the code below instead:<\/p>\n<pre>\/\/ The dataGroup object exposes functions and properties of the data.\r\nvar dataGroup = report.getComponent(\"dataGroup\");\r\n\r\nmapDrillDown = function()\r\n{\r\n    var baseLayers = dataGroup.mapData.baseLayers;\r\n    for (var i = 0; i &lt; baseLayers.length; i++)\r\n    {\r\n        var layer = baseLayers[i];\r\n        layer.addEventListener(ia.ItemEvent.ITEM_CLICK, itemEventHandler);\r\n    }\r\n\r\n    var clicks = 0\r\n\r\n    function itemEventHandler(event)\r\n    {\r\n        if (event.type == ia.ItemEvent.ITEM_CLICK)\r\n        {\r\n            \/\/ Test for double click.\r\n            clicks++;\r\n            if (clicks == 1)\r\n            {\r\n                setTimeout(function()\r\n                {\r\n                    if (clicks == 1)\r\n                    {\r\n                        ia.log(\"single click\");\r\n\r\n\r\n                    }\r\n                    else\r\n                    {\r\n                        ia.log(\"double click\");\r\n                        \/\/ Open a new page using the id of the clicked item.\r\n\t\t\t\/\/ Replace \"_self\" with \"_blank\" to open in a new tab.\r\n                        var w = window.open('.\/' + encodeURIComponent(event.item.id) + '\/atlas.html', \"_self\"); w.focus();\r\n                    }\r\n                clicks = 0;\r\n                }, 300);\r\n            }\r\n        }\r\n    };\r\n};\r\nmapDrillDown();\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Introduction The objective of this guide is to help InstantAtlas Desktop users set up area-specific geographic drill downs. For example, a top level dynamic report might display a thematic map for districts in Nottinghamshire. When an area is double clicked in the top level dynamic report, a new dynamic report opens displaying a thematic map &hellip; <a href=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/en\/welcome\/support-articles\/using-geographic-drill-downs-in-instantatlas\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Using Geographic Drill Downs in InstantAtlas<\/span><\/a><\/p>\n","protected":false},"author":22,"featured_media":0,"parent":27601,"menu_order":21,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-23561","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/23561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/comments?post=23561"}],"version-history":[{"count":0,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/23561\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/27601"}],"wp:attachment":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/media?parent=23561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}