Skip to Content
Aug 05, 2019 at 05:13 AM

How to bring Map Overlay option in sapui5 vbm GeoMap?


HI All,

We are working on a Custom SAPUI5 Application development,which includes GeoMap functionality. We need to display the various GIS information on top of sapui5.vbm.GeoMap Control. We recede the GIS information from GeoServer.

From the GeoServer we will get two kind of services .

1. WFS (returns the data in geojson format).

2. WMS (returns Image/PDF/openlayer type ).

We are using WMS. and we get an image from the service, it is a series of images based on the BBOX value . BBOX values will change automatically whenever we do pan/zoom.based on the value,it returns the image from GeoServer.

I have found similar example in GoogleMap-JavaScript examples.

<!DOCTYPE html>
    <title>Overlaying an Image Map Type</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    <div id="map"></div>

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 18,
          center: {lat: 37.783, lng: -122.403}

        var bounds = {
          17: [[20969, 20970], [50657, 50658]],
          18: [[41939, 41940], [101315, 101317]],
          19: [[83878, 83881], [202631, 202634]],
          20: [[167757, 167763], [405263, 405269]]

        var imageMapType = new google.maps.ImageMapType({
          getTileUrl: function(coord, zoom) {
            if (zoom < 17 || zoom > 20 ||
                bounds[zoom][0][0] > coord.x || coord.x > bounds[zoom][0][1] ||
                bounds[zoom][1][0] > coord.y || coord.y > bounds[zoom][1][1]) {
              return null;

            return ['//',
                zoom, '_', coord.x, '_', coord.y, '.png'].join('');
          tileSize: new google.maps.Size(256, 256)

    <script async defer

To achieve this , we need GOOGLE_API_KEY.

When i tried this on jsfiddle, i am able to get the layer from the GeoServer and successfully displayed on GoogleMap. whenever i do pan or zoom i see the complete layer. in the Network tab also each time the new request hits the server.

But my question is,

1. Do we have anything similar on SAPUI5 or we have only option to use Googlemap-JavaScript approach?

When i use vbm.GeoMap

2. Can i get the visible view port information (lat and lon)?

I found some of the class in SAPUI5 explored, will these help me? or it is only for 3D Controls?

SAP DemoKit

Please help me on this.

Thank you,




viewport.png (78.9 kB)
overlay.png (68.0 kB)