Hugging Face's logo

Spaces:
awacke1
/
HTML5-3D-Map-Hospitals
Running

App Files Community
awacke1 commited on
Commit
182d597
·
1 Parent(s): 06128ad

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +96 -31
index.html CHANGED
@@ -1,41 +1,106 @@
1
  <!DOCTYPE html>
 
2
  <head>
3
  <meta charset="utf-8">
4
- <title>Model Viewer AR - VR</title>
5
- <meta name="description" content="Model Viewer (VR / AR) • A-Frame">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
7
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
8
- <script src="info-message.js"></script>
9
- <script src="https://unpkg.com/[email protected]/dist/aframe-extras.min.js"></script>
10
- <script src="hide-on-enter-ar.js"></script>
11
- <script src="ar-shadows.js"></script>
12
- <script src="ar-hit-test.js"></script>
13
- <script src="model-viewer.js"></script>
14
- <script src="background-gradient.js"></script>
15
  </head>
16
  <body>
 
 
 
 
 
 
 
 
 
17
 
18
- <a-scene
19
- renderer="colorManagement: true;"
20
- info-message="htmlSrc: #messageText"
21
- model-viewer="gltfModel: #triceratops; title: Triceratops">
22
- <a-assets>
23
- <!--
24
- Model source: https://sketchfab.com/3d-models/triceratops-d16aabe33dc24f8ab37e3df50c068265
25
- Model author: https://sketchfab.com/VapTor
26
- Model license: Sketcfab Standard
27
- -->
28
- <a-asset-item id="triceratops"
29
- src="https://cdn.aframe.io/examples/ar/models/triceratops/scene.gltf"
30
- response-type="arraybuffer" crossorigin="anonymous"></a-asset-item>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
 
32
- <a-asset-item id="reticle"
33
- src="https://cdn.aframe.io/examples/ar/models/reticle/reticle.gltf"
34
- response-type="arraybuffer" crossorigin="anonymous"></a-asset-item>
 
 
 
35
 
36
- <img id="shadow" src="https://cdn.glitch.com/20600112-c04b-492c-8190-8a5ccc06f37d%2Fshadow.png?v=1606338852399"></img>
37
- <a-asset-item id="messageText" src="message.html"></a-asset-item>
38
- </a-assets>
39
- </a-scene>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  </body>
41
- </html>
 
1
  <!DOCTYPE html>
2
+ <html>
3
  <head>
4
  <meta charset="utf-8">
5
+ <title>A-Frame Google Maps Example</title>
6
+ <meta name="description" content="A-Frame Google Maps Example">
 
7
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
8
+ <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDybq2mxujekZVivmr03Y5-GGHXesn4TLI"></script>
 
 
 
 
 
 
9
  </head>
10
  <body>
11
+ <a-scene>
12
+ <a-entity id="camera" position="0 1.6 0">
13
+ <a-entity id="rig" position="0 0 0">
14
+ <a-entity camera look-controls wasd-controls></a-entity>
15
+ </a-entity>
16
+ </a-entity>
17
+ <a-sky color="#e5e5e5"></a-sky>
18
+ <a-entity id="markers"></a-entity>
19
+ </a-scene>
20
 
21
+ <script>
22
+ // Define hospital locations with latitude and longitude
23
+ const hospitals = [
24
+ {
25
+ name: "Mayo Clinic",
26
+ lat: 44.021631,
27
+ lng: -92.46298,
28
+ },
29
+ {
30
+ name: "Cleveland Clinic",
31
+ lat: 41.504752,
32
+ lng: -81.609618,
33
+ },
34
+ {
35
+ name: "Johns Hopkins Hospital",
36
+ lat: 39.296677,
37
+ lng: -76.592477,
38
+ },
39
+ {
40
+ name: "Massachusetts General Hospital",
41
+ lat: 42.362575,
42
+ lng: -71.069588,
43
+ },
44
+ {
45
+ name: "UCSF Medical Center",
46
+ lat: 37.765188,
47
+ lng: -122.457809,
48
+ },
49
+ {
50
+ name: "New York-Presbyterian Hospital",
51
+ lat: 40.840726,
52
+ lng: -73.950286,
53
+ },
54
+ {
55
+ name: "Brigham and Women's Hospital",
56
+ lat: 42.336039,
57
+ lng: -71.105804,
58
+ },
59
+ {
60
+ name: "Stanford Health Care-Stanford Hospital",
61
+ lat: 37.434647,
62
+ lng: -122.176858,
63
+ },
64
+ {
65
+ name: "Hospitals of the University of Pennsylvania-Penn Presbyterian",
66
+ lat: 39.951084,
67
+ lng: -75.195819,
68
+ },
69
+ {
70
+ name: "Northwestern Memorial Hospital",
71
+ lat: 41.896472,
72
+ lng: -87.621113,
73
+ },
74
+ ];
75
 
76
+ // Initialize Google Maps
77
+ const map = new google.maps.Map(document.createElement("div"), {
78
+ center: new google.maps.LatLng(37.7749, -122.4194),
79
+ zoom: 5,
80
+ disableDefaultUI: true,
81
+ });
82
 
83
+ // Create A-Frame markers for each hospital
84
+ hospitals.forEach(hospital => {
85
+ const marker = document.createElement("a-entity");
86
+ marker.setAttribute("gps-entity-place", `latitude: ${hospital.lat}; longitude: ${hospital.lng};`);
87
+ marker.setAttribute("gltf-model", "hugging_face.glb");
88
+ marker.setAttribute("scale", "0.1 0.1 0.1");
89
+ marker.setAttribute("look-at", "#camera");
90
+ marker.setAttribute("animation", "property:rotation; to: 0 360 0; loop: true; dur: 10000; easing: linear");
91
+ document.querySelector("#markers").appendChild(marker);
92
+ });
93
+ // Add the Google Maps canvas to the A-Frame scene
94
+ const canvas = map.getDiv();
95
+ canvas.style.position = "absolute";
96
+ canvas.style.top = "0";
97
+ canvas.style.left = "0";
98
+ canvas.style.width = "100%";
99
+ canvas.style.height = "100%";
100
+ document.querySelector("a-scene").appendChild(canvas);
101
+
102
+ // Use GPS Entity component to sync A-Frame camera with Google Maps view
103
+ document.querySelector("#camera").setAttribute("gps-entity-place", `latitude: 37.7749; longitude: -122.4194;`);
104
+ </script>
105
  </body>
106
+ </html>