Skip to Content
0

In SAP UI5 FIORI How to show the country state area in geomap or SAP standard Map using Web IDE?

Aug 03, 2017 at 10:14 AM

165

avatar image
Former Member

Hi All,

We have seen that using Latitude/Longitude we can show data points on GeoMap for point locations. How can we implement it to show areas or boundaries like for countries or states.

India

USA

Brazil

France

Italy etc...

How can we implement this in SAP UI5 Fiori Webide.

1. As soon as i click on particular state i will get all the Sales data of that particular state.

or

1.i want to plot circle in that case how we plot circle please share your ideas and solution.

2.As per data i want to plot circle as per sales data.

this.oData = 
   {
      regionProperties :
      [  {
            "code" : "DE",
            "region" : "Germany",
            "Revenue": 428214.13,
            "Cost": 94383.52,
            "color" : "rgb(92,186,230)",
         }, {
            "code" : "FR",
            ...
         }   
      ]
   };

In above code is it possible to add sub region 
eg. My country "code":  "IN"  sub region like "IN-AP","IN-KA"......etc
In that code i want sub region such as state so is it possible .sub region like "IN-AP","IN-KA"...... etc

Regards,

Umesh

map.jpg (233.9 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

avatar image
Former Member Aug 03, 2017 at 12:17 PM
0

Have started with the development??

if yes please provide the screenshots/snippet (view and controller code),

so that we can guide you based the issue you are facing?

Show 4 Share
10 |10000 characters needed characters left characters exceeded
Former Member

i want to divide the country state wise and also plot data in state in form of circle or chart.

Code for View.xml

<viz:VizFrame id="ChartAnalytic" uiConfig="{applicationSet:'fiori'}" width='100%' height='100%' vizType='column'> <viz:dataset> <viz.data:FlattenedDataset data="{/regionProperties}"> <viz.data:dimensions> <viz.data:DimensionDefinition name="Region" value="{region}"/> </viz.data:dimensions> <viz.data:measures> <viz.data:MeasureDefinition name="Revenue" value="{Revenue}"/> <viz.data:MeasureDefinition name="Cost" value="{Cost}"/> </viz.data:measures> </viz.data:FlattenedDataset> </viz:dataset> <viz:feeds> <viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="Revenue"/> <viz.feeds:FeedItem id='valueAxisFeed2' uid="valueAxis" type="Measure" values="Cost"/> <viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Region"/> </viz:feeds> </viz:VizFrame> </l:Splitter>

controller

return Controller.extend("sap.map.indiaZMAP2.controller.View1", { onInit: function() { this.oData = { regionProperties: [{ "code": "IN", "region": "India", "Revenue": 428214.13, "Cost": 94383.52, "color": "rgb(92,186,230)", }, { "code": "FR", "region": "France", "Revenue": 1722148.36, "Cost": 274735.17, "color": "rgb(182,217,87)" }, { "code": "IT", "region": "Italy", "Revenue": 1331176.706884, "Cost": 233160.58, "color": "rgb(250,195,100)" }, { "code": "GR", "region": "Greece", "Revenue": 1878466.82, "Cost": 235072.19, "color": "rgb(110,139,61)" }, { "code": "ES", "region": "Spain", "Revenue": 3326251.94, "Cost": 582543.16, "color": "rgb(217,152,203)" }, { "code": "PT", "region": "Portugal", "Revenue": 2090030.97, "Cost": 397952.77, "color": "rgb(242,210,73)" }] }; // Analytic Map: create model, set the data and set the model this.oModel = new sap.ui.model.json.JSONModel(); this.oModel.setData(this.oData); this.oVBI = this.getView().byId("VBIAnalytic"); this.oVBI.setModel(this.oModel); // Analytic Map: create and set the legend this.oLegend = new sap.ui.vbm.Legend({ caption: "Analytic Legend", items: { path: "/regionProperties", template: new sap.ui.vbm.LegendItem({ text: "{region}", color: '{color}' }) } });

Thanks,

Umesh

0
Former Member
0
Former Member
Former Member

i want to mark boundaries by state wise using longitude and latitude for that any code is available for specific country because i finish with my view i just want to mark region as well to show the circle for that.

Thanks ,

Umesh k

0
Former Member
Former Member
this.oData = 
   {
      regionProperties :
      [  {
            "code" : "DE",
            "region" : "Germany",
            "Revenue": 428214.13,
            "Cost": 94383.52,
            "color" : "rgb(92,186,230)",
         }, {
            "code" : "FR",
            ...
         }   
      ]
   };

In above code is it possible to add sub region 
eg. My country "code":  "IN"  sub region like "IN-AP","IN-KA"......etc
In that code i want sub region such as state so is it possible .sub region like "IN-AP","IN-KA"...... etc
0