Creating Drill-Down Maps

FusionMaps can be easily and extensively used to create drill-down maps. All the maps in FusionMaps support drill down. Using the drill down functionality provided by FusionMaps, you can easily produce maps that enact "drill down" or "zoom in (data)" capabilities. All the entities and all the markers for the map can have links.

In FusionMaps, you can define the following types of link for the map entities and any defined markers:

  • Simple links that open in the same page
  • Simple links that open in a new page
  • Links that open in a specified frame
  • Links that open in a new pop-up window
  • Existing JavaScript functions (on the same page) to be invoked as links
Defining links for a map

To define a simple link for any data plot, just define the link attribute for the <entity> element as under:
<entity... value='2235' ... link='ShowDetails.asp%3FId%3D45' ...>

With the above XML, the entity when clicked, will take to the page ShowDetails.asp?Id=45.

Similarly, to define a link for a marker, add the link attribute to <marker> element (which is child of <application> element). Note that links need to be applied to marker application elements and not marker definition elements.

As you will note, the above link has been URL Encoded. FusionMaps expects all the links in URL Encoded format, if you have characters special characters (like ?,&, etc.) in your link. When the user clicks on the link, FusionMaps decodes it and invokes ShowDetails.asp?Id=45.

All the server side scripting languages provide a generic function to URL Encode any string - like in ASP and ASP.NET, we've Server.URLEncode(strURL) and so on.
XML Example:
<map borderColor='005879' fillColor='D7F4FF' numberSuffix=' Mill.' includeValueInLabels='1' labelSepChar=': ' baseFontSize='9'>
   <data>
      <entity id='NA' value='515' link='DemoLinkPages/DemoLink1.html'/>
      <entity id='SA' value='373' link='DemoLinkPages/DemoLink2.html'/>
      <entity id='AS' value='3875' link='DemoLinkPages/DemoLink3.html'/>
      <entity id='EU' value='727' link='DemoLinkPages/DemoLink4.html'/>
      <entity id='AF' value='885' link='DemoLinkPages/DemoLink5.html'/>
      <entity id='AU' value='32' link='DemoLinkPages/DemoLink6.html'/>
</data>
</map>
 
Opening links in new window
Quite often, you might want to open the drill-down link in a new window instead of the same window. To have a link open in a new window, all you need to do is, add n- before any link. E.g.,

<entity ... value='2235' ... link='n-ShowDetails.asp%3FId%3D45' ...>

The above link, when clicked, would open in a new window.

Example XML:
<map borderColor='005879' fillColor='D7F4FF' numberSuffix=' Mill.' includeValueInLabels='1' labelSepChar=': ' baseFontSize='9'>
   <data>
      <entity id='NA' value='515' link='n-DemoLinkPages/DemoLink1.html'/>
      <entity id='SA' value='373' link='n-DemoLinkPages/DemoLink2.html'/>
      <entity id='AS' value='3875' link='n-DemoLinkPages/DemoLink3.html'/>
      <entity id='EU' value='727' link='n-DemoLinkPages/DemoLink4.html'/>
      <entity id='AF' value='885' link='n-DemoLinkPages/DemoLink5.html'/>
      <entity id='AU' value='32' link='n-DemoLinkPages/DemoLink6.html'/>
   </data>
</map>