How to use Mapbox-gl in SAPUI5

[former_member608589]

After reading a guideline blog in community about integrate Google Map with SAPUI5, I just edit some keyword from Google map to mapbox and tried in the same way and failed. I found the controller file could not read the mapbox-gl successfully so that the object called 'mapboxgl' always to be undefined.

I think the problem is in mapbox-gl.js file. Because it isn't a normal SAPUI5 js file begin as sap.ui.define().

[former_member608589]

After trying different ways, here is a solution make the mapbox plugin can be used in SAPUI5.

let's step by step.

1. Create a new SAPUI5 Application project with webIDE(online or PE) / your favorite IDE.

2. Add a folder in webapp called libs (whatever you want).

3. Download the mapbox-gl.js file from mapbox.com on your computer.

4. Import it into your project and put it in libs folder.

5. Let's hack the gl.js file into a normal SAPUI5 js file which start by sap.ui.define(). And here is my gl.js after editing.

Now this file can be use as a simple SAPUI5 js module in controller file.

6. In my controller file, import gl.js in normal way like

sap.ui.define([

"your/namespace/libs/mapbox-gl"

], function (mapboxgl) {

'use strict';

onInit: function () {

console.log(mapboxgl); // it work!

}

});

7. Now you can use mapboxgl in SAPUI5.

[former_member418275]

Hello Zou Yi,

I was looking for a program for routing optimization for SAP UI5 like the one on mapbox.com for JS, kindly advise.