Hugging Face's logo

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

App Files Community
awacke1 commited on
Commit
5edaabb
·
1 Parent(s): 1ade0f9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +44 -100
index.html CHANGED
@@ -1,106 +1,50 @@
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>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
5
+ <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDybq2mxujekZVivmr03Y5-GGHXesn4TLI"></script>
6
+ </head>
7
+ <body>
8
+ <a-scene>
9
+ <!-- Camera and Controls -->
10
+ <a-entity camera look-controls></a-entity>
11
+
12
+ <!-- Google Maps Entity -->
13
+ <a-entity id="map" position="0 1.6 -1"></a-entity>
14
+ </a-scene>
 
 
 
 
 
15
 
16
+ <script>
17
+ // Get the map element
18
+ var mapEl = document.querySelector('#map');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
 
20
+ // Set the size of the map element
21
+ mapEl.setAttribute('geometry', {
22
+ primitive: 'plane',
23
+ height: 2,
24
+ width: 3
25
+ });
26
 
27
+ // Create a new Google Maps object
28
+ var map = new google.maps.Map(mapEl, {
29
+ center: {lat: 40.714, lng: -74.005},
30
+ zoom: 12
31
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
32
 
33
+ // Set the position of the map element based on the position of the Google Maps object
34
+ mapEl.setAttribute('position', {
35
+ x: map.getCenter().lng(),
36
+ y: 1.6,
37
+ z: -map.getCenter().lat()
38
+ });
39
+
40
+ // Listen for the Google Maps object to load and then set the position of the map element again
41
+ google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
42
+ mapEl.setAttribute('position', {
43
+ x: map.getCenter().lng(),
44
+ y: 1.6,
45
+ z: -map.getCenter().lat()
46
+ });
47
+ });
48
+ </script>
49
+ </body>
50
+ </html>