<!DOCTYPE html>
<!--
Copyright 2017 SAP SE
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.-->
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>WK1U04.1 - Binding of datasource to symbols</title>
<script id='sap-ui-bootstrap'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_belize_plus'
data-sap-ui-libs="sap.m, sap.ui.vbm, sap.uxap, sap.ui.layout "
data-sap-ui-xx-bindingSyntax='complex'></script>
<script id="myXml" type="text/xmldata">
<mvc:View displayBlock="true" controllerName="myController"
xmlns:vbm="sap.ui.vbm"
xmlns:vk="sap.ui.vk"
xmlns="sap.uxap"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:m="sap.m"
xmlns:l="sap.ui.layout" >
<m:App>
<m:Page>
<l:FixFlex class="fixFlexVertical" fixFirst="true">
<l:fixContent>
<m:Panel expandable="true" expanded="false">
<m:headerToolbar>
<m:Toolbar>
<m:Title text="Drag and Drop a databound object" />
</m:Toolbar>
</m:headerToolbar>
<m:content>
<m:VBox>
<m:Text text="A green + symbol should appear when you start to drag an item (then disappear) before reappearing when you move over a compatible drop target"/>
</m:VBox>
</m:content>
</m:Panel>
</l:fixContent>
<l:flexContent>
<vk:MapContainer>
<vk:content>
<vk:ContainerContent title="GeoMap" icon="sap-icon://map">
<vk:content>
<vbm:GeoMap height="300px" id="geoMap" initialZoom="11" initialPosition="-75.089215;39.833815;0">
</vbm:GeoMap>
</vk:content>
</vk:ContainerContent>
</vk:content>
</vk:MapContainer>
</l:flexContent>
</l:FixFlex>
</m:Page>
</m:App>
</mvc:View>
</script>
<script>
sap.ui.controller("myController", {
onInit: function() {
// If you have not set up any Map Provider keys, then we will set a default map for one of the providers so that you can see something
var sUrl = "https://a.tile.openstreetmap.org/{LOD}/{X}/{Y}.png";
var sCopyright = "Tile courtesy of OpenStreetMap";
var oMapConfig = { "MapProvider":
[
{
"name": "OSM",
"type": "",
"description": "",
"tileX": "256",
"tileY": "256",
"maxLOD": "19",
"copyright": sCopyright,
"Source": [{
"id": "s1",
"url": sUrl
}
]
},
],
"MapLayerStacks":
[
{
"name": "Default",
"MapLayer":[
{
"name": "layer1",
"refMapProvider": "OSM",
"opacity": "0.5",
"colBkgnd": "RGB(255,255,255)"
}]
}]
};
var oGeoMap = this.getView().byId("geoMap");
oGeoMap.setMapConfiguration(oMapConfig);
var oModel = new sap.ui.model.xml.XMLModel("./ElevatorInfos.xml");
oModel.setNameSpace("http://www.w3.org/2005/Atom");
oModel.setNameSpace("http://schemas.microsoft.com/ado/2007/08/dataservices", "d");
oModel.setNameSpace("https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/", "base");
oModel.setNameSpace("http://schemas.microsoft.com/ado/2007/08/dataservices/metadata", "m");
oModel.setSizeLimit(500);
var oSpotTemplate = new sap.ui.vbm.Spot({
position: {
parts: [
{path: "content/m:properties/d:Latitude/text()" },
{path: "content/m:properties/d:Longitude/text()" }
],
formatter: function(lat, lon) {
return ("" + lon + ";" + lat);
}
},
type: sap.ui.vbm.SemanticType.Default,
tooltip: "{content/m:properties/d:AssetId/text()}",
dragData:"{content/m:properties/d:AssetId/text()}",
//dragSource: [new sap.ui.vbm.DragSource({type:'test1'})],
dropTarget: [new sap.ui.vbm.DropTarget({type:'test2'})],
drop: function(e){
console.log("Spot Drop");
var dragSource = e.getParameter('oDragSource');
var dropTarget = e.getSource();
sap.m.MessageToast.show("Dragged: " + dragSource.getTooltip() + " on to: " + dropTarget.getTooltip());
}
});
var oSpotsCollection = new sap.ui.vbm.Spots({
minSel:"0",
maxSel:"n",
dragSource: [new sap.ui.vbm.DragSource({type:'test1'})],
dropTarget: [new sap.ui.vbm.DropTarget({type:'test1'}), new sap.ui.vbm.DropTarget({type:'test2'})],
drop: function(){
console.log("Spots Drop");
},
items: {
path : "/entry",
template: oSpotTemplate
}});
//UNCOMMENT TO PLOT THE XML DATA AS SPOTS
oGeoMap.addVo(oSpotsCollection);
this.getView().setModel(oModel);
}
});
sap.ui.view({ viewContent: jQuery('#myXml').html(), type:sap.ui.core.mvc.ViewType.XML }).placeAt("content")
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
// Code goes here
/* Styles go here */
<?xml version='1.0' encoding='utf-8'?>
<feed xml:base="https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/" xmlns="http://www.w3.org/2005/Atom" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">
<id>https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/ElevatorInfos</id>
<title type="text">ElevatorInfos</title>
<updated>2018-05-04T00:53:17.814Z</updated>
<author>
<name/>
</author>
<link href="ElevatorInfos" rel="self" title="ElevatorInfos"/>
<entry>
<id>https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/ElevatorInfos('75d508bf-ec32-4ec8-8529-e29af6f49e08')</id>
<title type="text">ElevatorInfos</title>
<updated>2018-05-04T00:53:17.814Z</updated>
<category scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" term="elevator.ElevatorInfo"/>
<link href="ElevatorInfos('75d508bf-ec32-4ec8-8529-e29af6f49e08')" rel="edit" title="ElevatorInfo"/>
<content type="application/xml">
<m:properties>
<d:AssetId>GDH1</d:AssetId>
<d:City>Philadelphia</d:City>
<d:Company>Hawkins Industries</d:Company>
<d:Country>USA</d:Country>
<d:Description>Cira Centre</d:Description>
<d:ElevatorId>75d508bf-ec32-4ec8-8529-e29af6f49e08</d:ElevatorId>
<d:Email>gregory.hawkins@sap.com</d:Email>
<d:HouseNo>2929</d:HouseNo>
<d:Latitude>39.9573773</d:Latitude>
<d:Longitude>-75.1825678</d:Longitude>
<d:PostalCode>19104.0</d:PostalCode>
<d:Region>PA</d:Region>
<d:Street>Arch Street</d:Street>
</m:properties>
</content>
</entry>
<entry>
<id>https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/ElevatorInfos('60b88f3c-7688-4782-a39a-2960dc6dc408')</id>
<title type="text">ElevatorInfos</title>
<updated>2018-05-04T00:53:17.815Z</updated>
<category scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" term="elevator.ElevatorInfo"/>
<link href="ElevatorInfos('60b88f3c-7688-4782-a39a-2960dc6dc408')" rel="edit" title="ElevatorInfo"/>
<content type="application/xml">
<m:properties>
<d:AssetId>GC1</d:AssetId>
<d:City>Philadelphia</d:City>
<d:Company>Georgiana Labs</d:Company>
<d:Country>USA</d:Country>
<d:Description>Philadelphia City Hall</d:Description>
<d:ElevatorId>60b88f3c-7688-4782-a39a-2960dc6dc408</d:ElevatorId>
<d:Email>georgiana.copil@sap.com</d:Email>
<d:HouseNo>1401</d:HouseNo>
<d:Latitude>39.9524297</d:Latitude>
<d:Longitude>-75.1637316</d:Longitude>
<d:PostalCode>19102.0</d:PostalCode>
<d:Region>PA</d:Region>
<d:Street>John F Kennedy Blvd,</d:Street>
</m:properties>
</content>
</entry>
<entry>
<id>https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/ElevatorInfos('f8a4884e-74c9-44e4-a796-4c1b7c153299')</id>
<title type="text">ElevatorInfos</title>
<updated>2018-05-04T00:53:17.815Z</updated>
<category scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" term="elevator.ElevatorInfo"/>
<link href="ElevatorInfos('f8a4884e-74c9-44e4-a796-4c1b7c153299')" rel="edit" title="ElevatorInfo"/>
<content type="application/xml">
<m:properties>
<d:AssetId>SIM01</d:AssetId>
<d:City>Philadelphia</d:City>
<d:Company>Johnson Inc.</d:Company>
<d:Country>USA</d:Country>
<d:Description>Philadelphia Airport Marriott</d:Description>
<d:ElevatorId>f8a4884e-74c9-44e4-a796-4c1b7c153299</d:ElevatorId>
<d:Email>georgiana.copil@sap.com</d:Email>
<d:HouseNo>1</d:HouseNo>
<d:Latitude>39.8775641</d:Latitude>
<d:Longitude>-75.2447508</d:Longitude>
<d:PostalCode>19153.0</d:PostalCode>
<d:Region>PA</d:Region>
<d:Street>Arrivals Rd--Terminal B</d:Street>
</m:properties>
</content>
</entry>
<entry>
<id>https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/ElevatorInfos('4557b453-1776-428d-9608-51e9606c0f40')</id>
<title type="text">ElevatorInfos</title>
<updated>2018-05-04T00:53:17.815Z</updated>
<category scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" term="elevator.ElevatorInfo"/>
<link href="ElevatorInfos('4557b453-1776-428d-9608-51e9606c0f40')" rel="edit" title="ElevatorInfo"/>
<content type="application/xml">
<m:properties>
<d:AssetId>SIM02</d:AssetId>
<d:City>Camden</d:City>
<d:Company>Synapse Limited</d:Company>
<d:Country>USA</d:Country>
<d:Description>Campbell Soup Company</d:Description>
<d:ElevatorId>4557b453-1776-428d-9608-51e9606c0f40</d:ElevatorId>
<d:Email>georgiana.copil@sap.com</d:Email>
<d:HouseNo>1</d:HouseNo>
<d:Latitude>39.9390356</d:Latitude>
<d:Longitude>-75.108158</d:Longitude>
<d:PostalCode>08103</d:PostalCode>
<d:Region>NJ</d:Region>
<d:Street>Campbell Place</d:Street>
</m:properties>
</content>
</entry>
<entry>
<id>https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/ElevatorInfos('23469ae4-0517-43ea-9a3f-469560a7150b')</id>
<title type="text">ElevatorInfos</title>
<updated>2018-05-04T00:53:17.815Z</updated>
<category scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" term="elevator.ElevatorInfo"/>
<link href="ElevatorInfos('23469ae4-0517-43ea-9a3f-469560a7150b')" rel="edit" title="ElevatorInfo"/>
<content type="application/xml">
<m:properties>
<d:AssetId>SIM03</d:AssetId>
<d:City>King of Prussia</d:City>
<d:Company>Retail Space Limited</d:Company>
<d:Country>USA</d:Country>
<d:Description>The Plaza at King of Prussia</d:Description>
<d:ElevatorId>23469ae4-0517-43ea-9a3f-469560a7150b</d:ElevatorId>
<d:Email>georgiana.copil@sap.com</d:Email>
<d:HouseNo>190</d:HouseNo>
<d:Latitude>40.0866222</d:Latitude>
<d:Longitude>-75.3923289</d:Longitude>
<d:PostalCode>19406.0</d:PostalCode>
<d:Region>PA</d:Region>
<d:Street>North Gulph Road</d:Street>
</m:properties>
</content>
</entry>
<entry>
<id>https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/ElevatorInfos('82581392-dcff-4e27-88fe-37bc3c0ee7cd')</id>
<title type="text">ElevatorInfos</title>
<updated>2018-05-04T00:53:17.815Z</updated>
<category scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" term="elevator.ElevatorInfo"/>
<link href="ElevatorInfos('82581392-dcff-4e27-88fe-37bc3c0ee7cd')" rel="edit" title="ElevatorInfo"/>
<content type="application/xml">
<m:properties>
<d:AssetId>SIM04</d:AssetId>
<d:City>Wilmington</d:City>
<d:Company>Rayford Electronics</d:Company>
<d:Country>USA</d:Country>
<d:Description>American International Building</d:Description>
<d:ElevatorId>82581392-dcff-4e27-88fe-37bc3c0ee7cd</d:ElevatorId>
<d:Email>georgiana.copil@sap.com</d:Email>
<d:HouseNo>1105</d:HouseNo>
<d:Latitude>39.7473963</d:Latitude>
<d:Longitude>-75.5472064</d:Longitude>
<d:PostalCode>19801.0</d:PostalCode>
<d:Region>DE</d:Region>
<d:Street>North Market St.</d:Street>
</m:properties>
</content>
</entry>
<entry>
<id>https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/ElevatorInfos('fd3cb46c-6d07-45ba-a989-444011148479')</id>
<title type="text">ElevatorInfos</title>
<updated>2018-05-04T00:53:17.815Z</updated>
<category scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" term="elevator.ElevatorInfo"/>
<link href="ElevatorInfos('fd3cb46c-6d07-45ba-a989-444011148479')" rel="edit" title="ElevatorInfo"/>
<content type="application/xml">
<m:properties>
<d:AssetId>SIM05</d:AssetId>
<d:City>Mount Laurel</d:City>
<d:Company>Hospitality Holdings</d:Company>
<d:Country>USA</d:Country>
<d:Description>The Hotel ML</d:Description>
<d:ElevatorId>fd3cb46c-6d07-45ba-a989-444011148479</d:ElevatorId>
<d:Email>georgiana.copil@sap.com</d:Email>
<d:HouseNo>915</d:HouseNo>
<d:Latitude>39.933351</d:Latitude>
<d:Longitude>-74.962713</d:Longitude>
<d:PostalCode>08054</d:PostalCode>
<d:Region>NJ</d:Region>
<d:Street>NJ-73</d:Street>
</m:properties>
</content>
</entry>
<entry>
<id>https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/ElevatorInfos('c5110503-c23a-4f3c-ac0d-d1aaa20167b1')</id>
<title type="text">ElevatorInfos</title>
<updated>2018-05-04T00:53:17.815Z</updated>
<category scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" term="elevator.ElevatorInfo"/>
<link href="ElevatorInfos('c5110503-c23a-4f3c-ac0d-d1aaa20167b1')" rel="edit" title="ElevatorInfo"/>
<content type="application/xml">
<m:properties>
<d:AssetId>SIM06</d:AssetId>
<d:City>Camden</d:City>
<d:Company>Camden Healthcare Providers</d:Company>
<d:Country>USA</d:Country>
<d:Description>Cooper University Hospital</d:Description>
<d:ElevatorId>c5110503-c23a-4f3c-ac0d-d1aaa20167b1</d:ElevatorId>
<d:Email>atul.savur@sap.com</d:Email>
<d:HouseNo>800</d:HouseNo>
<d:Latitude>39.9415712</d:Latitude>
<d:Longitude>-75.1171772</d:Longitude>
<d:PostalCode>08102</d:PostalCode>
<d:Region>NJ</d:Region>
<d:Street>Cooper St # 103</d:Street>
</m:properties>
</content>
</entry>
<entry>
<id>https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/ElevatorInfos('cbfe3469-858d-4263-8c03-ec351eb07b5f')</id>
<title type="text">ElevatorInfos</title>
<updated>2018-05-04T00:53:17.815Z</updated>
<category scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" term="elevator.ElevatorInfo"/>
<link href="ElevatorInfos('cbfe3469-858d-4263-8c03-ec351eb07b5f')" rel="edit" title="ElevatorInfo"/>
<content type="application/xml">
<m:properties>
<d:AssetId>SIM07</d:AssetId>
<d:City>Philadelphia</d:City>
<d:Company>General Salt</d:Company>
<d:Country>USA</d:Country>
<d:Description>Philadelphia Museum of Art</d:Description>
<d:ElevatorId>cbfe3469-858d-4263-8c03-ec351eb07b5f</d:ElevatorId>
<d:Email>atul.savur@sap.com</d:Email>
<d:HouseNo>2600</d:HouseNo>
<d:Latitude>39.9656298</d:Latitude>
<d:Longitude>-75.1811224</d:Longitude>
<d:PostalCode>19130.0</d:PostalCode>
<d:Region>PA</d:Region>
<d:Street>Benjamin Franklin Pkwy</d:Street>
</m:properties>
</content>
</entry>
<entry>
<id>https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/ElevatorInfos('c8e88aa4-89bc-4567-a5f2-cc3a01c55a67')</id>
<title type="text">ElevatorInfos</title>
<updated>2018-05-04T00:53:17.815Z</updated>
<category scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" term="elevator.ElevatorInfo"/>
<link href="ElevatorInfos('c8e88aa4-89bc-4567-a5f2-cc3a01c55a67')" rel="edit" title="ElevatorInfo"/>
<content type="application/xml">
<m:properties>
<d:AssetId>SIM08</d:AssetId>
<d:City>Philadelphia</d:City>
<d:Company>Plastic Spaceship, LLC</d:Company>
<d:Country>USA</d:Country>
<d:Description>Temple University--1940 Residence Hall</d:Description>
<d:ElevatorId>c8e88aa4-89bc-4567-a5f2-cc3a01c55a67</d:ElevatorId>
<d:Email>atul.savur@sap.com</d:Email>
<d:HouseNo>1940</d:HouseNo>
<d:Latitude>39.9828672</d:Latitude>
<d:Longitude>-75.1565201</d:Longitude>
<d:PostalCode>19122.0</d:PostalCode>
<d:Region>PA</d:Region>
<d:Street>Liacouras Walk</d:Street>
</m:properties>
</content>
</entry>
<entry>
<id>https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/ElevatorInfos('57876883-4ee1-4a43-b352-37eba83aeeb4')</id>
<title type="text">ElevatorInfos</title>
<updated>2018-05-04T00:53:17.816Z</updated>
<category scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" term="elevator.ElevatorInfo"/>
<link href="ElevatorInfos('57876883-4ee1-4a43-b352-37eba83aeeb4')" rel="edit" title="ElevatorInfo"/>
<content type="application/xml">
<m:properties>
<d:AssetId>SIM09</d:AssetId>
<d:City>Depford Township</d:City>
<d:Company>Marriott International</d:Company>
<d:Country>USA</d:Country>
<d:Description>Fairfield Inn</d:Description>
<d:ElevatorId>57876883-4ee1-4a43-b352-37eba83aeeb4</d:ElevatorId>
<d:Email>atul.savur@sap.com</d:Email>
<d:HouseNo>1160</d:HouseNo>
<d:Latitude>39.833815</d:Latitude>
<d:Longitude>-75.089215</d:Longitude>
<d:PostalCode>08096</d:PostalCode>
<d:Region>NJ</d:Region>
<d:Street>Hurffville Road</d:Street>
</m:properties>
</content>
</entry>
<entry>
<id>https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/ElevatorInfos('19810a09-7c60-482a-8a26-7325a059ebf2')</id>
<title type="text">ElevatorInfos</title>
<updated>2018-05-04T00:53:17.816Z</updated>
<category scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" term="elevator.ElevatorInfo"/>
<link href="ElevatorInfos('19810a09-7c60-482a-8a26-7325a059ebf2')" rel="edit" title="ElevatorInfo"/>
<content type="application/xml">
<m:properties>
<d:AssetId>SIM10</d:AssetId>
<d:City>Plymouth Meeting</d:City>
<d:Company>Lunson Holdings</d:Company>
<d:Country>USA</d:Country>
<d:Description>Boscov's Plymouth Meeting</d:Description>
<d:ElevatorId>19810a09-7c60-482a-8a26-7325a059ebf2</d:ElevatorId>
<d:Email>atul.savur@sap.com</d:Email>
<d:HouseNo>500</d:HouseNo>
<d:Latitude>40.1173908</d:Latitude>
<d:Longitude>-75.2812022</d:Longitude>
<d:PostalCode>19462.0</d:PostalCode>
<d:Region>PA</d:Region>
<d:Street>W Germantown Pike</d:Street>
</m:properties>
</content>
</entry>
<entry>
<id>https://elevateiota5d3e8f71.hana.ondemand.com:443/hub/odata.svc/ElevatorInfos('6bf83af1-f8b5-42ca-bb10-c34afa402670')</id>
<title type="text">ElevatorInfos</title>
<updated>2018-05-04T00:53:17.816Z</updated>
<category scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" term="elevator.ElevatorInfo"/>
<link href="ElevatorInfos('6bf83af1-f8b5-42ca-bb10-c34afa402670')" rel="edit" title="ElevatorInfo"/>
<content type="application/xml">
<m:properties>
<d:AssetId>HW1</d:AssetId>
<d:City>Philadelphia</d:City>
<d:Company>The Gallery</d:Company>
<d:Country>USA</d:Country>
<d:Description>The Gallery at East Market</d:Description>
<d:ElevatorId>6bf83af1-f8b5-42ca-bb10-c34afa402670</d:ElevatorId>
<d:Email>harold.wharton-hege@sap.com</d:Email>
<d:HouseNo>901</d:HouseNo>
<d:Latitude>39.9519846</d:Latitude>
<d:Longitude>-75.156069</d:Longitude>
<d:PostalCode>19107</d:PostalCode>
<d:Region>PA</d:Region>
<d:Street>Market St</d:Street>
</m:properties>
</content>
</entry>
</feed>