Hugging Face's logo

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

App Files Community
awacke1 commited on
Commit
3342ef4
·
1 Parent(s): 8523408

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +104 -17
index.html CHANGED
@@ -1,19 +1,106 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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", "https://cdn.aframe.io/examples/ar/models/earth/continents.gltf");
88
+ marker.setAttribute("scale", "5 5 5");
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>