Ranking Widget

IntroductionAPI

Ranking Widget

 

Filter by Rank

filter2

Ranking: Show the top and bottom x values for a selected layer.

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">
 Filter by Value Rank
 </div>
 </div>
 
 <div style="margin-right: 5px;padding: 10px;height:50px;">
 <div style=" position: absolute; right: 0px;">
 <input id="txtNumTopBottom" type="text" placeholder="How Many" style="width: 70px;"/>
 </div>
 <div class="com_cmapsanalytics_horiznav" style="position: absolute;top: 45px;left: 0px;">
 <ul>
 <li><a class="active" id="btnApplyLayerFiltersTop">Show Top</a></li>
 <li><a id="btnApplyLayerFiltersBottom">Show Bottom</a></li>
 </ul>
 </div>
 <div class="com_cmapsanalytics_actionheaderlinks">
 <a id="btnApplyLayerFilters">Apply Filters</a>&nbsp;|&nbsp;
 <a id="btnClearLayerFilters">Clear Filters</a>
 </div>
 </p>
 </div>
 
</div>

JavaScript


(function(){

 createNamespaceUnderCentigon("ui.FilterByValueRankCard");

 centigon.ui.FilterByValueRankCard = function(){
 
 centigon.ui.Card.call(this);
 
 this.contentUrl = this.getCardAssetUrl() + "FilterByValueRankCardMarkup.txt";
 
 this.controlIdToRandomId = {
 txtNumTopBottom: this._domUtil.getRandomDivId(),
 btnApplyLayerFiltersTop: this._domUtil.getRandomDivId(),
 btnApplyLayerFiltersBottom: this._domUtil.getRandomDivId(),
 btnApplyLayerFilters: this._domUtil.getRandomDivId(),
 btnClearLayerFilters: this._domUtil.getRandomDivId()
 };
 
 this._filterBy = "applytopfilters";

 }
 
 centigon.ui.FilterByValueRankCard.constructor = centigon.ui.Card;
 centigon.ui.FilterByValueRankCard.prototype = new centigon.ui.Card();
 
 centigon.ui.FilterByValueRankCard.prototype.getHtml = function(gotHtml){
 
 this.getRemoteContent({url: this.contentUrl, success: gotHtml});
 }

 centigon.ui.FilterByValueRankCard.prototype.addEventListeners = function(){
 
 var that = this;
 
 var btnOpts = [{id: this.controlIdToRandomId["btnApplyLayerFiltersTop"]},
 {id: this.controlIdToRandomId["btnApplyLayerFiltersBottom"]}];
 
 var toggleListMenu = new centigon.ui.ToggleListMenu(btnOpts);
 
 this.domObjByRandField("btnApplyLayerFiltersTop").click(function(){
 that._filterBy = "applytopfilters";
 });
 
 this.domObjByRandField("btnApplyLayerFiltersBottom").click(function(){
 that._filterBy = "applybottomfilters";
 });
 
 this.domObjByRandField("btnApplyLayerFilters").click(function(){
 that.applyLayerFilters(that._filterBy);
 });
 
 this.domObjByRandField("btnClearLayerFilters").click(function(){
 that.applyLayerFilters("clearfilters");
 });
 
 }
 
 centigon.ui.FilterByValueRankCard.prototype.applyLayerFilters = function(type){
 
 var lyrIx = this.layer.positionInMapDataProvider;
 
 this.cMap.clearLayerFilters(lyrIx);
 
 var numTopBottomFltr = parseInt(this.domObjByRandField("txtNumTopBottom").val());
 
 if(type === "clearfilters"){
 this.domObjByRandField("txtNumTopBottom").val("");
 }
 else if(type === "applytopfilters"){
 this.cMap.filterLayerByTopNLayerData(lyrIx, numTopBottomFltr);
 }
 else if(type === "applybottomfilters"){
 this.cMap.filterLayerByBottomNLayerData(lyrIx, numTopBottomFltr);
 }
 
 var that = this;
 var dynZoom = function(){
 
 var locsForDynZoom = [];
 if(that.layer.type === centigon.mapping.Layer.TYPE.SHAPE){
 locsForDynZoom = locsForDynZoom.concat(that.cMap.getShapeLayerBounds(that.layer));
 }
 else{
 locsForDynZoom = locsForDynZoom.concat(that.layer.getVisibleLocations());
 }
 
 if(locsForDynZoom.length > 0){
 that.cMap.setMapViewportBasedOnLocations(locsForDynZoom);
 }
 }
 
 setTimeout(dynZoom, 250);
 }
 
})()
Next Post