<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>SAP GeoMap</title>
<!-- ⚠ NOTE: While the OpenStreetMap tiles themselves are free to use, their tile server is not! It is explicitly prohibited to reference OSM's tile server in your application for commercial purposes. You'll need to download the tiles and serve them by yourself. -->
<script id="sap-ui-bootstrap"
src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true"
data-sap-ui-compatVersion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-resourceroots='{ "demo": "./" }'
data-sap-ui-xx-waitfortheme="init"
data-sap-ui-xx-componentPreload="off"
></script><!-- xx-componentpreload="off" only for previews to avoid 404 -->
<!-- For SAPUI5 1.76.1 and below:
- Do NOT enable sap-ui-async="true" yet as "sap.ui.vbm.GeoMap" is having troubles with it: in the app, that was built w/ UI5 tooling, GeoMap will report inaccurate latitude values of viewportBB in zoomChanged and centerChanged event. Also adding a VO (E.g. "sap.ui.vbm.Circles") programmatically on an existing ClusterTree causes a runtime error. Keep in mind that "sap.ui.vbm" controls haven't been updated since 2012.
- There are cosmetic bugs in sap.ui.vk.MapContainer with Quartz themes (https://github.com/SAP/openui5/issues/2878).
-->
</head>
<body class="sapUiBody">
<div data-sap-ui-component
data-name="demo"
data-id="rootComponentContainer"
data-height="100%"
data-settings='{"id" : "rootComponent"}'
></div>
</body>
</html>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], function(UIComponent, Device) {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
interfaces: [
"sap.ui.core.IAsyncContentCreation",
],
manifest: "json",
},
init: function () {
UIComponent.prototype.init.apply(this, arguments);
this.getModel("mapConfig").setDefaultBindingMode("OneWay");
this.setDensity().getRouter().initialize();
},
setDensity: function ({
styleClass = Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy",
targetElement = document.body,
} = {}) {
targetElement.classList.add(styleClass);
return this;
},
});
});
{
"_version": "1.35.0",
"sap.app": {
"id": "demo",
"type": "application",
"applicationVersion": {
"version": "1.0.0"
},
"title": "appTitle",
"description": "appDescription",
"dataSources": {
"mapConfig": {
"type": "JSON",
"uri": "./map/config.json"
}
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"handleValidation": true,
"dependencies": {
"minUI5Version": "1.76.0",
"libs": {
"sap.m": {},
"sap.ui.core": {},
"sap.ui.layout": {},
"sap.ui.vbm": {},
"sap.ui.vk": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"mapConfig": {
"dataSource": "mapConfig"
}
},
"rootView": {
"id": "rootView",
"viewName": "demo.view.Root",
"type": "XML",
"height": "100%"
},
"routing": {
"routes": {
"home": {
"pattern": "",
"target": [
"home"
]
}
},
"targets": {
"home": {
"id": "mapContainerView",
"name": "MapContainer",
"level": 1
}
},
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"type": "View",
"async": true,
"controlAggregation": "pages",
"controlId": "app",
"transition": "slide",
"path": "demo.view"
}
}
}
}
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m"
>
<Page id="page"
showHeader="false"
enableScrolling="false"
backgroundDesign="Transparent"
>
<vk:MapContainer id="mapContainer"
xmlns:vk="sap.ui.vk"
autoAdjustHeight="true"
showSettings="false"
showFullScreen="false"
showRectangularZoom="false"
showSelection="false"
showHome="false"
>
<vk:listPanelStack>
<!-- ... -->
</vk:listPanelStack>
<vk:ContainerContent>
<vk:content> <!-- needs to be sap.ui.vbm.GeoMap -->
<core:Fragment fragmentName="demo.view.fragments.Map" type="XML" />
</vk:content>
</vk:ContainerContent>
</vk:MapContainer>
</Page>
</mvc:View>
<vbm:GeoMap id="map"
xmlns:mvc="sap.ui.core.mvc"
xmlns:vbm="sap.ui.vbm"
xmlns="sap.m"
width="100%"
height="100%"
enableAnimation="false"
mapConfiguration="{mapConfig>/}"
>
<vbm:clusters>
<vbm:ClusterTree id="clusterTree"
textProperty="text"
areaAlwaysVisible="false"
areaColor="rgba(255,255,255,0)"
areaColorBorder="rgba(255,255,255,0)"
>
<vbm:vizTemplate>
<vbm:Cluster id="vizTemplate"
type="Warning"
icon="sap-icon://wrench"
/>
</vbm:vizTemplate>
</vbm:ClusterTree>
</vbm:clusters>
</vbm:GeoMap>
<mvc:View xmlns:mvc="sap.ui.core.mvc" displayBlock="true">
<App id="app" xmlns="sap.m" autoFocus="false">
<pages>
<!-- placed by the router -->
</pages>
</App>
</mvc:View>
{
"MapProvider": [
{
"Id": "base",
"name": "Base",
"tileX": "512",
"tileY": "512",
"minLOD": "1",
"maxLOD": "19",
"copyright": "openstreetmap.org",
"Source": [
{
"id": "a",
"url": "https://a.tile.openstreetmap.org/{LOD}/{X}/{Y}.png"
},
{
"id": "b",
"url": "https://b.tile.openstreetmap.org/{LOD}/{X}/{Y}.png"
},
{
"id": "c",
"url": "https://c.tile.openstreetmap.org/{LOD}/{X}/{Y}.png"
}
]
}
],
"MapLayerStacks": [
{
"name": "Default",
"MapLayer": [
{
"name": "Default",
"refMapProvider": "Base",
"opacity": "1.0"
}
],
"colBkgnd": "rgb(0,0,0)"
}
]
}