Hugging Face's logo

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

App Files Community
HTML5-3D-Map-Hospitals
File size: 3,214 Bytes 
8523408
 
3342ef4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>A-Frame Google Maps Example</title>
  <meta name="description" content="A-Frame Google Maps Example">
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDybq2mxujekZVivmr03Y5-GGHXesn4TLI"></script>
</head>
<body>
  <a-scene>
    <a-entity id="camera" position="0 1.6 0">
      <a-entity id="rig" position="0 0 0">
        <a-entity camera look-controls wasd-controls></a-entity>
      </a-entity>
    </a-entity>
    <a-sky color="#e5e5e5"></a-sky>
    <a-entity id="markers"></a-entity>
  </a-scene>

  <script>
    // Define hospital locations with latitude and longitude
    const hospitals = [
      {
        name: "Mayo Clinic",
        lat: 44.021631,
        lng: -92.46298,
      },
      {
        name: "Cleveland Clinic",
        lat: 41.504752,
        lng: -81.609618,
      },
      {
        name: "Johns Hopkins Hospital",
        lat: 39.296677,
        lng: -76.592477,
      },
      {
        name: "Massachusetts General Hospital",
        lat: 42.362575,
        lng: -71.069588,
      },
      {
        name: "UCSF Medical Center",
        lat: 37.765188,
        lng: -122.457809,
      },
      {
        name: "New York-Presbyterian Hospital",
        lat: 40.840726,
        lng: -73.950286,
      },
      {
        name: "Brigham and Women's Hospital",
        lat: 42.336039,
        lng: -71.105804,
      },
      {
        name: "Stanford Health Care-Stanford Hospital",
        lat: 37.434647,
        lng: -122.176858,
      },
      {
        name: "Hospitals of the University of Pennsylvania-Penn Presbyterian",
        lat: 39.951084,
        lng: -75.195819,
      },
      {
        name: "Northwestern Memorial Hospital",
        lat: 41.896472,
        lng: -87.621113,
      },
    ];

    // Initialize Google Maps
    const map = new google.maps.Map(document.createElement("div"), {
      center: new google.maps.LatLng(37.7749, -122.4194),
      zoom: 5,
      disableDefaultUI: true,
    });

    // Create A-Frame markers for each hospital
    hospitals.forEach(hospital => {
      const marker = document.createElement("a-entity");
      marker.setAttribute("gps-entity-place", `latitude: ${hospital.lat}; longitude: ${hospital.lng};`);
      marker.setAttribute("gltf-model", "https://cdn.aframe.io/examples/ar/models/earth/continents.gltf");
      marker.setAttribute("scale", "5 5 5");
      marker.setAttribute("look-at", "#camera");
      marker.setAttribute("animation", "property: rotation; to: 0 360 0; loop: true; dur: 10000; easing: linear");
      document.querySelector("#markers").appendChild(marker);
});
// Add the Google Maps canvas to the A-Frame scene
const canvas = map.getDiv();
canvas.style.position = "absolute";
canvas.style.top = "0";
canvas.style.left = "0";
canvas.style.width = "100%";
canvas.style.height = "100%";
document.querySelector("a-scene").appendChild(canvas);

// Use GPS Entity component to sync A-Frame camera with Google Maps view
document.querySelector("#camera").setAttribute("gps-entity-place", `latitude: 37.7749; longitude: -122.4194;`);
  </script>
</body>
</html>