cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

How to bring Map Overlay option in sapui5 vbm GeoMap?

Jayakrishnan
Active Participant

on ‎08-05-2019 6:13 AM

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.

https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay

<!DOCTYPE html>
<html>
  <head>
    <title>Overlaying an Image Map Type</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* 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;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      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 ['//www.gstatic.com/io2010maps/tiles/5/L2_',
                zoom, '_', coord.x, '_', coord.y, '.png'].join('');
          },
          tileSize: new google.maps.Size(256, 256)
        });

        map.overlayMapTypes.push(imageMapType);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

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,

Regards,

JK.

Show replies
Show replies
Answer

Accepted Solutions (0)

Answers (0)

Ask a Question