Additional Blogs by SAP
cancel
Showing results for 
Search instead for 
Did you mean: 
avital_ben-natan
Explorer

[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.

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"
    xmlns="sap.ui.core.mvc"
    xmlns:lib="app.lib">
    <lib:HereMap displayReady="onMapReady"></lib:HereMap>
</View>













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', './');
$.sap.require('app.lib.HereMap');
var hereMap = new app.lib.HereMap({displayReady: onMapReady})
hereMap.placeAt('content');











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:



exports.HereMaps={
        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 http://developer.here.com
            // 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.

10 Comments