<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script src="https://api.cmapsanalytics.net/mapview?version=4.1"></script>

<div id="CMapsCustomDIV"></div>
#mapDiv {
  height:100%;
  width:100%;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
}
var mapCfg = '<mapView createdBy="name:cMapsAnalyticsDesigner;version:3.0" createdOn="7/2/2016"><viewName>My View</viewName><viewDescription></viewDescription><tags></tags><templateVersion></templateVersion><key>centigondemoservers</key><googlePremierKey></googlePremierKey><dynamicZoomEnabled>true</dynamicZoomEnabled><currentLocationOnLoadDisabled>true</currentLocationOnLoadDisabled><panCoords></panCoords><zoomLevel></zoomLevel><dynamicZoomOnShapeSelect>false</dynamicZoomOnShapeSelect><dynamicZoomOnClusterSelect>true</dynamicZoomOnClusterSelect><dynamicZoomOnPointSelect>false</dynamicZoomOnPointSelect><showBreadcrumbsOnDrill>true</showBreadcrumbsOnDrill><dynamicZoomOnDrill>true</dynamicZoomOnDrill><multiSelectEnabled>false</multiSelectEnabled><adhocPanelVisibility>false</adhocPanelVisibility><radiusMeasureUnit>km</radiusMeasureUnit><indoorEnabled>true</indoorEnabled><sslEnabled>true</sslEnabled><useAdvancedInfowindow>false</useAdvancedInfowindow><includeAdvancedInfWinSummaryCard>true</includeAdvancedInfWinSummaryCard><includeAdvancedInfWinFilterCard>true</includeAdvancedInfWinFilterCard><includeAdvancedInfWinSearchCard>true</includeAdvancedInfWinSearchCard><includeAdvancedInfWinExportCard>true</includeAdvancedInfWinExportCard><includeAdvancedInfWinDriveCard>true</includeAdvancedInfWinDriveCard><includeAdvancedInfWinDrillCard>true</includeAdvancedInfWinDrillCard><includeAdvancedInfWinSelectCard>true</includeAdvancedInfWinSelectCard><includeAdvancedInfWinStreetViewCard>true</includeAdvancedInfWinStreetViewCard><includeAdvancedInfWinHelpCard>true</includeAdvancedInfWinHelpCard><advancedInfoWindowJsonCfg></advancedInfoWindowJsonCfg><infoWindowFontFamily>Arial</infoWindowFontFamily><infoWindowFontSize>12</infoWindowFontSize><infoWindowFontColor>000000</infoWindowFontColor><infoWindowFontAlign>left</infoWindowFontAlign><infoWindowUseBoldFont>false</infoWindowUseBoldFont><infoWindowFontUnderlineEnabled>false</infoWindowFontUnderlineEnabled><infWinItalicFontEnabled>false</infWinItalicFontEnabled><infoWindowVisibility>true</infoWindowVisibility><infoWindowValueVisibility>true</infoWindowValueVisibility><infoWindowLayerNameVisibility>false</infoWindowLayerNameVisibility><glowVisibility>true</glowVisibility><glowColor>0000ff</glowColor><baseMapImageryStyleType>styleTypeRoadmap</baseMapImageryStyleType><showTrafficLayer>false</showTrafficLayer><showTransitLayer>false</showTransitLayer><showBikelayer>false</showBikelayer><legendVisibility>false</legendVisibility><clusterToggleControlVisibility>false</clusterToggleControlVisibility><navigationControlVisibility>true</navigationControlVisibility><currentLocationControlVisibility>false</currentLocationControlVisibility><mapReady>true</mapReady><layerSelected>false</layerSelected><zoomChanged>false</zoomChanged><centerChanged>false</centerChanged><reverseGeocodeResponse>false</reverseGeocodeResponse><latLngToReverseGeocode></latLngToReverseGeocode><geocodeResponse>false</geocodeResponse><addressToGeocode></addressToGeocode><visible>true</visible><indoorMapVisibility>false</indoorMapVisibility><showPinsForIndoorMapLocations>false</showPinsForIndoorMapLocations><directionPanelVisibility>false</directionPanelVisibility><directionWaypoints></directionWaypoints><currentLocation>false</currentLocation><useFreeApi>false</useFreeApi><layers><layer><name>MyLayer</name><description></description><type>points</type><sankeyJsonData></sankeyJsonData><cartoDBJsonVizURL></cartoDBJsonVizURL><cartoDBSubLayerId>null</cartoDBSubLayerId><cartoDBUser></cartoDBUser><cartoDBSqlQuery></cartoDBSqlQuery><cartoDBMeasFieldName>null</cartoDBMeasFieldName><cartoDBDrillColName>null</cartoDBDrillColName><cartoDBTorqueJsonVizURL></cartoDBTorqueJsonVizURL><cartoDBUsername></cartoDBUsername><cartoDBMapName></cartoDBMapName><cartoDBAuthKey></cartoDBAuthKey><cartoDBMapLayerName></cartoDBMapLayerName><cartoDBMapLayerInteractivity></cartoDBMapLayerInteractivity><cartoDBMapLayerTorqueCSS></cartoDBMapLayerTorqueCSS><useLayerSpecificApiInfWins>true</useLayerSpecificApiInfWins><useLayerSpecificApiTooltips>true</useLayerSpecificApiTooltips><cartoDBMapLayerUseHttps>true</cartoDBMapLayerUseHttps><indoorMapUrl></indoorMapUrl><shapeFileType>customUrl</shapeFileType><shapeFileUrl></shapeFileUrl><dataKeysUrl></dataKeysUrl><dataSourceType>statictsv</dataSourceType><dataSource></dataSource><dataSourceColumnOrder>dsLocationColumn,dsLabelColumn,dsValueColumn,dsColorColumn,dsCategoryColumn,dsDrillIdColumn</dataSourceColumnOrder><transparency>100</transparency><enabled>true</enabled><iconSize>20</iconSize><iconType>icon</iconType><clusterStyle>disabled</clusterStyle><dynamicSizeEnabled>false</dynamicSizeEnabled><useLogScale>false</useLogScale><visibility>true</visibility><drillLevel></drillLevel><drillEventTrigger>layerClicked</drillEventTrigger><drillParent>none</drillParent><drillVisibilityOverride>false</drillVisibilityOverride><useCurrentLocationAsStartPoint>false</useCurrentLocationAsStartPoint><travelMode>Driving</travelMode><travelUnits>IMPERIAL</travelUnits><markerLayerBindings></markerLayerBindings><useCacheDriveTimePolyService>on</useCacheDriveTimePolyService><wmsURL></wmsURL><wmsStyleString></wmsStyleString><wmsLayerString></wmsLayerString><esriMapServerURL></esriMapServerURL><layerColor>1b8dce</layerColor><alerts><alertIcons>pin,pin</alertIcons><alertType>type-choropleth</alertType><alertValues>25050,37575,100200</alertValues><numAlertLevels>4</numAlertLevels><alertHeatmapVals>25050,37575,100200</alertHeatmapVals><alertDefinition>high-values-good</alertDefinition><alertColors>#00328F,#336CB4,#66A6D9,#99E0FF</alertColors></alerts></layer><layer><name>My Layer</name><description></description><type>points</type><sankeyJsonData></sankeyJsonData><cartoDBJsonVizURL></cartoDBJsonVizURL><cartoDBSubLayerId>null</cartoDBSubLayerId><cartoDBUser></cartoDBUser><cartoDBSqlQuery></cartoDBSqlQuery><cartoDBMeasFieldName>null</cartoDBMeasFieldName><cartoDBDrillColName>null</cartoDBDrillColName><cartoDBTorqueJsonVizURL></cartoDBTorqueJsonVizURL><cartoDBUsername></cartoDBUsername><cartoDBMapName></cartoDBMapName><cartoDBAuthKey></cartoDBAuthKey><cartoDBMapLayerName></cartoDBMapLayerName><cartoDBMapLayerInteractivity></cartoDBMapLayerInteractivity><cartoDBMapLayerTorqueCSS></cartoDBMapLayerTorqueCSS><useLayerSpecificApiInfWins>true</useLayerSpecificApiInfWins><useLayerSpecificApiTooltips>true</useLayerSpecificApiTooltips><cartoDBMapLayerUseHttps>true</cartoDBMapLayerUseHttps><indoorMapUrl></indoorMapUrl><shapeFileType>customUrl</shapeFileType><shapeFileUrl></shapeFileUrl><dataKeysUrl></dataKeysUrl><dataSourceType>statictsv</dataSourceType><dataSource></dataSource><dataSourceColumnOrder>dsLocationColumn,dsLabelColumn,dsValueColumn,dsColorColumn,dsCategoryColumn,dsDrillIdColumn</dataSourceColumnOrder><transparency>100</transparency><enabled>true</enabled><iconSize>20</iconSize><iconType>flat</iconType><clusterStyle>disabled</clusterStyle><dynamicSizeEnabled>false</dynamicSizeEnabled><useLogScale>false</useLogScale><visibility>true</visibility><drillLevel></drillLevel><drillEventTrigger>none</drillEventTrigger><drillParent>none</drillParent><drillVisibilityOverride>false</drillVisibilityOverride><useCurrentLocationAsStartPoint>false</useCurrentLocationAsStartPoint><travelMode>Driving</travelMode><travelUnits>IMPERIAL</travelUnits><markerLayerBindings></markerLayerBindings><useCacheDriveTimePolyService>on</useCacheDriveTimePolyService><wmsURL></wmsURL><wmsStyleString></wmsStyleString><wmsLayerString></wmsLayerString><esriMapServerURL></esriMapServerURL><layerColor>008cff</layerColor><alerts><alertIcons>pin,pin</alertIcons><alertType>type-none</alertType><alertValues>25050,37575,100200</alertValues><numAlertLevels>2</numAlertLevels><alertHeatmapVals>25050,37575,100200</alertHeatmapVals><alertDefinition>high-values-good</alertDefinition><alertColors>c0c0c0,008800</alertColors></alerts></layer></layers></mapView>';

var cMap = new centigon.locationIntelligence.MapView("CMapsCustomDIV");

cMap.onLayersReady = 
  
function(){
  
console.log('layers are ready');

cMap.locations([['San Diego','34.052234,-118.243685'],['New York','Mexico']]);
cMap.labels([['San Diego','Los Angeles'],['New York','Mexico']]);
cMap.values([['200','300'],['200','300']]);
  }

cMap.onLayerSelected = function(lyr)
  {console.log('layer selected');
  }

cMap.parseConfig(mapCfg);
cMap.key("enter_your_own_key_d8d37yxn");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.