Summary widget can be utilized to view basic information about individual layers in a map, points / regions, or what is visible. By default the summary widget will display the first layer details.

Layer Selection

Click on a layer name to expand a complete list of available layers. Click on a layer to collapse the list. Each layer can be enabled / disabled by clicking on the check box.

Selected Layer Location Details

LABEL: When selecting on a map element (point / region), it will display the contents “Labels” in a scrollable text field. You can use HTML to display more detailed information about each location.

VALUE: The chart view will display the min / max and median for your layer. When selecting a map element (point / region) it will display an icon relative to the min / max scale.

Layer Summary

[ezcol_1half]

Layer summary provides 3 modes to provide relevant summary information.

Current Viewable Area
What is visible on the map based on where a user has panned / zoomed to.

Selected Location(s)
What is selected on the map by click or using the multi selection (lasso) options.

Entire Layer
All locations on the map even when they are not visible.

[/ezcol_1half] [ezcol_1half_end]

[/ezcol_1half_end]

 

Summary Statistics

Summary statistics provides details based on the layer summary selection. The goal is to provide relevant statistics as end users navigate and interact with a map.

API Details

Card Markup and CSS

<div>

 <div class="com_cmapsanalytics_cardheader com_cmapsanalytics_card_innerbox">
 <div id="lblLayerName" class="com_cmapsanalytics_alignleft com_cmapsanalytics_card_title">
 Layer Info
 </div>
 </div>
 
 <div class="com_cmapsanalytics_input_group com_cmapsanalytics_fullwidth">
 
 <div id="descriptionHolder" class="com_cmapsanalytics_descriptionholder">
 <div id="selectedLayerObjDescription" class="com_cmapsanalytics_selectedlayerobjdescription">[No Description]</div>
 <!--SIDE MENU--> 
 <div class="com_cmapsanalytics_card_innerbox" style="top: 0px;position: absolute;right: 5px;">
 <div id="btnDrill" class="com_cmapsanalytics_card_sidemenubutton com_cmapsanalytics_menu_drill" style="clear:both;">
 <span style="text-align:center; top:32px; width:22px; position:absolute; font-size:12px; font-size: 11px;
 font-weight: 500; text-transform: uppercase;">Drill</span></div>
 <br/>
 <div id="btnStreetView" class="com_cmapsanalytics_card_sidemenubutton com_cmapsanalytics_menu_street" style="clear:both;margin-top: 8px;"></div>
 </div>
 <br/>
 
 <div class="com_cmapsanalytics_card com_cmapsanalytics_bordertopbottom">
 <div class="com_cmapsanalytics_layerselector">
 <div class="com_cmapsanalytics_dropdown_expand"> 
 <div class="com_cmapsanalytics_dropdown_expand com_cmapsanalytics_card_innerbox">
 <div class="com_cmapsanalytics_toggleslidingselectmenu com_cmapsanalytics_card_topmenubutton com_cmapsanalytics_menu_dropdownsmall com_cmapsanalytics_alignright">
 </div>
 <a class="com_cmapsanalytics_slidingmenu_selectedlabel">Show Metrics For: </a>
 </div>
 <div class="com_cmapsanalytics_accordian com_cmapsanalytics_accordian_scroll">
 <div class="com_cmapsanalytics_selectlist">
 <div class="com_cmapsanalytics_layers_dropdown com_cmapsanalytics_selectlist_item">
 <a id="currentviewport">Current Viewable Area</a>
 <a id="selectedlocations">Selected Location(s)</a>
 <a id="entirelayer">Entire Layer</a>
 </div>
 </div>
 </div>
 </div> 
 </div>
 </div>
 </div>
 
 <div id="lyrMetrics" class="com_cmapsanalytics_lyrmetrics">
 
 <div style="padding-top: 10px;z-index: 25;height:30px;position: relative;">
 <div id="btnShowNumbers" class="com_cmapsanalytics_card_topfloatingmenubutton com_cmapsanalytics_alignright" style=" right:8px;"></div>
 <div class="com_cmapsanalytics_card_topfloatingmenubutton com_cmapsanalytics_alignright" style="right: 30px;width: 10px;background-image: url('https://gmapsplugin.net/cmapsanalytics/assets/v3/advancedInfoWindow/icons/SmallSeperator.png');"></div>
 <div id="btnShowChart" class="com_cmapsanalytics_card_topfloatingmenubutton com_cmapsanalytics_alignright" style=" right:40px;"></div>
 </div>
 
 <div id="lyrChart" class="com_cmapsanalytics_lyrchart">
 <div id="lyrChartMedianLabel" class="com_cmapsanalytics_lyrchartmedianlabel">Median: </div>
 <div id="lyrChartMax" class="com_cmapsanalytics_lyrchartmax">Max: </div>
 <div id="lyrChartMin" class="com_cmapsanalytics_lyrchartmin">Min: </div>
 <div id="lyrChartBullet" class="com_cmapsanalytics_lyrchartbullet">
 <div class="com_cmapsanalytics_lyrchartborder"></div>
 <div id="lyrChartRightFill" class="com_cmapsanalytics_lyrchartrightfill"></div>
 <div id="lyrChartLeftFill" class="com_cmapsanalytics_lyrchartleftfill"></div>
 <div id="lyrChartMedianLine" class="com_cmapsanalytics_lyrchartmedianline"></div>
 </div>
 <div class="com_cmapsanalytics_lyrChartPoints">
 <div id="lyrChartPointMain" class="com_cmapsanalytics_lyrchartpointmain"></div>
 <div id="lyrChartPointMainValLabel" class="com_cmapsanalytics_lyrchartpointmainvallabel"></div>
 </div>
 </div>
 
 <div id="lyrChartLabels" class="com_cmapsanalytics_lyrchartlabels">
 <div id="lyrChartPointMyValue" class="com_cmapsanalytics_lyrchartpointmyvalue">My Value: 9,956,000</div>
 <div id="lyrChartLabelsArea" class="com_cmapsanalytics_lyrchartlabelsarea">Area: </div>
 <div id="lyrChartLabelsTotal" class="com_cmapsanalytics_lyrchartlabelstotal">Total: </div>
 <div id="lyrChartLabelsCount" class="com_cmapsanalytics_lyrchartlabelscount">Count: </div>
 <div id="lyrChartLabelsAvg" class="com_cmapsanalytics_lyrchartlabelsavg">Avg: </div>
 <div id="lyrChartLabelsRank" class="com_cmapsanalytics_lyrchartlabelsrank">Rank: </div>
 </div>
 
 </div>
 </div>
 
</div>


<style type="text/css">

.com_cmapsanalytics_lyrchart{
 height: 75px;
 position: relative;
 left: 10px;
 right: 0px;
 top: -5px;
 color: #737C85;
}

.com_cmapsanalytics_lyrchartbullet{
 width: 280px;
 height: 35px;
 background-color: #F8F8F8;
 position: relative;
 border: #3A73B9;
 border-style: solid;
 border-width: 1px;
 bottom: 0px;
 top: 30px;
}

.com_cmapsanalytics_lyrchartmedianlabel{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 10px;
 left: 25px;
 font-weight: bold;
}

.com_cmapsanalytics_lyrchartmedianline{
 width: 2px;
 height: 100%;
 position: absolute;
 top: 0px;
 background-color: #3A73B9;
 left: 25px;
}

.com_cmapsanalytics_lyrchartlabels{
 left: 10px;
 padding-right: 20px;
 top: 0px;
 position: relative;
 display:none;
}

.com_cmapsanalytics_lyrchartmax{
 position: absolute;
 top: 65px;
 right: 50px;
 font-weight: bold;
}

.com_cmapsanalytics_lyrchartmin{
 position: absolute;
 top: 65px;
 left: 0px;
 font-weight: bold;
}

.com_cmapsanalytics_lyrchartpoints{
 position: absolute;
 top: 39px;
 width: 300px;
 height: 20px;
 z-index: 3;
}

.com_cmapsanalytics_sellayerobjdescription{
 max-height: 40px;
 height: 40px;
}

.com_cmapsanalytics_lyrchartpointmain{
 position: absolute;
 background-color: #3A73B9;
 border-radius: 20px;
 width: 18px;
 height: 18px;
}

.com_cmapsanalytics_lyrchartpointmainvallabel{
 position: absolute;
 background-color: rgba(58, 115, 185, 0.1);
 height: 18px;
 font-weight: bold;
}

.com_cmapsanalytics_descriptionholder{
 position: relative;
 right: 50px;
 left: 0px;
}
 
.com_cmapsanalytics_lyrchartpointmyvalue{
 color: rgba(255, 85, 0, 0.81);font-weight: bold;background-color: rgba(58, 115, 185, 0.13);
}

.com_cmapsanalytics_lbllayername{
 position: absolute;top: 7px;left: 25px;
}

.com_cmapsanalytics_lyrchartborder{
 width: 125px;height: 100%;position: absolute;top: 0px;
}

.com_cmapsanalytics_lyrchartrightfill{
 background-color:#ffffff;width: 125px;height: 100%;position: absolute;right:0px;top: 0px;
}

.com_cmapsanalytics_lyrchartleftfill{
 z-index:2;background-color:#c0c0c0;width: 155px;height: 100%;position: absolute;top: 0px;
}

.com_cmapsanalytics_lyrchartmedianlabel{
 z-index: 1;
}

.com_cmapsanalytics_selectedlayerobjdescription{ 
 overflow-y: scroll;
 height: 80px;
 right: 50px;
 left: 5px;
 position: relative;
 margin-right: 50px;
}

</style>

JavaScript

(function(){

 createNamespaceUnderCentigon("ui.SummaryCard");

 centigon.ui.SummaryCard = function(){
 
 centigon.ui.Card.call(this);
 
 this.contentUrl = this.getCardAssetUrl() + "SummaryCardMarkup.txt";
 
 this._calcCriteria = "currentviewport";
 
 this.controlIdToRandomId = {
 lblLayerName: this._domUtil.getRandomDivId(),
 lyrMetrics: this._domUtil.getRandomDivId(),
 lyrChart: this._domUtil.getRandomDivId(),
 lyrChartMedianLabel: this._domUtil.getRandomDivId(),
 lyrChartMax: this._domUtil.getRandomDivId(),
 lyrChartMin: this._domUtil.getRandomDivId(),
 lyrChartBullet: this._domUtil.getRandomDivId(),
 lyrChartRightFill: this._domUtil.getRandomDivId(),
 lyrChartLeftFill: this._domUtil.getRandomDivId(),
 lyrChartMedianLine: this._domUtil.getRandomDivId(),
 lyrChartPointMain: this._domUtil.getRandomDivId(),
 lyrChartPointMainValLabel: this._domUtil.getRandomDivId(),
 lyrChartLabels: this._domUtil.getRandomDivId(),
 lyrChartPointMyValue: this._domUtil.getRandomDivId(),
 lyrChartLabelsArea: this._domUtil.getRandomDivId(),
 lyrChartLabelsTotal: this._domUtil.getRandomDivId(),
 lyrChartLabelsCount: this._domUtil.getRandomDivId(),
 lyrChartLabelsAvg: this._domUtil.getRandomDivId(),
 lyrChartLabelsRank: this._domUtil.getRandomDivId(),
 descriptionHolder: this._domUtil.getRandomDivId(),
 selectedLayerObjDescription: this._domUtil.getRandomDivId(),
 btnShowNumbers: this._domUtil.getRandomDivId(),
 btnShowChart: this._domUtil.getRandomDivId(),
 btnDrill: this._domUtil.getRandomDivId(),
 btnStreetView: this._domUtil.getRandomDivId()
 };
 
 this._viewUpdateTimer;
 }
 
 centigon.ui.SummaryCard.constructor = centigon.ui.Card;
 centigon.ui.SummaryCard.prototype = new centigon.ui.Card();
 
 centigon.ui.SummaryCard.prototype.getHtml = function(gotHtml){
 
 this.getRemoteContent({url: this.contentUrl, success: gotHtml});
 }

 centigon.ui.SummaryCard.prototype.addEventListeners = function(){
 
 var that = this;
 
 var slidingMenu = new centigon.ui.SlidingSelectMenu(this.domObj(this.options.divId));
 slidingMenu.change = function(rawDomObj){
 
 that._calcCriteria = rawDomObj.id;
 that.updateView();
 }
 
 var btnOpts = [{
 id: this.controlIdToRandomId["btnShowChart"],
 iconUrl: "https://gmapsplugin.net/cmapsanalytics/assets/v3/advancedInfoWindow/icons/mdpi/menu_chart@1x.png",
 iconSelectedUrl: "https://gmapsplugin.net/cmapsanalytics/assets/v3/advancedInfoWindow/icons/mdpi/menu_chart_selected@1x.png"
 }
 ,
 {
 id: this.controlIdToRandomId["btnShowNumbers"],
 iconUrl: "https://gmapsplugin.net/cmapsanalytics/assets/v3/advancedInfoWindow/icons/mdpi/menu_numbers@1x.png",
 iconSelectedUrl: "https://gmapsplugin.net/cmapsanalytics/assets/v3/advancedInfoWindow/icons/mdpi/menu_numbers_selected@1x.png"
 }
 ];
 var toggleBtnMenu = new centigon.ui.ToggleButtonMenu(btnOpts);
 
 this.domObjByRandField("btnShowNumbers").click(function(){
 
 that.domObjByRandField("lyrChartLabels").show();
 that.domObjByRandField("lyrChart").hide();
 });
 
 this.domObjByRandField("btnShowChart").click(function(){
 
 that.domObjByRandField("lyrChart").show();
 that.domObjByRandField("lyrChartLabels").hide();
 });
 
 this.domObjByRandField("btnDrill").click(function(){
 
 that.cMap.triggerLayerChildClick(that.layer.positionInMapDataProvider, that.layer.selectedIndex);
 });
 
 this.domObjByRandField("btnStreetView").click(function(){
 
 that.openStreetView();
 });
 
 this.manageStreetViewButtonVis();
 }
 
 centigon.ui.SummaryCard.prototype.viewportChanged = function(){

 this.updateView();
 }
 
 centigon.ui.SummaryCard.prototype.aiwLayerChanged = function(){
 
 this.updateView();
 this.manageStreetViewButtonVis();
 this.manageDrillButtonVis();
 }
 
 centigon.ui.SummaryCard.prototype.layerSelected = function(){
 
 this.manageStreetViewButtonVis();
 this.updateView();
 }
 
 centigon.ui.SummaryCard.prototype.manageDrillButtonVis = function(){
 
 var that = this;
 
 var selLabel = this.layer.getSelectedLabel() ? this.layer.getSelectedLabel() : null;
 if(this.layer.selectedObjectType && this.layer.selectedObjectType === "cluster"){
 selLabel = null;
 }
 
 if(selLabel && this.cMap.drillLevelsExistBelowLayer(this.layer)){
 
 this.domObjByRandField("btnDrill").show();
 }
 else{
 this.domObjByRandField("btnDrill").hide();
 }
 }
 
 centigon.ui.SummaryCard.prototype.manageStreetViewButtonVis = function(){
 
 var streetViewButtonDomObj = this.domObjByRandField("btnStreetView");
 
 if(this.cMap.hasCapability(centigon.mapping.MapApiAdapter.CAPABILITY_NAMES.STREET_VIEW) === false){
 
 streetViewButtonDomObj.hide();
 return;
 }
 
 var selLoc = this.layer.getSelectedLocation();
 
 if(this.cMap.layerTypeIsMarkerOrHeat(this.layer.type) === true && selLoc){
 
 var streetViewExistsOpts = {};
 streetViewExistsOpts.location = selLoc;
 streetViewExistsOpts.success = function(){
 
 streetViewButtonDomObj.show();
 }
 streetViewExistsOpts.failed = function(){
 
 streetViewButtonDomObj.hide();
 }
 
 this.cMap.cMap.getMapApiAdapter().streetViewExistsAtLocation(streetViewExistsOpts);
 }
 else{
 
 streetViewButtonDomObj.hide();
 }
 }
 
 centigon.ui.SummaryCard.prototype.updateView = function(){
 
 if(this._viewUpdateTimer){
 clearTimeout(this._viewUpdateTimer);
 }
 
 var that = this;
 var updateViewActual = function(){
 
 that.domObjByRandField("lblLayerName").text(that.layer.displayName);
 that.updateChart();
 that.updateMetricLabels();
 that.manageDrillButtonVis();
 }
 
 this._viewUpdateTimer = setTimeout(updateViewActual, 500);
 }
 
 centigon.ui.SummaryCard.prototype.updateChart = function(){
 
 this.applyRestrictCalcsToVisible();
 
 var chrtWdth = this.domObjByRandField("lyrChartBullet").width() - 1;
 var min = this.layer.getMin();
 var max = this.layer.getMax();
 var median = this.layer.getMedian();
 var medianLeftPx;
 var myValPointLeftPx = 0;
 var medianLeftPx = 0;
 var leftChartLeftFillWidth = 0;
 var rightChartLeftFillWidth = 0;
 
 var myVal = this.layer.getSelectedValue() ? this.layer.getSelectedValue() : "[No Data]";
 var myDisplayVal = myVal;
 if(myVal === "[No Data]"){
 this.domObjByRandField("lyrChartPointMain").hide();
 this.domObjByRandField("lyrChartPointMainValLabel").hide();
 }
 else{
 this.domObjByRandField("lyrChartPointMain").show();
 this.domObjByRandField("lyrChartPointMainValLabel").show();
 
 var lyrSortedVals = this._utilFactory.getCollectionIterator(this.layer.getValues());
 lyrSortedVals.sortDescending();
 lyrSortedVals = this._utilFactory.getCollectionIterator(lyrSortedVals.cloneSourceArray());
 
 myDisplayVal = this._strUtil.getFormattedAbbreviatedDisplayValue(myVal);
 myValPointLeftPx = chrtWdth * (myVal/max);
 var myPointWidth = this.domObjByRandField("lyrChartPointMain").width();
 if(myValPointLeftPx < 0){
 myValPointLeftPx = 0;
 }
 else if(myValPointLeftPx > (chrtWdth - (myPointWidth/2))){
 myValPointLeftPx = chrtWdth - (myPointWidth/2);
 }
 }
 
 medianLeftPx = chrtWdth * (median/max);
 
 leftChartLeftFillWidth = medianLeftPx;
 rightChartLeftFillWidth = chrtWdth - medianLeftPx;
 
 //update chart labels
 this.domObjByRandField("lyrChartMedianLabel").text("Median: " + this.getNumericDisplayValue(this.layer.getMedian()));
 this.domObjByRandField("lyrChartMax").text("Max: " + this.getNumericDisplayValue(this.layer.getMax()));
 this.domObjByRandField("lyrChartMin").text("Min: " + this.getNumericDisplayValue(this.layer.getMin()));
 
 //update chart layout
 if(this.bulletChartHasSufficientData()){
 this.domObjByRandField("lyrChartPointMain").css("left", myValPointLeftPx + "px");
 this.domObjByRandField("lyrChartPointMainValLabel").css("left", parseInt(myValPointLeftPx + 18) + "px");
 this.domObjByRandField("lyrChartPointMainValLabel").html(myDisplayVal);
 this.domObjByRandField("lyrChartLeftFill").width(leftChartLeftFillWidth);//everything below median is gray
 this.domObjByRandField("lyrChartRightFill").width(rightChartLeftFillWidth);//everything above median is white
 this.domObjByRandField("lyrChartMedianLine").css("left", medianLeftPx + "px");//median line 
 this.domObjByRandField("lyrChartMedianLabel").css("left", medianLeftPx + "px");//median line 
 }
 else{
 this.domObjByRandField("lyrChartPointMain").hide();
 this.domObjByRandField("lyrChartPointMainValLabel").hide();
 this.domObjByRandField("lyrChartLeftFill").width(0);//everything below median is gray
 this.domObjByRandField("lyrChartRightFill").width(0);//everything above median is white
 this.domObjByRandField("lyrChartMedianLine").css("left", "0px");//median line 
 this.domObjByRandField("lyrChartMedianLabel").css("left", "0px");//median line 
 }
 }
 
 centigon.ui.SummaryCard.prototype.bulletChartHasSufficientData = function(){
 
 //update chart labels
 if(this.getNumericDisplayValue(this.layer.getMedian()) !== "[No Data]" &&
 this.getNumericDisplayValue(this.layer.getMedian()) !== "[No Data]" &&
 this.getNumericDisplayValue(this.layer.getMedian()) !== "[No Data]"){
 return true;
 }
 else{
 return false;
 }
 }
 
 centigon.ui.SummaryCard.prototype.updateMetricLabels = function(){
 
 var myRankPos;
 var myRankDisplayValue = "[No Data]";
 var myVal = this.layer.getSelectedValue() ? this.layer.getSelectedValue() : "[No Data]";
 var myDisplayVal = myVal;
 
 if(myVal !== "[No Data]"){
 var lyrSortedVals = this._utilFactory.getCollectionIterator(this.layer.getValues());
 lyrSortedVals.sortDescending();
 lyrSortedVals = this._utilFactory.getCollectionIterator(lyrSortedVals.cloneSourceArray());
 
 myRankPos = lyrSortedVals.getValueIndex(myVal) + 1;
 myRankDisplayValue = myRankPos + "/" + this.layer.getCount();
 myDisplayVal = this.getNumericDisplayValue(myVal);
 }

 this.applyRestrictCalcsToVisible();
 
 var selLabel = this.layer.getSelectedLabel() ? this.layer.getSelectedLabel() : "[No Description]";
 if(this.layer.selectedObjectType && this.layer.selectedObjectType === "cluster"){
 selLabel = "Cluster Selected";
 }
 this.domObjByRandField("selectedLayerObjDescription").html(selLabel); 
 this.manageDrillButtonVis(); 
 
 var areaVportMeters = this.cMap.getAreaOfViewportInMeters();
 var areaVportSqMiles = this.getNumericDisplayValue(areaVportMeters * 0.000000386102159);
 var areaVportSqKm = this.getNumericDisplayValue(areaVportMeters * 0.000001);
 
 var areaHtml = '<div>Area: [sq. mi.] '+areaVportSqMiles+' [sq. km.] '+areaVportSqKm+'</div>';
 
 this.domObjByRandField("lyrChartPointMyValue").text("My Value: " + myDisplayVal);
 this.domObjByRandField("lyrChartLabelsArea").html(areaHtml);
 this.domObjByRandField("lyrChartLabelsTotal").text("Total: " + this.getNumericDisplayValue(this.layer.getSum()));;
 this.domObjByRandField("lyrChartLabelsCount").text("Count: " + this.getNumericDisplayValue(this.layer.getCount()));;
 this.domObjByRandField("lyrChartLabelsAvg").text("Avg: " + this.getNumericDisplayValue(this.layer.getAvg()));;
 this.domObjByRandField("lyrChartLabelsRank").text("Rank: " + myRankDisplayValue);
 }
 
 centigon.ui.SummaryCard.prototype.getNumericDisplayValue = function(val){
 
 if(isNaN(val) === true || isFinite(val) === false){
 return "[No Data]";
 }
 else{
 return this._strUtil.getFormattedAbbreviatedDisplayValue(val);
 }
 }
 
 centigon.ui.SummaryCard.prototype.applyRestrictCalcsToVisible = function(){
 
 var calcCriteria = this._calcCriteria;
 
 this.layer.restrictCalcsToVisible = true;
 
 if(calcCriteria === "selectedlocations"){
 this.layer.restrictCalcsToSelected = true;
 }
 else{
 this.layer.restrictCalcsToSelected = false;
 }
 
 if(calcCriteria === "currentviewport" || calcCriteria === "selectedlocations"){
 this.layer.restrictCalcsToVisible = true;
 this.layer.restrictCalcsToViewport = true;
 }
 else if(calcCriteria === "entirelayer"){
 this.layer.restrictCalcsToVisible = false;
 this.layer.restrictCalcsToViewport = false;
 }
 }
 
 centigon.ui.SummaryCard.prototype.openStreetView = function(){
 
 var tmpStreetViewDivId = this._domUtil.getRandomDivId();
 var btnCloseStreetViewId = this._domUtil.getRandomDivId(); 
 var divStreetViewTargetId = this._domUtil.getRandomDivId();
 var closeButtonBgImage = "background-image: url('https://gmapsplugin.net/cmapsanalytics/assets/v3/advancedInfoWindow/icons/mdpi/black_close2.png');";
 var absRightPos = this.domObj(this.cMap.advancedInfoWindowDivId).width();
 
 var div = '<div style="position:absolute;left:0px;top:0px;right:'+ absRightPos +'px;bottom:0px;" id="'+tmpStreetViewDivId+'">';
 div += ' <div id="'+btnCloseStreetViewId+'" style="'+ closeButtonBgImage +'cursor: pointer; background-size: cover; position: absolute; right: 55px; height: 25px; width: 25px; top: 10px; z-index: 1;"></div>';
 div += ' <div id="'+divStreetViewTargetId+'" style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;"></div>';
 div += ' </div>';
 
 this.domObj(this.cMap.getDivId()).append(div);
 
 var streetViewDomObj = this.domObj(tmpStreetViewDivId);
 
 this.domObj(btnCloseStreetViewId).click(function(e){
 streetViewDomObj.remove();
 });
 
 var autoCloseStreetView = function(){
 setTimeout(function(){
 streetViewDomObj.fadeOut( "slow", function() {
 streetViewDomObj.remove();
 });
 }, 1000);
 };
 
 this.cMap.cMap.getMapApiAdapter().createStreetViewMap({divId: divStreetViewTargetId, location: this.layer.getSelectedLocation(), failed: autoCloseStreetView});
 
 }
 
})()