Skip to Content
Author's profile photo Avital Ben-Natan

SAPUI5 Custom Control for Maps (Here/Nokia)

[UPDATE 25/05/2014]: The client clustering mechanism is now purely Here API, with no need for any previous workarounds. Thus, the clustering code is much cleaner now.

Many applications nowadays incorporate maps to visualize geo-spatial data as part of their content.

UI5 (OpenUI5 is the open source version of SAPUI5. The API’s and even namespaces are identical. Hence I will just refer to the common domain between the libraries as UI5) is a great platform for hosting such components. Seeing as I could not find any such control, I decided to create one myself and share it with the community.HereMap.jpg

This is a sample application using a UI5 custom control for the Here (Nokia) maps API. The structure or template for this project was generated by this wonderful SAPUI5 Yeoman Generator, so you may use Grunt in your process, alternatively you can just run the app/index.html file. The source code is here.

Following, are solutions presented in this project:

  • Lazy loading of a SAPUI5 custom control with it’s 3rd party dependecies – Loading a custom control asynchronously in an XML view (when you need it), utilizing async/ajax loading of the Here maps JSDK
  • Marker clustering with SVG Icons – Marker clustering with added implementation to support server side clustering in conjunction with the Here clusterer object.
  • Toggling between nested views – The map view is not initially shown in order to demonstrate that the 3rd party dependecies are only loaded as needed. Press the globe icon on the right to toggle to the map nested view.

Using the map control in an XML view is as simple as this:

<View controllerName="app.view.CoverageMap"
    <lib:HereMap displayReady="onMapReady"></lib:HereMap>

There are no extra steps required to get the map rendered in your own view. In JavaScript it would look like this:

$.sap.registerModulePath('app', './');
var hereMap = new app.lib.HereMap({displayReady: onMapReady})

You may then use the native map object from the handler in the controller like so:

onMapReady: function(evt) {
       console.log('map is ready');
        var hereMap = evt.oSource;
        var nativeMap = evt.getParamter('map'); // this is the Here maps map.Display object
        $.getJSON('model/counterpois.json', $.proxy(hereMap.addClusteredData, hereMap));

The Here app code and key are the ones used for the JSDK sample code, you may change them in the control file, HereMap.js in the following code block towards the end of the file:

        config: {
            //  Set authentication token and appid
            //  WARNING: this is a demo-only key
            // Add your own appId and token here
            // sign in and register on
            // and obtain your own developer's API key
            AppIdAndToken :{
                appId: 'DemoAppId01082013GAL',
                appCode: 'AJKnXv84fjrb0KIHawS0Tg',
                language: 'en-US',
                serviceMode: 'cit'

This is work in progress. It will probably evolve some more of my own volition, but of course anyone is welcome to contribute.

Comments here, or issues, forks and pull requests  on Github (source) are most welcome. Programmatic solutions presented here are up for discussion. If anyone has ideas about them, I think we’d all like to collaboratively learn.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hey man I tried your code and with slight modifications for the paths and nothing  gets rendered on the screen.  I see the html is there but i cannot see the control on the screen.  Any idea? I have no sap ui5 errors. Using XML views.  By the way I only added the HereMap.js and counterpois.json and no other files.  Is this all that is required?

      Author's profile photo Avital Ben-Natan
      Avital Ben-Natan
      Blog Post Author

      Hi Ahmad,

      There is some strange behavior in the layout rendered. Most problems can be overcome by explicitly defining the height properties of the DOM sub-tree where you place the control. Usually direct parent explicit height is enough. I am playing around to see if I can provide the desired behavior in the control itself so it will behave like a native SAPUI5 container.

      When I update the demo I will update here.

      Hope that helps,


      Author's profile photo Former Member
      Former Member

      Hi Avital,

      To give you more information if I put the custom control on a main view not a "splitview" it renders properly if I put it on a splitview it doesn't show up.  Here's what i mean by splitview./wp-content/uploads/2014/05/nograph_457485.png

      Author's profile photo Avital Ben-Natan
      Avital Ben-Natan
      Blog Post Author

      Hi Ahmad,

      I hope you got everything to work. I've been slightly busy with other things. I have however lately added height and width properties to the control. If you explicitly set the height in the control. it should show up almost any container scenario. Look at the repo for the updated code.


      Author's profile photo Former Member
      Former Member

      Hi avital,

      Thanks for doing that, I actually only needed to change the parent div to 100% height and it fixed the problem.

      Author's profile photo Former Member
      Former Member

      Hi Avital,

      I need to display count on the Map just like in the image. Can you  please provide me some sample code.

      Author's profile photo Avital Ben-Natan
      Avital Ben-Natan
      Blog Post Author

      Hello Suja,

      Basically the current implementation explicitly requires that a "count" field be defined on your composite data points. The should probably be exposed via API as a property binding.

      However, it's quite straight forward to change this in the control. If you do expose it via property binding, I'd be glad for a pull request.

      So just to restate if you put a "count" field in your spatial data objects, the ones that are passed to addClusteredData. This will result in the cluster marker icons that are composed in the control with SVG.

      I hope that helps. Let me know,


      Author's profile photo Former Member
      Former Member

      Hello Avital,

      Already I'm having count field in spatial data objects but its not displaying count on the marker.

      Actually I need to display the count as like in this link (based on the Zoom out and zoom In I need to display count).

      I am new to SAP HANA and UI5. Can you please explain me little clearly.

      Author's profile photo Avital Ben-Natan
      Avital Ben-Natan
      Blog Post Author

      Sorry of the delay in my answer. For some reason I don't recall getting a notification about your post.

      Essentially you don't need to include any counter field in your data points when you use the addClusteredData method on the UI5 control. I this case only client-side clustering will be applied. That is the default behavior as is demoed in the link you attached.

      Author's profile photo Manjunath Gudisi
      Manjunath Gudisi

      Hi Avital,

      I guess, this blog needs to be updated. For ex: we never use below line of code now days. I just started learning UI5 and difficult to understand how Ui5 works with 3rd party libs like (HereMap).


      Could you please update this.


      Thanks, MG