· 4 years ago · May 11, 2021, 07:26 PM
1<!-- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -->
2<!-- SPDX-License-Identifier: MIT-0 -->
3<html>
4 <head>
5 <meta charset="utf-8" />
6 <title>Bike Monitoring</title>
7 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
8 <script src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"></script>
9 <link href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css" rel="stylesheet" />
10 <style>
11 body { margin: 0; padding: 0; }
12 #map { position: absolute; top: 0; bottom: 0; width: 100%; }
13 </style>
14 </head>
15
16 <body>
17 <div id="map" />
18 <style>
19 #geocoder-container > div {
20 min-width: 50%;
21 margin-left: 25%;
22 }
23 </style>
24 <script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script>
25 <script type="text/javascript" src="lib/CryptoJS/rollups/hmac-sha256.js"></script>
26 <script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script>
27 <script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script>
28 <script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script>
29 <script type="text/javascript" src="lib/url-template/url-template.js"></script>
30 <script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script>
31 <script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script>
32 <script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script>
33 <script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
34 <script type="text/javascript" src="apigClient.js"></script>
35 <script src="https://sdk.amazonaws.com/js/aws-sdk-2.784.0.min.js"></script>
36 <script src="https://unpkg.com/@aws-amplify/core@3.7.0/dist/aws-amplify-core.min.js"></script>
37 <script>
38 // use Signer from @aws-amplify/core
39 const { Signer } = window.aws_amplify_core;
40 // Cognito Identity Pool ID
41 const identityPoolId = "us-east-1:6b6735ce-8c4b-49df-82e9-25cd02f6b936";
42 // extract the region from the Identity Pool ID
43 AWS.config.region = identityPoolId.split(":")[0];
44 // instantiate a credential provider
45 const credentials = new AWS.CognitoIdentityCredentials({
46 IdentityPoolId: identityPoolId,
47 });
48
49 function transformRequest(url, resourceType){
50 if (resourceType === "Style" && !url.includes("://")) {
51 // resolve to an AWS URL
52 url = `https://maps.geo.${AWS.config.region}.amazonaws.com/maps/v0/maps/${url}/style-descriptor`;
53 }
54
55 if (url.includes("amazonaws.com")) {
56 // only sign AWS requests (with the signature as part of the query string)
57 return {
58 url: Signer.signUrl(url, {
59 access_key: credentials.accessKeyId,
60 secret_key: credentials.secretAccessKey,
61 session_token: credentials.sessionToken,
62 }),
63 };
64 }
65 return { url };
66 }
67
68 function GetParameters(){
69 const queryString = window.location.search;
70 const urlParams = new URLSearchParams(queryString);
71 const param_device = urlParams.get('device');
72 var mapName;
73 if( typeof urlParams.get('map') === 'undefined' || urlParams.get('map') === null ){
74 mapName = "default";
75 } else {
76 mapName = urlParams.get('map');
77 }
78 return {
79 device: param_device,
80 map: mapName
81 }
82 }
83
84 function GetGeolocation(device){
85 var apigClient = apigClientFactory.newClient();
86 var params = {
87 device: device,
88 };
89 var body={};
90 var additionalParams={};
91 try {
92 const myResVar = await apigClient.rootGet(params, body,additionalParams).promise()
93 }
94 catch (err) {
95 alert('FAIL');
96 showError(result);
97 }
98
99 return myResVar[data];
100 /*
101 return apigClient.rootGet(params, body, additionalParams)
102 .then(function(result){
103 alert(result['data']);
104 return result['data'];
105 }).catch( function(result){
106 alert('FAIL');
107 showError(result);
108 });
109 */
110 }
111
112 /////////////////////////////////
113 async function initializeMap(mapName, geolocation) {
114 await credentials.getPromise();
115 alert(geolocation);
116 var new_params={
117 container: "map",
118 center: geolocation,
119 zoom: 17,
120 style: 'default',
121 transformRequest,
122 };
123 const map = new maplibregl.Map(new_params);
124 map.addControl(new maplibregl.NavigationControl(), "top-left")
125 map.on('load', function () {
126 window.setInterval(function () {
127 updatelocation = GetGeolocation(parameters.device);
128 alert('dentro do window'+ updatelocation);
129
130 // Update location
131 map.getSource('position').setData({
132 "type": "FeatureCollection",
133 "features": [{
134 "type": "Feature",
135 "properties": {},
136 "geometry": {
137 "type": "Point",
138 "coordinates": updatelocation
139 }
140 }]
141 });
142 map.flyTo({
143 center: geolocation,
144 speed: 0.5
145 });
146 },1000);
147 });
148
149
150 }
151 /////////////////////////////////
152
153// await credentials.getPromise()
154 const parameters = GetParameters();
155 var gl = GetGeolocation(parameters.device);
156 initializeMap(parameters.map, [-23.502437,-46.8595150] );
157
158
159 </script>
160 </body>
161</html>