drilldown.html

<!-- Property Panel -->
<div id="button" style="font-size:14px;margin-left: 10px;margin-top: 20px;display:none;left:50px;top:50px;">
    <a id="category" style="visibility:hidden; display:inline-block">
            World Map 
</a>
<p style="visibility:hidden; display:inline-block" id="symbol">&nbsp;&gt;&gt;&nbsp;</p>
<p id="text" style="display:inline-block;"></p>
</div>
<div class="control-section">
<div id="mapdrilldown"></div>
<div align="center"><p><i><div align="center"><p id="content" style="font-size: 16px;color:grey">Click on a shape to drill</p></div></i></p></div>
</div>
<div id="action-description">
    <p>
       This sample demonstrates drill down with all the continents in the initial view. By clicking a continent, you can view all the countries available in that continent.
   </p>
</div>
<div id="description">
    <p>
      In this example, you can see how to display an another layer by clicking a shape in previous layer.

    </p>

   
</div>
<!-- custom code start -->
<style>
.backLabel:hover {
        cursor: pointer;
}

.markerTemplate {
    height:30px;
    width:30px;
    display:block;
    margin: auto;
}
#category:hover {
    cursor: pointer;
}
.markerTemplate {
    font-size: 12px;
    color: white;
    text-shadow: 0px 1px 1px black;
    font-weight: 500
}
</style>
<!-- custom code end -->