Skip to Content
0
May 28, 2020 at 12:07 PM

SAPUI5 build map based on picute, shopfloor

89 Views Last edit May 28, 2020 at 12:34 PM 3 rev

Hello to all,

I need to build an application which shows a floor plan of a building (shopfloor). I also need to place some text boxes at defined positions with some data, like a popup. But I need several of them and all needs to be opened/active without user interaction.

How can I achieve this? I ran through Analytics Map and GeoMap which looks great and especially GeoMap with containers seems to fit. https://sapui5.hana.ondemand.com/#/entity/sap.ui.vbm.GeoMap/sample/sap.ui.vbm.sample.GeoMapCharts

However, I don't need a world map. I need a map based on my own picture/image showing the floor plan of a building. Anyone ever build something like that or any ideas how to solve this?

PS: I know there was a ImageMap class but it is marked as deprecated without any replacement.

Edit: I was able to load my custom image as map into GeoMap. But it gets repeated several times and doesn't zoom correct. Any way to fix this?

buildMap: function () {
			var oGeoMap = this.getView().byId("GeoMap");
			var oMapConfig = {
				"MapProvider": [{
					"name": "HEREMAPS",
					"type": "",
					"description": "",
					"tileX": "256",
					"tileY": "256",
					"maxLOD": "1",
					"copyright": "Tiles Courtesy of HERE Maps",
					"Source": [{
						"id": "s1",
						"url": "images/HS1.jpg"
					}]
				}],
				"MapLayerStacks": [{
					"name": "DEFAULT",
					"MapLayer": {
						"name": "layer1",
						"refMapProvider": "HEREMAPS",
						"opacity": "1.0",
						"colBkgnd": "RGB(255,255,255)"
					}
				}]
			};
			oGeoMap.setMapConfiguration(oMapConfig);
			oGeoMap.setRefMapLayerStack("DEFAULT");

Attachments

test.png (416.5 kB)