Embedding and Connecting CMaps Analytics

Embedding and Connecting CMaps Designer Template Views with CMaps Analytics JavaScript API

The bridge between the CMaps Analytics Designer and the CMaps Analytics JS API is our XML property file. This CMaps Analyics property file is generated and saved to your computer (and can be loaded back into Designer at a later date). Inside of this configuration file is all of the properties needed to generate your map. With only a couple of lines of code you can embed and initialize your map inside of an application:

apiintro

The following is a screenshot of basic output from CMaps Analytics Designer, which can be accessed directly inside of the application while designing the map.

//cmaps designer generated template 
var mapCfg = '<mapView createdBy="name:cMapsAnalyticsDesigner;version:3.0" createdOn="7/21/2016"><viewName>My View</viewName><viewDescription></viewDescription><tags></tags><templateVersion></templateVersion><key>ENTERKEY</key><googlePremierKey></googlePremierKey><sslEnabled>false</sslEnabled><dynamicZoomEnabled>true</dynamicZoomEnabled><currentLocationOnLoadDisabled>true</currentLocationOnLoadDisabled><panCoords></panCoords><zoomLevel></zoomLevel><dynamicZoomOnShapeSelect>false</dynamicZoomOnShapeSelect><dynamicZoomOnClusterSelect>false</dynamicZoomOnClusterSelect><dynamicZoomOnPointSelect>true</dynamicZoomOnPointSelect><showBreadcrumbsOnDrill>true</showBreadcrumbsOnDrill><dynamicZoomOnDrill>true</dynamicZoomOnDrill><multiSelectEnabled>false</multiSelectEnabled><adhocPanelVisibility>false</adhocPanelVisibility><radiusMeasureUnit>km</radiusMeasureUnit><indoorEnabled>true</indoorEnabled><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>true</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>Facilities</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>csv</dataSourceType><dataSource><![CDATA[]]></dataSource><dataSourceColumnOrder>dsLocationColumn,dsLabelColumn,dsValueColumn,dsColorColumn,dsCategoryColumn,dsDrillIdColumn</dataSourceColumnOrder><transparency>100</transparency><enabled>true</enabled><iconSize>20</iconSize><iconType>pin</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>1b8dce</layerColor><alerts><alertIcons>pin,pin</alertIcons><alertType>type-none</alertType><alertValues>50,100</alertValues><numAlertLevels>2</numAlertLevels><alertHeatmapVals>50,100</alertHeatmapVals><alertDefinition>high-values-good</alertDefinition><alertColors>c0c0c0,008800</alertColors></alerts></layer><layer><name>Related Customers</name><description></description><type>hubspoke</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>csv</dataSourceType><dataSource><![CDATA[]]></dataSource><dataSourceColumnOrder>dsLocationColumn,dsLabelColumn,dsValueColumn,dsColorColumn,dsCategoryColumn,dsDrillIdColumn</dataSourceColumnOrder><transparency>100</transparency><enabled>true</enabled><iconSize>2</iconSize><iconType>pin</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>1b8dce</layerColor><alerts><alertIcons>pin,pin</alertIcons><alertType>type-none</alertType><alertValues>50,100</alertValues><numAlertLevels>2</numAlertLevels><alertHeatmapVals>50,100</alertHeatmapVals><alertDefinition>high-values-good</alertDefinition><alertColors>c0c0c0,008800</alertColors></alerts></layer></layers></mapView>';

var cMap;

Connecting to Data

CMaps Analytics Designer provides multiple methods for loading data into a map including CSV and JSON, or direct integration into applications using JavaScript APIs. You can also rapidly prototype and test your data using a copy/paste from Excel feature. CMaps Analytics has a basic set of data fields for which it will require data:

  • Locations (lat, long or addresses or location names for shapefiles)
  • Labels (basic or HTML labels)
  • Values (measure)
  • Color (optional if you want to feed the map colors)
  • Category (optional dimension field used for specific features in the map like pie charts and other future planned features)
  • Drill IDs (Allow you to drill between layers using IDs from the parent layer for each record)

//locations
var locations = [["37.7693911,-122.41750","37.7480245,-122.4208806","37.7512649,-122.4201445","37.789675,-122.417049","37.7565985,-122.4045723","37.7956765,-122.4092976","37.7630855,-122.4578733","37.7739893,-122.4544912","37.7473074,-122.4592076","37.780416,-122.403231"]];

//labels
var labels = [["one","two","three","four","five","six","seven","eight","nine","ten"]];

//values
var values = [[20,30,40,50,60,70,80,90,100,110]];

//colors (optional field)
var colors = [["#0000ff","#c0c0c0","#ff0000","#124568","#f05264","#00ff00"]];

//default color for layers
var defaultLayerColors = ["#FFFF00"];

Learn more about Designer Data Options

Capture

Working with Map Events

Built into CMaps Analytics Designer is an “Advanced” tab that allows a developer to expose any number of common events. As a map designer or developer exposes these events, CMaps Analytics Designer will automatically stub them out for easy integration into your application.


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

cMap.onZoomChanged = function(){console.log('zoom changed');}

cMap.onCenterChanged = function(){console.log('center changed');}

cMap.onCurrentLocationChanged = function(){console.log([map].currentLocation());}

Capture

Next Post