<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>GeoMap</title>
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-xx-bindingSyntax="complex"
>
</script>
<style>
.customStyle {
width: 80rem;
height: 35rem;
}
.vbmStyle{
margin-left:10%;
}
</style>
<!-- XML-based view definition -->
<script id="chartView" type="sapui5/xmlview">
<mvc:View
controllerName="CustomTile.Main"
xmlns:l="sap.ui.layout"
xmlns:suite="sap.suite.ui.commons"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:vbm="sap.ui.vbm"
class="viewPadding">
<App>
<pages>
<Page
title="GeoMap"
class="marginBoxContent" >
<content>
<CustomTile id="oCustom">
<content>
<HBox>
<vbm:GeoMap id="vbi" width="610px" height="540px"/>
<vbm:GeoMap id="vbi1" width="610px" height="540px" class="vbmStyle"/>
</HBox>
</content>
</CustomTile>
</content>
</Page>
</pages>
</App>
</mvc:View>
</script>
<script>
// Controller definition
sap.ui.controller("CustomTile.Main", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf table_v01.Main
*/
onInit: function() {
this.getView().byId("oCustom").removeStyleClass("sapMCustomTile").addStyleClass("sapMTile").addStyleClass("customStyle");
}
});
// Instantiate the View, assign a model
// and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#chartView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */