Search Widget

Search widget provides 2 standard UI interfaces. The search bar is placed on top of the map and visible at all times, allowing users to quickly navigate to any location.

The search card, provides the same search capabilities as a tab. Users can enter any address or geography, and upon clicking Pan/Zoom to, the map will automatically go to the entered location.

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">
 Go to
 </div>
 </div>
 
 5px;padding: 10px;">
 txtZoomTo" type="text" placeholder="Address or lat,lng"/>
 <p/>
 <div class="com_cmapsanalytics_actionheaderlinks">
 btnZoomTo">Pan/Zoom to
 </div>
 </div>
 
</div>

JavaScript

(function(){

 createNamespaceUnderCentigon("ui.SearchMapCard");

 centigon.ui.SearchMapCard = function(){
 
 centigon.ui.Card.call(this);
 
 this.cMap;
 
 this.contentUrl = this.getCardAssetUrl() + "SearchMapCardMarkup.txt";
 
 this.controlIdToRandomId = {
 txtZoomTo: this._domUtil.getRandomDivId(),
 btnZoomTo: this._domUtil.getRandomDivId()
 };

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

 centigon.ui.SearchMapCard.prototype.addEventListeners = function(){
 
 var that = this;
 
 this.domObjByRandField("btnZoomTo").click(function(){
 if(that.domObjByRandField("txtZoomTo").val() !== ""){
 that.cMap.panTo(that.domObjByRandField("txtZoomTo").val());
 that.cMap.zoomLevel(15);
 }
 });
 }
 
})()