Creating a New Geo Map Component with 50 Lines of Code
JS API

Creating a New Geo Map Component with 50 Lines of Code

By January 18, 2017No Comments

CMaps Analytics origins as an SAP Dashboard plugin helped pave the way for our cloud based geo-analysis APIs. Today, CMaps Analytics can be embedded inside of any custom applications for internal or commercial use. To ensure a level of quality, we use the same public APIs and services to push the boundaries of our integration kits, and extensions. Recently, SAP released a well designed set of reporting APIs, allowing our team to create a brand new embedded mapping element. As a result shown below, the entire HTML markup, Javascript, and CSS required was 50 lines of code to create a highly customizable component.

Want to build your own component with CMaps Analytics?

Sign up for free access |How to Use CMaps API  Here is the result, allowing end users of SAP Web Intelligence to modify the map experience right within the tool. We have posted the pseudo source code used in our SAP Webi element below to give you an idea what it took to create a simple mapping integration. 
<html>
 <head>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'></script>
 <script src='https://api.cmapsanalytics.net/mapview?version=3'></script>
 <script>
 var cMap;
 var choroplethAlertsEnabled = true;
 function buildMap() {
 cMap = new centigon.locationIntelligence.MapView();
 cMap.onMapReady = function () {
 cMap.toggleSpecialApiLayer(centigon.mapping.CMap.SPECIAL_LAYER_TYPES.TRAFFIC, __root.settings[showtrafficlayer].value__);
 cMap.toggleSpecialApiLayer(centigon.mapping.CMap.SPECIAL_LAYER_TYPES.TRANSIT, __root.settings[showtransitlayer].value__);
 }
 cMap.layerNames(['Basic Points'])
 .useDynamicZoom(__root.data[cmaplabels].values.rawvalues__)
 .locations([[__root.data[cmaplocations].values.rawvalues__]])
 .labels([[__root.data[cmaplabels].values.rawvalues__]])
 .values([[__root.data[cmapvalues].values.rawvalues__]])
 .legendVisible(__root.settings[legendVisible].value__)
 .clusterStyles(['__root.settings[clusterStyles].value__'])
 .defaultLayerIcons(['__root.settings[defaultLayerIcons].value__'])
 .defaultLayerSizes(['__root.settings[defaultLayerSizes].value__'])
 .defaultLayerColors(['__root.settings[defaultLayerColors].value__'])
 .layersTransparency([__root.settings[layersTransparency].value__])
 .glowVisible(__root.settings[glowVisible].value__)
 .glowColor('__root.settings[glowColor].value__')
 .layersDynamicSizeEnabled([__root.settings[layersDynamicSizeEnabled].value__])
 .layersLogScaleEnabled([__root.settings[layersLogScaleEnabled].value__])
 .dynamicZoomOnPointSelect(__root.settings[dynamicZoomOnPointSelect].value__)
 .dynamicZoomOnClusterSelect(__root.settings[dynamicZoomOnClusterSelect].value__)
 .clusterToggleVisible(__root.settings[clusterToggleVisible].value__)
 .navigationControlVisible(__root.settings[navigationControlVisible].value__)
 .baseMapImageryStyleType('__root.settings[baseImageryStyle].value__')
 .showInfoWindows(__root.settings[showInfoWindows].value__)
 .showNames(__root.settings[showNames].value__)
 .showValues(__root.settings[showValues].value__)
 .alertColors([["#cee0f6","#88baf8","#4795f5","#1670df"]]).alertTypes(["type-choropleth"])
 .alertEnabled([__root.settings[alertEnabled].value__])
 .dynamicZoomEnabled(true)
 .sslEnabled(__root.settings[sslEnabled].value__);
 cMap.key('__apikey__');
 };
 </script>
 </head>
 <body onload='buildMap();'>
 <div id='mapDiv' style='position: absolute; top: 0px; left: 0px; bottom:0px; right:0px'></div>
 </body>
</html>
]]>

Next Post