how to use Visual Business GeoMap with Googlemaps?

Question

I want to add GeoMap Spot and Legend in Googlemaps

My.view.xml:

        <l:FixFlex>
            <l:flexContent>
                <vk:MapContainer autoAdjustHeight="true">
                    <vk:content>
                        <vk:ContainerContent titile="test">
                            <vk:content>

                                <vbm:AnalyticMap id="map"></vbm:AnalyticMap>

                            </vk:content>
                        </vk:ContainerContent>
                    </vk:content>
                </vk:MapContainer>
            </l:flexContent>
        </l:FixFlex>

My.controller.js

    var mapDom = this.getView().byId("map").getDomRef();
    onAferRendering: function() {
       jQuery.sap.includeScript(
         "https://maps.googleapis.com/maps/api/js?key=XXX",
         null,
         function() {
           ...
           mainmap =new google.maps.Map(mapDom, mapProp);
    }
}

This is working, Googlemap is added successfully.

But When I add Spot in AnalyticMap, googlemaps disappeared. Only AnalyticMap and Spots shows.

<l:FixFlex>
    <l:flexContent>
        <vk:MapContainer autoAdjustHeight="true">
            <vk:content>
                <vk:ContainerContent titile="test">
                    <vk:content>
                        <vbm:AnalyticMap id="map">
                            <vbm:vos>
                                <vbm:Spots items="{/Spots}" click="onClickItem" contextMenu="onContextMenuItem">
                                    <vbm:Spot position="{pos}" tooltip="{tooltip}" type="{type}" text="{text}" click="onClickSpot" contextMenu="onContextMenuSpot" />
                               </vbm:Spots>                                 
                            </vbm:vos>
                        </vbm:AnalyticMap>                      
                    </vk:content>
                </vk:ContainerContent>
            </vk:content>
        </vk:MapContainer>
    </l:flexContent>
</l:FixFlex>

I use demo in Explored

How to combine these two? Can I use both markers in googlemaps and spots in GeoMap?

I was thinking use markers only , but I can't write data on markers(only way is write lable for markers), And I also need Legend in GeoMap.

score 1 · Answer 1 · answered Oct 28 '16 at 15:49

I'm doing something similar. This is the specific code I'm using in the controller to set up HEREMAPS as the map provider.

            var oGeoMap = this.getView().byId("GeoMap");
            var oMapConfig = {
                "MapProvider": [{
                    "name": "HEREMAPS",
                    "type": "",
                    "description": "",
                    "tileX": "256",
                    "tileY": "256",
                    "maxLOD": "20",
                    "copyright": "Tiles Courtesy of HERE Maps",
                    "Source": [
                        {
                        "id": "s1",
                        "url": "https://1.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/normal.day/{LOD}/{X}/{Y}/256/png8?app_id=XXX"
                        },
                        {
                        "id": "s2",
                        "url": "https://2.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/normal.day/{LOD}/{X}/{Y}/256/png8?app_id=XXX"
                        }
                    ]
                }],
                "MapLayerStacks": [{
                    "name": "DEFAULT",
                    "MapLayer": {
                        "name": "layer1",
                        "refMapProvider": "HEREMAPS",
                        "opacity": "1.0",
                        "colBkgnd": "RGB(255,255,255)"
                    }
                }]
            };
            oGeoMap.setMapConfiguration(oMapConfig);
            oGeoMap.setRefMapLayerStack("DEFAULT");
            oGeoMap.setInitialZoom(13);
            oGeoMap.setInitialPosition("-97.57;35.57;0");

The XXX above is where you put your license code for HereMaps.

I too would rather use Googlemaps, but I'm having trouble finding out how to build the URL for the MapProvider.

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

According to Map Provider Configuration Changes

To access the maps inside SAP a map provider has to fullfil these two requirements

A XYZ or quadkey interface has to be supported. This is the standard interface for map tiles.

The maps tiles can be retrieved by a REST web service. Providers include Bing, HERE (formerly Nokia), ALK, PTV and others. All have web sites enabling purchase of contracts.

GoogleMaps seems not one of the available map providers for GeoMap.

But if you just want to use GoogleMaps in UI5, GeoMap is not mandatory. Just add a map div in view:

<mvc:View xmlns:html="http://www.w3.org/1999/xhtml">
  <html:div id="map" style="height:100%"></html:div>

// Controller
onAfterRendering: function() {
  jQuery.sap.includeScript(
    "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY",
    "googlemap",
    function() {
      const mapDomId = this.getView().byId("map").getId(),
      mapDom = document.getElementById(mapDomId);
      
      this.mapConfig.initGoogleVariables();
      window.mainmap = new google.maps.Map(mapDom, this.mapConfig.mapProp); 
    }.bind(this),
    function() {
    }
  );
}

This should be the accepted answer. It's technically not feasible to use Google Maps as a tile provider in `sap.ui.vbm.GeoMap`. — Boghyon Hoffmann, Apr 21 '20 at 21:58

score 0 · Answer 3 · answered Aug 18 '16 at 11:28

0

It appears that you're putting both maps on top of eachother. That doesn't sound like a recipe for success. You may even loose visibility of artifacts as the order in which they're put on top of each other determines what's visible and what not.

If you're not satisfied with the default map provider of the GeoMap control (MapQuest), you can always change it to another provider, including Google. This is done using the mapConfiguration property as documented here:

https://sapui5.hana.ondemand.com/docs/api/symbols/sap.ui.vbm.GeoMap.html#setMapConfiguration

If you configure Google as your map provider, you can use all usual features of the GeoMap on top of Google Maps, which I think is what you were looking for.

You can not use both Google markers and Geomap spots in the same map. However, you could customize the way the Geomap spots look like, so that they look more like Google markers.

answered Aug 18 '16 at 11:28

jpenninkhof

1,920
1
11
12

Thanks for your answer ! But it seems that Spot only provide `click` event , but not support `hover` event ? – Tina Chen Aug 19 '16 at 01:36
Don't use hover anyway, it's not available on mobile devices, hence doesn't fit well in the Fiori train of thought. If you really need it, use Google maps, but don't use both. – jpenninkhof Aug 19 '16 at 15:04
Could you give me a pointer where I can find the correct configurations and how to the URL should look to integrate Google Maps? Could not find anything on this. – Carsten Nov 16 '16 at 15:47
Geomap is in the SAPUI5 explored app: https://sapui5.hana.ondemand.com/explored.html#/entity/sap.ui.vbm.GeoMap/samples – jpenninkhof Nov 16 '16 at 17:51

how to use Visual Business GeoMap with Googlemaps?

3 Answers3