Drill

Drill tab provides a current status of the layer and drill path for multi-layer, drillable maps. In the event where a user would like to quickly navigate to a specific geography or drillable location identifier, users can select from a dropdown rather than clicking on the map. The drill pane also indicates the current drill level and parent geography for reference.

 

API Details

Card Markup and CSS

<div>

 <div class="com_cmapsanalytics_cardheader com_cmapsanalytics_card_innerbox">
 <div class="com_cmapsanalytics_alignleft com_cmapsanalytics_card_title">
 Drill
 </div>
 </div>
 
 <div style="margin-right: 5px;padding: 10px;">
 <div class="com_cmapsanalytics_input_group com_cmapsanalytics_fullwidth">
 <div class="com_cmapsanalytics_divider"></div>
 <div>
 <label id="lyrDrillLevel">Drill Level: N/A</label>
 <p/>
 <label id="lyrDrillParent">Drill Parent: N/A</label>
 <p/>
 <select id="selDrillIx" class="com_cmapsanalytics_sel_drillix">
 </select>
 <p/>
 <div class="com_cmapsanalytics_actionheaderlinks">
 <a id="btnDrillToLayer">Drill Down</a>&nbsp;|&nbsp;
 <a id="btnDrillUpToLayer">Drill Up</a>
 </div>
 </div>
 </div>
 </div>
 
</div>

<style>

.com_cmapsanalytics_sel_drillix{
 width: 100%;
 border-radius: 4px;
 height: 25px;
}

</style>

JavaScript

(function(){

 createNamespaceUnderCentigon("ui.DrillCard");

 centigon.ui.DrillCard = function(){
 
 centigon.ui.Card.call(this);
 
 this.contentUrl = this.getCardAssetUrl() + "DrillCardMarkup.txt";
 
 this.controlIdToRandomId = {
 lyrDrillLevel: this._domUtil.getRandomDivId(),
 lyrDrillParent: this._domUtil.getRandomDivId(),
 selDrillIx: this._domUtil.getRandomDivId(),
 btnDrillToLayer: this._domUtil.getRandomDivId(),
 btnDrillUpToLayer: this._domUtil.getRandomDivId()
 };
 
 this._drillParentLayerIx = "";
 this._drillChildLayerIx = "";
 }
 
 centigon.ui.DrillCard.constructor = centigon.ui.Card;
 centigon.ui.DrillCard.prototype = new centigon.ui.Card();
 
 centigon.ui.DrillCard.prototype.getHtml = function(gotHtml){
 
 this.getRemoteContent({url: this.contentUrl, success: gotHtml});
 }

 centigon.ui.DrillCard.prototype.addEventListeners = function(){
 
 var that = this;
 
 this.domObjByRandField("btnDrillToLayer").click(function(){
 that.onDrillDownClicked();
 });
 
 this.domObjByRandField("btnDrillUpToLayer").click(function(){
 that.onDrillUpClicked();
 });
 
 this.domObjByRandField("selDrillIx").change(function(){
 
 try{
 var chldIx = parseInt(that.domObjByRandField("selDrillIx").val());
 that.cMap.panZoomTo(that.layer.getCleansedLayerLocation(chldIx).toCsvLatLon());
 that.cMap.zoomLevel(that.cMap.getZoomLevel()-2);
 }
 catch(e){}
 });
 
 this.updateView();
 }
 centigon.ui.DrillCard.prototype.aiwLayerChanged = function(){
 
 this.updateView();
 }
 
 centigon.ui.DrillCard.prototype.layerSelected = function(){

 this.updateView();
 }
 
 centigon.ui.DrillCard.prototype.layerSelected = function(){

 this.updateView();
 }
 
 centigon.ui.DrillCard.prototype.viewportChanged = function(){

 }
 
 centigon.ui.DrillCard.prototype.onDrillDownClicked = function(){
 
 var chldIx = parseInt(this.domObjByRandField("selDrillIx").val());
 this.cMap.triggerLayerChildClick(this.layer.positionInMapDataProvider, chldIx);
 }
 
 centigon.ui.DrillCard.prototype.onDrillUpClicked = function(){
 
 var drlPrnts = this.cMap.drillParents().slice();
 if(parseInt(drlPrnts[this.layer.positionInMapDataProvider]) >= 0){
 var drillParentLayer = this.cMap.getLayerAt(parseInt(drlPrnts[this.layer.positionInMapDataProvider]));
 if(drillParentLayer){
 this.cMap.drillTo(drillParentLayer.positionInMapDataProvider);
 }
 }
 }
 
 centigon.ui.DrillCard.prototype.updateView = function(){
 
 this.domObjByRandField("btnDrillToLayer").hide();
 this.domObjByRandField("btnDrillUpToLayer").hide();
 
 this.domObjByRandField("btnDrillToLayer").text("");
 this.domObjByRandField("btnDrillUpToLayer").text("");
 
 this._drillParentLayerIx = "";
 this._drillChildLayerIx = "";
 
 var html = "";
 var lbls = this._utilFactory.getCollectionIterator(this.layer.displayObjectLabels);
 while(lbls.hasNext()){
 html += '<option value="'+lbls.getPosition()+'">'+lbls.next()+'</option>'; 
 }
 this.domObjByRandField("selDrillIx").html(html);
 
 var drlLvls = this.cMap.drillLevels().slice();
 var myDrillLevel = "None";
 if(parseInt(drlLvls[this.layer.positionInMapDataProvider]) > 0){
 myDrillLevel = drlLvls[this.layer.positionInMapDataProvider];
 if(this.cMap.drillLevelsExistBelowLayer(this.layer)){
 this.domObjByRandField("btnDrillToLayer").show();
 var drlChldLyr = this.cMap.getFirstDrillChild(this.layer);
 this.domObjByRandField("btnDrillToLayer").text("Drill Down to: " + drlChldLyr.displayName);
 this._drillChildLayerIx = drlChldLyr.positionInMapDataProvider;
 }
 }
 this.domObjByRandField("lyrDrillLevel").text("Drill Level: " + myDrillLevel);
 
 if(myDrillLevel === "None"){
 this.domObjByRandField("selDrillIx").hide();
 }
 else{
 this.domObjByRandField("selDrillIx").show();
 }
 
 var drlPrnts = this.cMap.drillParents().slice();
 var drillPrnt = "None";
 if(parseInt(drlPrnts[this.layer.positionInMapDataProvider]) >= 0){
 var drillParentLayer = this.cMap.getLayerAt(parseInt(drlPrnts[this.layer.positionInMapDataProvider]));
 if(drillParentLayer){
 drillPrnt = drillParentLayer.displayName;
 this.domObjByRandField("btnDrillUpToLayer").show();
 this.domObjByRandField("btnDrillUpToLayer").text("Drill Up to " + drillPrnt);
 this._drillParentLayerIx = drillParentLayer.positionInMapDataProvider;
 }
 }
 this.domObjByRandField("lyrDrillParent").text("Drill Parent: " + drillPrnt);
 }
 
})()