Load the SAPUI5 Library

 <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.m"></script>

Load the CMaps Analytics JS API

<script src="https://api.cmapsanalytics.net/mapview?version=3.0"></script>

Load the map with basic properties

//Create a HTML container and declare div with an ID "mapDiv"
var html1 = new sap.ui.core.HTML({

//Load CMaps Analytics inside of a DIV
content : "<div id='mapDiv' style='height:35em;width:100%'></div>"
});

//Jquery delay call for sapui5 delay
jQuery.sap.delayedCall(0, this, function () {

//Create cmap and place it to pre-declared div ID "mapDiv"
var cMap = new centigon.locationIntelligence.MapView("mapDiv");

//Many CMaps methods return the map reference so you can chain method calls like below.
//Add a single layer name, Enable dynamic zoom, Add a single layer location, Add a single layer location label, Add a single layer location value, Set api key
cMap.layerNames(["Basic Points"])
.useDynamicZoom(true)

//Locations can be comma seperated latitude,longitude or any other location in the world to be batch geocoded.
.locations([["San Diego"]])

//Labels can be text or html and are displayed when clicking on an object
.labels([["San Diego"]])

//Values are numeric values that drive many of the calculation capabilties from aggregation, to dynamic, sizing, alerts, and other value driven visuals.
.values([["1000"]])

//You can get a CMaps Key by signing into CMaps Designer
.key('ENTER YOUR CMAPS KEY HERE');
});

//That's it! Only a few lines of code to get instant access to hundreds of additional properties like alerts, drilling between layers, instant ESRI maps, hub and spoke diagrams, and 20 other layer viz types.

//Now you can add the content to any standard container like a tab container.
oIconTabfilter1.addContent(html1);

Now it is time to take full advantage of CMaps Analytics Designer templates. With hundreds of clickable properties, you can go from basic maps to dynamic Location Intelligence experiences without writing a single line of code, yet still have API access to any feature you like. Think of CMaps Analytics templates as ready made maps waiting for data.. In this example we will also include some sample data

//Create a HTML container and declare div with an ID "mapDiv2". We add the number 2 only because in our example we have 2 maps on 1 page.
var html2 = new sap.ui.core.HTML({
content : "
<div id="mapDiv" style="height: 35em; width: 100%;"></div>
" afterRendering : function(e) { 

//You can create cmap in sap.ui.core.HTML afterRendering function. Or else just create in jQuery sap delayed call
document.getElementById("mapDiv2").innerHTML = ""; //this to redraw a new map 

//Copy .CMAP config XML OR JSON to a variable - Auto-generated at http://cmapsanalytics.com/designerapp 
var mapCfg = '{"mapView":{"@attributes":{"createdBy":"name:cMapsAnalyticsDesigner;version:3.0","createdOn":"8/8/2016"},"viewName":"SAPUI5","viewDescription":"","tags":"","templateVersion":"","key":"INSERTKEY","googlePremierKey":"","sslEnabled":"true","dynamicZoomEnabled":"true","currentLocationOnLoadDisabled":"true","panCoords":"United States","zoomLevel":"3","dynamicZoomOnShapeSelect":"false","dynamicZoomOnClusterSelect":"true","dynamicZoomOnPointSelect":"false","showBreadcrumbsOnDrill":"true","dynamicZoomOnDrill":"true","multiSelectEnabled":"false","adhocPanelVisibility":"true","radiusMeasureUnit":"km","indoorEnabled":"false","useAdvancedInfowindow":"true","includeAdvancedInfWinSummaryCard":"true","includeAdvancedInfWinFilterCard":"true","includeAdvancedInfWinSearchCard":"true","includeAdvancedInfWinExportCard":"true","includeAdvancedInfWinDriveCard":"true","includeAdvancedInfWinDrillCard":"false","includeAdvancedInfWinSelectCard":"false","includeAdvancedInfWinStreetViewCard":"true","includeAdvancedInfWinHelpCard":"false","advancedInfoWindowJsonCfg":"","infoWindowFontFamily":"Arial","infoWindowFontSize":"12","infoWindowFontColor":"000000","infoWindowFontAlign":"left","infoWindowUseBoldFont":"false","infoWindowFontUnderlineEnabled":"false","infWinItalicFontEnabled":"false","infoWindowVisibility":"true","infoWindowValueVisibility":"true","infoWindowLayerNameVisibility":"true","glowVisibility":"true","glowColor":"0000ff","baseMapImageryStyleType":"styleTypeCoolGray","showTrafficLayer":"false","showTransitLayer":"false","showBikelayer":"false","legendVisibility":"true","clusterToggleControlVisibility":"true","navigationControlVisibility":"true","currentLocationControlVisibility":"false","mapReady":"true","layerSelected":"false","zoomChanged":"false","centerChanged":"false","reverseGeocodeResponse":"false","latLngToReverseGeocode":"","geocodeResponse":"false","addressToGeocode":"","visible":"true","indoorMapVisibility":"false","showPinsForIndoorMapLocations":"false","directionPanelVisibility":"false","directionWaypoints":"","currentLocation":"false","useFreeApi":"false","layers":{"layer":{"name":"Sites","description":"","type":"points","sankeyJsonData":"","cartoDBJsonVizURL":"","cartoDBSubLayerId":"null","cartoDBUser":"","cartoDBSqlQuery":"","cartoDBMeasFieldName":"null","cartoDBDrillColName":"null","cartoDBTorqueJsonVizURL":"","cartoDBUsername":"","cartoDBMapName":"","cartoDBAuthKey":"","cartoDBMapLayerName":"","cartoDBMapLayerInteractivity":"","cartoDBMapLayerTorqueCSS":"","useLayerSpecificApiInfWins":"true","useLayerSpecificApiTooltips":"true","cartoDBMapLayerUseHttps":"true","indoorMapUrl":"","shapeFileType":"customUrl","shapeFileUrl":"","dataKeysUrl":"","dataSourceType":"statictsv","dataSource":{"#cdata-section":""},"dataSourceColumnOrder":"dsLocationColumn,dsLabelColumn,dsValueColumn,dsColorColumn,dsCategoryColumn,dsDrillIdColumn","transparency":"100","enabled":"true","iconSize":"10","iconType":"pin","clusterStyle":"sum","dynamicSizeEnabled":"false","useLogScale":"false","visibility":"true","drillLevel":"","drillEventTrigger":"none","drillParent":"none","drillVisibilityOverride":"false","useCurrentLocationAsStartPoint":"false","travelMode":"Driving","travelUnits":"IMPERIAL","markerLayerBindings":"","useCacheDriveTimePolyService":"on","wmsURL":"","wmsStyleString":"","wmsLayerString":"","esriMapServerURL":"","layerColor":"1b8dce","alerts":{"alertIcons":"pin,pin","alertType":"type-choropleth","alertValues":"25050,50100,91850,150300","numAlertLevels":"5","alertHeatmapVals":"25050,50100,91850,150300","alertDefinition":"high-values-good","alertColors":"#9ED3FF,#76B8E5,#4F9ECC,#2783B2,#006999"}}}}}';

//Create cmap and place it to pre-declared div ID "mapDiv2" 
var cMap1 = new centigon.locationIntelligence.MapView("mapDiv2"); 

//wait until the layer(s) have been created and then set the layer's data 
cMap1.onLayersReady = function(){ 

//Locations can be comma separated latitude,longitude or any other location in the world to be batch geocoded. 
cMap1.locations([["37.7693911,-122.41750","Oakland","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 can be text or html and are displayed when clicking on an object. In this case you can see that we have encoded our HTML tags
cMap1.labels([["one","two","&lt;b&gt;Oakland&lt;/b&gt;&lt;br/&gt;You can also use html formatting&lt;/br&gt;Concatenated HTML content can include links and images","four","five","six","seven","eight","nine","ten"]]); 

//Values are numeric values that drive many of the calculation capabilities from aggregation, to dynamic, sizing, alerts, and other value driven visuals. 
cMap1.values([["20","30","40","50","60","70","80","90","100","110"]]); 

// Colors are an optional property in case if you have another categorization or business alert rules engine outside of CMaps Analytics. 
cMap1.colors ([["#0000ff","#c0c0c0","#ff0000","#124568","#f05264","#00ff00"]]); } 

//applies the config xml or JSON to cmap 
cMap1.parseConfigXml(mapCfg); } }); 

//Now you can add the content to any standard container like a tab container 
oIconTabfilter2.addContent(html2);

 

 

View HelloWorld example:

When using CMaps Analytics makes sense

1. If your organization already owns and wants to use Google Maps for Work
2. If your mapping needs are more sophisticated than plotting the geographic location (points) or polygon data.

 

What is CMaps Analytics

CMaps Analytics includes inherits the Google Maps for Work JS API automatically and uses it’s base services as a part of  CMaps Analytics JS API. CMaps Analytics API and cloud services are then wrapped up into a cloud based designer with a workflow similar to HANA Cloud Platform (design in the cloud deploy anywhere). CMaps Analytics APIs eliminate all of the low level development that is not clear when you embark on the geo portion of your project.
Developer Intro to CMaps Analytics | Designer Dev Portal

Build vs Subscribe

On average, the Google Maps development portion could range from 2-15 days depending on the complexity and now introduces a new line of support and risk. Why? When Google changes an API, someone needs to potentially make a change. Additionally, some Google Maps APIs require server-side development (distance matrix, advanced routing, batch geocoding). CMaps Analytics is feature rich with almost everything you could ever need for mapping from business apps, to advanced spatial analytics. Some of the important features you may need include visual alerting, embedding ESRI content, providing spatial analysis and aggregation, lasso and radius selection, creating and drilling geographic hierarchies, integrating shapefiles or other boundary formats, and 100+ other features come out of the box with a few clicks.

Finally CMaps Analytics provides enterprise support SLAs and commitment to quality that will help eliminate risk when using cloud services like Google Maps in your SAP project.

Why use CMaps Analytics instead of default SAP GeoMaps OpenStreet or HERE Maps?

SAPUI5 maps are basic, but provide openness for you to develop what ever functionality you like. CMaps Analytics for UI5 would be considered a premium geo-analytics extension as opposed to a map component, providing an important supported abstraction layer for mapping.

Why use CMaps Analytics instead of Google Maps

An average developer could build basic Google Maps and integrate into SAPUI5 quickly. In fact, if you need basic Google Maps API in SAPUI5, there is already a fantastic option built by John Patterson. However, building maps against the free Google API and then purchasing the Google Maps API for business is an expensive proposition. CMaps Analytics includes the proper Google Maps enterprise licensing.

With each library you download off the web or build, you are increasing the code base and potential support footprint for your app. CMaps Analytics is geared toward organizations that want to use supported frameworks for enterprise apps. The primary value of CMaps Analytics is the rapid designer, which provides a configurable experience and lots of functionality with over 2 years of continuous development and R&D.

Isn’t Google Maps free?

There is NO free version of Google Maps for enterprise apps. If you are already using Google Maps with SAPUI5 and not paying for a Google Maps license, you are not in compliance (learn more).

The only supported business case for using Google Maps free APIs is if your content is public. If your business is looking to purchase Google Maps for an SAP initiative, CMaps Analytics pricing and licensing makes it a no-brainer. Contact our teams for pricing and licensing options.

What about ESRI?

CMaps Analytics has 3 native ESRI layers so you can simply plug in ESRI feature service URL and keep racing forward on your project.

How do I learn how to use CMaps Analytics APIs?

How to Use CMaps API

Working with Data

Working with Layers

Including Custom Components

View API Docs

What if I need help?

The benefit of CMaps Analytics is a fully supported enterprise solution. Additionally, we are happy to build and create more useful SAPUI5 templates based on the common business app requirements that come up for SAP customers. Simply send us a request or schedule an appointment and we will help you amaze your users.

What resources are available in the form of templates and examples:

We have a few options for you.. First, we have our code examples page that illustrate how to call various features with our API. However, we recommend code examples after first exploring CMaps Analytics Designer where you can configure most of the features without writing any code.