Filter by Value and Label

Label filters allows users to type in a Label based search / filter. The label filter uses a “Contains” condition so any full or partial results are included and displayed on the map. The Label filter uses the Labels data field.

Value filters uses min/ max values to constrain points displayed on the map. The values filter uses the Values data field.

Filter by Rank

Ranking: Show the top and bottom x values.

Filter by Value Ranges

CMaps Analytics will automatically create value ranges to select and filter from.

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 Values/Labels
 </div>
 </div>
 
 <div style="margin-right: 5px;padding: 10px;">
 
 <input id="txtLblFilter" type="text" placeholder="Label(s) contain (optional)">
 <input id="txtMinFilter" type="text" placeholder="Value Min (optional)">
 <input id="txtMaxFilter" type="text" placeholder="Value Max (optional)">
 <p/>
 <div class="com_cmapsanalytics_actionheaderlinks">
 <a id="btnApplyLayerFilters">Apply Filters</a>&nbsp;|&nbsp;
 <a id="btnClearLayerFilters">Clear Filters</a>
 </div>
 </div>
 
</div>

JavaScript

(function(){

 createNamespaceUnderCentigon("ui.FilterByValuesLabelsCard");

 centigon.ui.FilterByValuesLabelsCard = function(){
 
 centigon.ui.Card.call(this);
 
 this.contentUrl = this.getCardAssetUrl() + "FilterByValuesLabelsCardMarkup.txt";
 
 this.controlIdToRandomId = {
 txtLblFilter: this._domUtil.getRandomDivId(),
 txtMinFilter: this._domUtil.getRandomDivId(),
 txtMaxFilter: this._domUtil.getRandomDivId(),
 btnApplyLayerFilters: this._domUtil.getRandomDivId(),
 btnClearLayerFilters: this._domUtil.getRandomDivId()
 };

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

 centigon.ui.FilterByValuesLabelsCard.prototype.addEventListeners = function(){
 
 var that = this;
 
 this.domObjByRandField("btnApplyLayerFilters").click(function(){
 that.applyLayerFilters("applypropfilters");
 });
 
 this.domObjByRandField("btnClearLayerFilters").click(function(){
 
 that.domObjByRandField("txtLblFilter").val("");
 that.domObjByRandField("txtMinFilter").val("");
 that.domObjByRandField("txtMaxFilter").val("");
 
 that.applyLayerFilters("clearfilters");
 });

 }
 
 centigon.ui.FilterByValuesLabelsCard.prototype.applyLayerFilters = function(type){
 
 var lyrIx = this.layer.positionInMapDataProvider;
 
 var minFilters = this.cMap.minValueFilters();
 var maxFilters = this.cMap.maxValueFilters();
 var lblFilters = this.cMap.labelFilters();
 
 var lblFltr = this.domObjByRandField("txtLblFilter").val().toString();
 var minFltr = this.domObjByRandField("txtMinFilter").val() === "" ? null : Number(this.domObjByRandField("txtMinFilter").val());
 var maxFltr = this.domObjByRandField("txtMaxFilter").val() === "" ? null : Number(this.domObjByRandField("txtMaxFilter").val());
 
 this.cMap.clearLayerFilters(lyrIx);
 
 if(type === "clearfilters"){
 //placeholder
 }
 else if(type === "applypropfilters"){
 minFltr = minFltr || Number.NEGATIVE_INFINITY;
 maxFltr = maxFltr || Number.POSITIVE_INFINITY;
 
 minFilters[lyrIx] = minFltr;
 maxFilters[lyrIx] = maxFltr;
 lblFilters[lyrIx] = lblFltr;
 
 this.cMap.minValueFilters(minFilters);
 this.cMap.maxValueFilters(maxFilters);
 this.cMap.labelFilters(lblFilters);
 }
 
 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);
 }
 
})()