Common Functionality

All native CMaps layers, like points, shapes, lines, heatmaps, etc., share the same
useful common features, such as alerts, drilling, client-side filtering, etc.
However, due to security constraints in private 3rd party layer situations (e.g. Named Maps in CartoDB),
not all layers can share the exact same functionality as
the native CMaps layers.

Most functionality – 3rd party layers permitting data access

Any time we can get access to the underlying layer metadata from a 3rd party system, we
implement the functionality as-seen in our native layers (like alerts and drilling) so long as there aren’t restrictions
we can’t overcome. For example, CartoDB Public/Anonymous maps can use CMaps alerts and drilling, because we
can get access to the corresponding metadata and subsequently make changes to the layer using their API.

Lowest common denominator – 3rd party private layers

At the bare minimum in the most restrictive security situations, “private data”
layers can be at least given a name and have their
visibility toggled on the map. For example, CartoDB Named/Private maps cannot use CMaps alerts or drilling, because we
cannot get access to the corresponding metadata or make changes to the layer using their API.

Lowest common denominator functions

//Shows layer
cMap.showLayer(layer);
//Hides layer
cMap.hideLayer(layer);

//Hides layer 1, shows layer 2
cMap.layersVisible([false, true]);

//Disables mouse for layer 1, enables mouse for layer 2
cMap.layersMouseEnabled([false, true]);

//Half-transparency for layer 1, full opacity for layer 2
cMap.layersTransparency([.5, 1]);

Alerts

Multiple alert types are supported and are driven by the data. You can do things like change the colors/visibility of objects, as well
as change icon types as they cross alert thresholds, for points layers.

For a complete list of functionality, check out the API Reference.

Target Based

cMap = new centigon.locationIntelligence.MapView();

cMap.layerNames(["Layer Metrics"]).values([[10,220,300,400,505]]).locations([["Alaska", "Arizona", "Arkansas", "California", "Colorado"]]);

cMap.key("centigondemoservers");

cMap.alertIsHighGood([true]).
	alertTargetEnabled([true]).
	alertEnabled([true]).
	alertTypes(["type-target"]).
	alertTargets([[10,200]]).
	alertLimits([[10,150]]).
	alertColors([["c0c0c0","008800","#800080"]]).
	alertIcons([["pin","pin"]]);

Value Based

cMap = new centigon.locationIntelligence.MapView();

cMap.layerNames(["Layer Metrics"]).values([[10,20,30,40,505]]).locations([["Alaska", "Arizona", "Arkansas", "California", "Colorado"]]);

cMap.key("centigondemoservers");

cMap.alertIsHighGood([true]).
	alertTargetEnabled([false]).
	alertEnabled([true]).
	alertTypes(["type-value"]).
	alertTargets([[10,500]]).
	alertLimits([[10,500]]).
	alertColors([["c0c0c0","008800","#800080"]]).
	alertIcons([["pin","pin"]]);

Choropleth

var cMap = new centigon.locationIntelligence.MapView();
cMap.key([your_api_key]);

	
var locations = ['32.715738,-117.161084','34.052234,-118.243685',
				'36.715738,-114.161084','32.515738,-115.161084',
				'37.715738,-111.161084','33.715738,-114.161084'];

cMap.alertEnabled([true]).
	alertColors([["#FF0000","#FFFF00","#00FF00"]]).
	alertTypes(["type-choropleth"]);

cMap.layerNames(["Layer Metrics"]).values([[10,20,30,40,50,60]]).locations([locations]);

cMap.useDynamicZoom(true);

Utility functions

It can be helpful when developing applications to get the same alert colors out of the map for
other controls on the page, such as a column chart that wanted to use the same alert colors/logic
as the corresponding layer.

//layerIx, Data Values
cMap.getLayerAlertColors(0, [20,50,60,80]);

Drilling

Drilling is handled the same across all layers, it’s all based on keys which are just string values. Below is an example of
a higher-level shape layer with 4 Regions, drilling into the underlying states, in a separate layer. Further, a button is
appended that shows how to programatically trigger drills, so that in addition to the user cliking the map to drill, other
elements in your app can be used to trigger drilling.

Region – To States drill example

var cMap = new centigon.locationIntelligence.MapView();
				
cMap.key([your_api_key]);

$("#"+cMap.getDivId()).append('<button id="btnDrillToWest" style="position:absolute;top:0px;left:0px;">Drill to Western States<button>');

var that = this;
$("#btnDrillToWest").click(
	function(){
		that.cMap.triggerLayerChildClick(0,3);
	}
);

cMap.layerNames(["Regions", "States"]);

cMap.layersVisibility([true, false]);
cMap.dbfKeys([["MidWest","South","East","West"], ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','District of Columbia','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming']]);
cMap.userShapeKeys([["MidWest","South","East","West"], ['Massachusetts','Minnesota','Montana','North Dakota','Hawaii','Idaho','Washington','Arizona','California','Colorado','Nevada','New Mexico','Oregon','Utah','Wyoming','Arkansas','Iowa','Kansas','Missouri','Nebraska','Oklahoma','South Dakota','Louisiana','Texas','Connecticut','New Hampshire','Rhode Island','Vermont','Alabama','Florida','Georgia','Mississippi','South Carolina','Illinois','Indiana','Kentucky','North Carolina','Ohio','Tennessee','Virginia','Wisconsin','West Virginia','Delaware','District of Columbia','Maryland','New Jersey','New York','Pennsylvania','Maine','Michigan','Alaska']]); 
cMap.labels([["MidWest","South","East","West"], ['Massachusetts','Minnesota','Montana','North Dakota','Hawaii','Idaho','Washington','Arizona','California','Colorado','Nevada','New Mexico','Oregon','Utah','Wyoming','Arkansas','Iowa','Kansas','Missouri','Nebraska','Oklahoma','South Dakota','Louisiana','Texas','Connecticut','New Hampshire','Rhode Island','Vermont','Alabama','Florida','Georgia','Mississippi','South Carolina','Illinois','Indiana','Kentucky','North Carolina','Ohio','Tennessee','Virginia','Wisconsin','West Virginia','Delaware','District of Columbia','Maryland','New Jersey','New York','Pennsylvania','Maine','Michigan','Alaska']]); 

cMap.drillParents(["none",0]); 

cMap.drillIds([["MidWest", "South", "East", "West"], 
['East','MidWest','West','MidWest','West','West','West','West','West','West',
'West','West','West','West','West','South','MidWest','MidWest','MidWest','MidWest',
'MidWest','MidWest','South','South','East','East','East','East','South','South',
'South','South','South','MidWest','MidWest','South','South','MidWest','South','East',
'MidWest','East','East','East','East','East','East','East','East','MidWest',
'West']]);
cMap.drillLevels([1,2]);
cMap.drillEventTriggers(["layerclicked","layerclicked"]);

cMap.polyDataSources([centigon.locationIntelligence.CMapAnalytics.DATA_PROVIDERS.SHAPE_DATAPROVIDER, centigon.locationIntelligence.CMapAnalytics.DATA_PROVIDERS.SHAPE_DATAPROVIDER]);
cMap.layerTypes([centigon.mapping.Layer.TYPE.POLY, centigon.mapping.Layer.TYPE.POLY]);
cMap.locations([["https://gmapsplugin.net/cmapsanalytics/assets/shapes/usregions4.shp"],
					 ["https://gmapsplugin.net/cmapsanalytics/assets/shapes/usstates.shp"]]);

cMap.panTo("USA");
cMap.zoomLevel(3);

Point-to-Shape Visibility Binding

Any Shapes/Regions or Radius layer can have any points/markers layers bound to it. This essentially creates a boundary filter,
where the bound points layer’s object’s visibility gets turned off/on based on whether it’s in the currently selected shape or if no shape’s selected,
whether or not the points fall within the overall shape(s) bounds.

Assuming a Shapes/Regions/Radius layer is Layer #1 in a 3-layer map, the code below
would bind Layers 2 and 3 (assuming they’re points layers) to Layer 1. So as a user clicks shapes in Layer 1,
Layers 2 & 3 will have their displays filtered down to what falls within Layer 1’s selected shape(s).

var lyr1AppearanceOpts = {markerlayerbindings: "2,3"};
cMap.layerAppearanceOptions([[lyr1AppearanceOpts]]);

Custom Layers

From D3 to anything HTML/JS based, custom layers can be added to the map. The map will notify
when the layer should be redrawn. Several utilities are made available when using custom layers that help to translate
location data to x,y coordinate data, etc. For more details, refer to the API Reference and API Examples page.

Basic stubs for a custom layer

var cMap = new centigon.locationIntelligence.MapView();
cMap.key([your_api_key]);

var overlay;
cMap.renderCustomLayer = function(layer){
				
	if(!overlay){
		overlay = cMap.getCustomBaseMapOverlay();

		// Add the container when the overlay is added to the map.
		overlay.onAdd = function() {
		
			draw();
		}

		overlay.draw = draw;
		cMap.registerCustomLayer(overlay);
	}
}

cMap.renderCustomLayerSelected = function(layer){
	console.log("renderCustomLayerSelected");
}

cMap.layerNames(["My Custom Layer"]).
layerTypes([centigon.mapping.Layer.TYPE.CUSTOM]);

Points Layers

Special appearance options for a points layer

//Enables a log scale
cMap.layersLogScaleEnabled([true, false]);
//Enables dynamic sizing
cMap.layersDynamicSizeEnabled([true, false]);
/*Sets default layer object sizes. 
Dynamic sizing uses the layer's 
size as an upper limit when generating 
the dynamic sizes.*/
cMap.defaultLayerSizes([22, 20]);

Shape Layers

Mapping business data to an ESRI Shapefile

To simplify things, grant more flexibility and reduce network latency, we only consume the ESRI .shp file and
don’t download the traditional acompnaying files, like the .shx and .dbf. Instead, you tell the layer which order the shapes are in by
using the dbfKeys property, and then you define the order in which your business data is in, using the same keys, but
in the order in which your business data occurs using the userShapeKeys property. This frees you up to work more
flexibly/dynamically with business data on the client side.

var cMap = new centigon.locationIntelligence.MapView();
cMap.key([your_api_key]);

cMap.layerNames(["Basic Shapes"]);
cMap.dbfKeys([['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','District of Columbia','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming']]);
cMap.userShapeKeys([['Massachusetts','Minnesota','Montana','North Dakota','Hawaii','Idaho','Washington','Arizona','California','Colorado','Nevada','New Mexico','Oregon','Utah','Wyoming','Arkansas','Iowa','Kansas','Missouri','Nebraska','Oklahoma','South Dakota','Louisiana','Texas','Connecticut','New Hampshire','Rhode Island','Vermont','Alabama','Florida','Georgia','Mississippi','South Carolina','Illinois','Indiana','Kentucky','North Carolina','Ohio','Tennessee','Virginia','Wisconsin','West Virginia','Delaware','District of Columbia','Maryland','New Jersey','New York','Pennsylvania','Maine','Michigan','Alaska']]); 
cMap.labels([['Massachusetts','Minnesota','Montana','North Dakota','Hawaii','Idaho','Washington','Arizona','California','Colorado','Nevada','New Mexico','Oregon','Utah','Wyoming','Arkansas','Iowa','Kansas','Missouri','Nebraska','Oklahoma','South Dakota','Louisiana','Texas','Connecticut','New Hampshire','Rhode Island','Vermont','Alabama','Florida','Georgia','Mississippi','South Carolina','Illinois','Indiana','Kentucky','North Carolina','Ohio','Tennessee','Virginia','Wisconsin','West Virginia','Delaware','District of Columbia','Maryland','New Jersey','New York','Pennsylvania','Maine','Michigan','Alaska']]); 

cMap.polyDataSources([centigon.locationIntelligence.CMapAnalytics.DATA_PROVIDERS.SHAPE_DATAPROVIDER]);
cMap.layerTypes([centigon.mapping.Layer.TYPE.POLY]);
cMap.locations([["https://gmapsplugin.net/cmapsanalytics/assets/shapes/usstates.shp"]]);

cMap.panTo("USA");
cMap.zoomLevel(3);

Shape layer special properties

//Show/hide shape outlines
cMap.polyOutlinesEnabled([true, false]);
//Black outline for layers 1 & 2
cMap.polyOutlineColors(["#000000", "#000000"]);
//Make shape layer 2 have transparent shapes with a black border
cMap.transparentFillEnabled([false, true]);

//Get location bounds of the layer
cMap.getShapeLayerBounds(layer);

3rd Party Layers

var cMap = new centigon.locationIntelligence.MapView();
			
var opts = {
	cartoDBJsonVizURL: "..../viz.json",
	cartoDBSqlQuery: "SELECT * FROM world_borders_hd",
	cartoDBMeasFieldName: "null",
	cartoDBDrillColName: "null",
	cartoDBSubLayerId: "[layer uid]",
	useLayerSpecificApiInfWins: true | false,
	useLayerSpecificApiTooltips: true | false
}

cMap.layerNames(["CartoDB"]).
layerTypes([centigon.mapping.Layer.TYPE.CARTODB]).
thirdPartyLayerOptions([opts]);

cMap.key("[your_cmaps_api_key]");

var cMap = new centigon.locationIntelligence.MapView();
			
var opts = {
	cartoDBMapLayerTorqueCSS: "",//Optional CartoCSS
	cartoDBJsonVizURL: "..../viz.json"
}

cMap.layerNames(["CartoDB"]).
layerTypes([centigon.mapping.Layer.TYPE.CARTODB]).
thirdPartyLayerOptions([opts]);
					

var cMap = new centigon.locationIntelligence.MapView();
			
var opts = {
	cartoDBMapLayerInteractivity: "",
	cartoDBMapLayerName: "your_cartodb_sublayer_uid",
	cartoDBAuthKey: "your_cartodb_auth_token",
	cartoDBUsername: "your_cartodb_username",
	cartoDBMapName: "your_cartodb_mapname",
	useLayerSpecificApiInfWins: true | false,
	useLayerSpecificApiTooltips: true | false
}

cMap.layerNames(["CartoDB"]).
layerTypes([centigon.mapping.Layer.TYPE.CARTODB]).
thirdPartyLayerOptions([opts]);
					

var cMap = new centigon.locationIntelligence.MapView();
			
var opts = {
	cartoDBMapLayerInteractivity: "",
	cartoDBMapLayerTorqueCSS: "",//Optional CartoCSS
	cartoDBMapLayerName: "your_cartodb_sublayer_uid",
	cartoDBAuthKey: "your_cartodb_auth_token",
	cartoDBUsername: "your_cartodb_username",
	cartoDBMapName: "your_cartodb_mapname",
	useLayerSpecificApiInfWins: true | false,
	useLayerSpecificApiTooltips: true | false
}

cMap.layerNames(["CartoDB"]).
layerTypes([centigon.mapping.Layer.TYPE.CARTODB]).
thirdPartyLayerOptions([opts]);
					

var cMap = new centigon.locationIntelligence.MapView();
			
var opts = {
	esriMapServerURL: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_PublicSafety_Louisville/MapServer"
}

cMap.layerNames(["CartoDB"]).
layerTypes([centigon.mapping.Layer.TYPE.ESRI_MULTI_LAYER_IMAGE]).
thirdPartyLayerOptions([opts]);
					

var cMap = new centigon.locationIntelligence.MapView();
			
var opts = {
	esriMapServerURL: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_PublicSafety_Louisville/MapServer/3"
}

cMap.layerNames(["ESRI-Data-Powered CMaps Points"]).
layerTypes([centigon.mapping.Layer.TYPE.ESRI_MARKER]).
thirdPartyLayerOptions([opts]);
					

var cMap = new centigon.locationIntelligence.MapView();
			
var opts = {
	esriMapServerURL: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer/0"
}

cMap.layerNames(["ESRI-Data-Powered CMaps Shapes"]).
layerTypes([centigon.mapping.Layer.TYPE.ESRI_SHAPE]).
thirdPartyLayerOptions([opts]);
					

Designer Configuration Property-to-Layer Functionality Matrix

The table below shows the relationship/mapping between Config file (JSON, XML) and MapView properties as well as the layer-specific support for each.

nameDetermines each layer’s display namelayerNames
YYYYYYYYYYYYYYYYYYYYYYYYYY