Need to place spot with different color on GEOMap

[Former Member]

Hello,

I am displaying suppliers alerts in geomap and need to color Spot red if alert is critical. Is it possible to do? If not, what other control could I use? I couldn't find documentation for geocircles.

Thanks a lot!

Ella.

[former_member182119 · Accepted solution]

HI Ella,

You are right, there is no color attribute for spots. The reason is that spots are displayed images with their own colors. In order the get a spot in a different color just replace the image.

Images need to be provided in the resource section of the JSON as base64 encoded binaries. Thus we ensure the same origin policy. You can bind a image to a spot VO, to make it easy to replace it.

For using geocircles you find docu here: and you can take this https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/ui/vbm/sapapi_circle.html as an example.

Cheers Uwe

[Former Member · Accepted solution]

Thank you Uwe! I am also trying to display detail window instead of tooltip on the spot on click and can't figure out from examples how to do it. When I debug examples I don't understand how to properly build json. Is there any additional info on that?

Thank you!

[former_member182119 · Accepted solution]

Hi Ella,

When you check example https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/ui/vbm/sapapi_detail_m.html you find two option for detail window. When spot in UK the detail window and it content is added to the JSON. This is rather complex and the layout options for the content are very limited.

When clicking spot in germany only the window is added the JSON. The content is arbitry UI5.

on the sample page you find function onSubmit handling the submit event of the VBI control. It gets the object instance raising the event from the event data and calls either function

onDetailWindow1 or onDetailWindow2. Function onDetailWindow1 just adds the window by loading JSON https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/ui/vbm/media/vbdetail/opendetail1device... into VBI control. In the JSON all potentially open windows get closed (REMOVE section) and a new one is opened (SET section). The window position is bound to the spot position: "pos.bind": "DetailWindowPositions.0.GeoPosition" with a certian offset depending on the actual spot image.

After loading the JSON the VBI control raises event openWindow. In the handler function onOpenWindow the UI5 content is created and finally attached to the window:

oPanel.placeAt( oEvent.getParameter( "contentarea" ).id );

Hope that helps,

Cheers Uwe

[Former Member · Accepted solution]

Dear Uwe,

Thanks a lot, it clarifies big deal. I see now what happening. I am using simple json for displaying spots as below (but with my data).

var oData =

  {

    Spots :

    [

     { "key":  "DE", "pos": "0;0;0", "tooltip": "Spot1"  },

     { "key":  "FR", "pos": "0;30;0", "tooltip": "Spot2" },

     { "key":  "IT", "pos": "0;60;0", "tooltip": "Spot3" }

  };

I am trying to open detail window with position on the spot. So I am trying json from example and not successful so far. I see it is based on previously loaded json definitions of refParent "Window1", also I used my position as pos instead of pos.bind as I don't have this definition in previously loaded json. It seems that I really need to load whole previous json in order to open details window later. So I am wondering if I could do it with my initial json as above and then just open detail window based on position that I provide. If it is possible what is a minimal definition for detail window?

Thanks a lot!!!

var dat =
  {
   "SAPVB": {
    "version": "2.0",
    "xmlns:VB": "VB",
    "Windows": {
     "Remove": [
                 {
            "name": "Detail1"
           }
              ],
     "Set":         {
      "name": "Detail1",
      "Window": {
       "id": "Detail1",
       "type": "callout",
       "refParent": "Window1",
       "refScene": "",
       "modal": "false",
       "width": "400",
       "height": "",
       "pos": "0;30;0",
       "caption": "Detail Window O(17/-30) Detail Window O(17/-30) Detail Window O(17/-30)",
                      "offsetX": "17",
                      "offsetY": "-30"
      }
        }
       }

     }
    }
  };

[former_member182119 · Accepted solution]

Hello Ella,

Without the complete JSON I can only guess. However, I don't think you should set any refParent, but you need to provide refScene! Check your initial JSON you load a startup for the ID of you SceneGeo and give this ID a refScene. Did you get the openWindow event?

Cheers Uwe

[Former Member · Accepted solution]

Dear Uwe, Thanks you, I could open detail window now. I am having hard time to pass data for this detail window content. In examples content are hardcoded in onOpenWindow. I added additional fields under data in original json (with their definitions under DataTypes), but not sure how to pass it to detail window. I need to display detailed information for the business on the map detail window.

"Set": {

              "N": [

               {

                "name": "DetailWindowPositions",

                "E": [

                 {

                  "P": "8.6431509;49.29340323;0.0",

                  "C": "USA",

                  "O": "AT&T",

                  "S": "10,000",

                  "AC": "5"

                 },

                 {

                  "P": "0;30;0",

                  "C": "France",

                  "O": "Biline",

                  "S": "20,000",

                  "AC": "6"

                 }

                ]

               }

              ]

             }

"DataTypes": {

             "Set": {

              "N": [

               {

                "name": "DetailWindowPositions",

                "A": [

                 {

                  "name": "GeoPosition",

                  "type": "vector",

                  "alias": "P"

                      },

                      {

                  "name": "Country",

                  "type": "string",

                  "alias": "C"

                      },

                      {

                  "name": "OrgName",

                  "type": "string",

                  "alias": "O"

                      },

                      {

                  "name": "Spend",

                  "type": "string",

                  "alias": "S"

                      },

                      {

                  "name": "AlertCount",

                  "type": "string",

                  "alias": "AC"

                      }

                ]

               }

              ]

             }

            },

Here is other functions:

function onSubmit( e )

    {   

        var datEvent = JSON.parse( e.mParameters.data );

        var instanceNumber = datEvent.Action.instance.match(/\d+/g);

        onDetailWindow(instanceNumber);

    };

function onDetailWindow(instanceNumber)
    {
     var dat = {
       "SAPVB": {
         "version": "2.0",
         "xmlns:VB": "VB",
         "Windows": {
          "Remove": [
                      {
             "name": "Detail1"
             }
                   ],
          "Set": {
           "name": "Detail1",
           "Window": {
            "id": "Detail1",
            "type": "callout",
            "refParent": "Window1",
            "refScene": "",
            "modal": "false",
            "width": "400",
            "height": "",
            "caption": "Detail Window O(17/-30) Detail Window O(17/-30) Detail Window O(17/-30)",
                           "offsetX": "17",
                           "offsetY": "-30"
           }
          }
         }
       }
      };
    
     dat.SAPVB.Windows.Set.Window['pos.bind'] = "DetailWindowPositions." + instanceNumber + ".GeoPosition";
        
        oVBI.load( dat );

    };

I could set right position for details window but not sure how to pass additional parameters with window content or separate fields for it's content.

Thanks a lot!

Ella.

[former_member182119 · Accepted solution]

Hi Ella,

Good that you managed to open the window. In the example given above you find a further subscription of event openWindow:

var oVBI1 = new sap.ui.vbm.VBI('ds',

{

   width : 1024,

   height: 620,

   openWindow: onOpenWindow,

   submit: onSubmit        // set the event handler

});

oVBI1.placeAt("content");

In the event handler onOpenWindow you can create the content using any UI5 controls and finaly place your content in the detail window:

function onOpenWindow( oEvent )

{

   oPanel = new sap.ui.commons.Panel({width: "350px", showCollapseIcon: false});

   ...

   //Attach the panel to the page

   oPanel.placeAt( oEvent.getParameter( "contentarea" ).id );

};

Cheers Uwe

[Former Member · Accepted solution]

Dear Uwe,

I could implement detail window, thank you so much!

I am now trying to implement zoom functionality similar to go google maps or mapquest works. When user double clicks on the point on the map, it would zoom in.

I couldn't find though double click event for map. I tried

[Former Member · Accepted solution]

I tried "refEvent": "DblClick" but it didn't work. I could only implement it with using click, but it would be inconsistent with google maps.

Thanks a lot!

Ella.

[former_member182119 · Accepted solution]

Hello Ella,

I am sorry, but there is no double click event. It is also not really foreseen that you implement zoom on double click on your own. We support zoom on double tap on mobile/touch devices, but on desktop we only support zoom with mouse wheel or by drawing a rectangle.

If you think zoom on double click is important on desktop as well, we might provide this with an next version.

Best regards,

Uwe