/
index.html
65 lines (57 loc) · 1.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<style>
body {
background: #fafafa;
}
#map {
height: 800px !important;
width: 800px !important;
}
</style>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
</head>
<body>
<!-- TODO: change the element -->
<context-provider id="provider">
<geolocation-map></geolocation-map>
</context-provider>
<script type="module">
import {
GeolocationService,
GeolocationMap,
TODO_REPLACE_NAME_CONTEXT,
} from '../dist';
import ConductorApi from '@holochain/conductor-api';
import { serializeHash } from '@holochain-open-dev/core-types';
import { ContextProviderElement } from '@holochain-open-dev/context';
(async function () {
const appWebsocket = await ConductorApi.AppWebsocket.connect(
'ws://localhost:8888'
);
const appInfo = await appWebsocket.appInfo({
installed_app_id: 'test-app',
});
const cellId = appInfo.cell_data[0].cell_id;
const service = new GeolocationService(appWebsocket, cellId);
await service.geolocateEntry({
entryHash: serializeHash(cellId[1]), // This is agent pubkey that is also an entry
latitude: 51.6,
longitude: -0.09,
});
customElements.define('context-provider', ContextProviderElement);
const provider = document.getElementById('provider');
provider.name = TODO_REPLACE_NAME_CONTEXT;
provider.value = service;
customElements.define('geolocation-map', GeolocationMap);
})();
</script>
</body>
</html>