Re: How to insert a map inside a Vertical Splitter pane

Hi Andreas,

I am using a Vertical Layout with a Table(based on Odata Model) and a Vertical Splitter with it

The table is visible and pie chart present in second pane of splitter is also visible

Now I wanted to see map in the first pane of splitter

For this, I was trying the Geolocation Example given in below link:

Using geolocation - WebAPI | MDN

I have created a button in first Pane so that when I click on it, map should be shown

When I click on button, it shows the map but then it removes everything and shows only map

The reason being I am using the same   <div id="content"></div> to show map but this div  is also used by other layouts also and because of this on clicking button, only map is shown

I tried creating another <div> for map, but that is not working

So I want to know how can I get the map working in the splitter

Below i some sample code from js file:

//Button Code

var oButton1 = new sap.ui.commons.Button({

               text : "Show my Location",

               tooltip : "Show my Location on the map",

               getSplitterBarVisible : true,

               press : function geoFindMe() {

               var output = document.getElementById("content");

               if (!navigator.geolocation){

                 output.innerHTML = "<p>Geolocation is not supported by your browser</p>";

                 return;

               }

               function success(position) {

                   var latitude  = position.coords.latitude;

                   var longitude = position.coords.longitude;

                   output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

                   var img = new Image();

                   img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

                   output.appendChild(img);

                 };

                 function error() {

                   output.innerHTML = "Unable to retrieve your location";

                 };

                 output.innerHTML = "<p>Locating…</p>";

                 navigator.geolocation.getCurrentPosition(success, error);

               }

       });

//Splitter added:

var oSplitterV = new sap.ui.commons.Splitter("splitterV");

          oSplitterV.setSplitterOrientation(sap.ui.commons.Orientation.vertical);

          oSplitterV.setSplitterPosition("50%");

          oSplitterV.setMinSizeFirstPane("20%");

          oSplitterV.setMinSizeSecondPane("30%");

          oSplitterV.setWidth("100%");

          oSplitterV.setHeight("400px");

oSplitterV.addFirstPaneContent(oButton1);

          oSplitterV.addSecondPaneContent(oPieChart);

//Final Layout

var oLayout = new sap.ui.layout.VerticalLayout("Layout1", {

           content: [oTable,oSplitterV]

Regards,

Vivek