markdowntesting/map.html at main · mzhc13/markdowntesting · GitHub

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>UK City Map — SHAREing Project</title>

  <!-- Leaflet CSS -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    crossorigin=""
  />

  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest"></script>

  <style>
    html, body {
      height: 100%;
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      background: #f8f9fa;
    }

    #map {
      height: 100%;
      width: 100%;
    }

    /* Overlay background */
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .overlay.active {
      display: flex;
      animation: fadeIn 0.3s ease forwards;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Central modal panel */
    .info-panel {
      background: #ffffff;
      width: 90%;
      max-width: 600px;
      padding: 25px 30px 35px;
      border-radius: 20px;
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
      transform: scale(0.9);
      opacity: 0;
      transition: all 0.3s ease;
      position: relative;
    }

    .overlay.active .info-panel {
      transform: scale(1);
      opacity: 1;
    }

    .info-panel h2 {
      margin-top: 0;
      color: #002A41;
      font-size: 1.6rem;
    }

    .info-panel h3 {
      margin-top: 25px;
      color: #740574;
    }

    .close-btn {
      background: none;
      border: none;
      font-size: 1.6rem;
      cursor: pointer;
      position: absolute;
      top: 15px;
      right: 20px;
      color: #002A41;
    }

    .city-desc {
      margin-top: 10px;
      line-height: 1.6;
      color: #333;
    }

    /* Team members grid layout */
.member-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  padding: 0;
  margin-top: 20px;
  list-style: none;
  text-align: center;
}

.member {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.member .avatar {
  width: 80px;
  height: 80px;
  background: #740574;
  border-radius: 50%;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member .avatar i {
  color: #FFFFFF;
  width: 32px;
  height: 32px;
}

.member-name {
  font-weight: 600;
  color: #222;
}

.member-role {
  font-style: italic;
  color: #444;
  font-size: 0.9rem;
}

</style>
</head>
<body>
<div id="map"></div>

  <div id="overlay" class="overlay" onclick="closePanel(event)">
<div id="infoPanel" class="info-panel" onclick="event.stopPropagation()">
<button class="close-btn" onclick="closePanel()">×</button>
<h2 id="cityTitle">City</h2>
<div id="cityContent" class="city-desc">Click a city to learn more.</div>
</div>
</div>

  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>

  <script>
    // === Example city data with SHAREing members placeholders ===
    const cities = [
      {
        name: 'Durham University',
        lat: 54.7753, lon: -1.5849,
        info: 'Durham University is a collegiate public research university in Durham, England, founded by an Act of Parliament in 1832 and incorporated by royal charter in 1837. While being the third-oldest university in England, the Department of Computer Science is one of Durham’s newest academic departments, having split from the School of Engineering and Computer Science in 2017. It currently hosts research groups in computer vision, AI, high-performance and scientific computing, digital humanities, computer science education, and networks. Durham houses multiple supercomputers, most notably the supercomputer serving the eight most research-intensive universities in the North of England, and the DiRAC tier-1 machine',
        members: [
          { name: 'Thomas Flynn', role: 'Research Software Engineer' },
          { name: 'Tobias Weinzierl', role: 'Professor in the Department of Computer Science' },
          { name: 'Eva Fernandez', role: 'Community Manager for Digital Research Infrastructure' },
          { name: 'Alan Real', role: 'Director of Advanced Research Computing' },
          { name: 'Eamonn Bell', role: 'Professor in the Department of Computer Science' },
          { name: 'Alastair Basden', role: 'Director of COSMA' },
          { name: 'Gokmen Kilic', role: 'Research Software Engineer' },
        ]
      },
      {
        name: 'Cardiff University',
        lat: 51.4816, lon: -3.1791,
        info: 'Cardiff is the capital of Wales.',
        members: [
          { name: 'Jon Lockley', role: 'Director of Advanced Research Computing' },
          { name: 'Jon Lockley', role: 'Director of Advanced Research Computing' }
        ]
      },
      {
        name: 'University of Sheffield',
        lat: 53.3811, lon: -1.4701,
        info: 'Sheffield is a city in South Yorkshire.',
        members: [
          { name: 'Davide Costanzo', role: 'Head of Particle Physics and Particle Astrophysics Research Cluster' }
        ]
      },
      {
        name: 'Queen Mary University of London',
        lat: 51.5074, lon: -0.1278,
        info: 'Queen Mary University of London (QMUL) is an established university in London’s vibrant East End committed to high-quality research. High-Performace Computing underpins the activity of two Research Centres at QMUL: The Centre for Geometry, Analysis and Gravitation in the School of Mathematical Sciences, and the Centre for Fundamental Physics in the School of Physical and Chemical Sciences. Queen Mary University of London hosts and runs Apocrita, a heterogeneous HPC cluster comprising around 350 nodes and 12,500 compute cores.',
        members: [
         { name: 'Georgios Fourtakas', role: 'Centre for Geometry, Analysis and Gravitation, School of Mathematical Sciences' },
          { name: 'Jon Hays', role: ' Head of Particle Physics Research Centre' }
        ]
      },
      {
        name: 'The University of Manchester',
        lat: 53.4808, lon: -2.2426,
        info: 'The University of Manchester is a public research university located in Manchester, UK and its roots trace back to 1824. As a research-intensive institution, it is a member of the Russell Group, the N8 Research Partnership, and the US-based Universities Research Association. Recognised as one of the UK’s red brick universities, it has a long-standing tradition of academic excellence, innovation and research. The School of Engineering at the University of Manchester is a centre of excellence in innovation, research, and interdisciplinary collaboration. Through the Modelling and Simulation Centre (MaSC), the School harnesses advanced computational techniques to tackle complex engineering challenges.',
        members: [
          { name: 'Georgios Fourtakas', role: 'Associate Professor, School of Engineering' }
        ]
      },
      {
        name: 'Swansea University',
        lat: 51.6214, lon: -3.9436,
        info: 'Swansea University is a research-intensive university in Swansea, Wales, founded by royal charter in 1920 as a constituent college of the University of Wales, and becoming independent in 2007. The Swansea Academy of Advanced Computing (SA2C), founded in 2017, bridges Digital Services and the academic Faculties to deliver high-performance computing services to researchers across Wales. This has included hosting the Swansea hub of the Supercomputing Wales facility, and hosting the AccelerateAI facility.',
        members: [
          { name: 'Ed Bennett', role: 'Senior Research Software Engineer' }
        ]
      },
      {
        name: 'CoSeC',
        lat: 53.3406, lon: -2.8494,
        info: 'The Computational Science Centre for Research Communities (CoSeC) enables and supports collaborative computational research communities that are funded across UKRI. It has a mission to deliver research software as an infrastructure in order to enable world-class UK Research and Innovation. The communities are designed using multiple structures, including Collaborative Computational Projects (CCPs) and High-End Computing (HEC) Consortia. The Centre is run by UKRI STFC Scientific Computing and is made up of a core Programme Office plus a large team of Research Technical Professionals organised into domain-specific technical teams.',
        members: [
          { name: 'Damian Jones', role: 'Programme Manager' },
          { name: 'Stephen Longshaw', role: 'Director of the Computational Science Centre for Research Communities' }
        ]
      }
    ];

    const ukBounds = L.latLngBounds([49.8, -8.0], [59.0, 2.0]);
    const map = L.map('map', {
      minZoom: 5,
      maxZoom: 10,
      maxBounds: ukBounds,
      maxBoundsViscosity: 1.0
    }).setView([54, -2], 6);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    const normalStyle = { radius: 8, color: '#002A41', fillColor: '#002A41', weight: 1, fillOpacity: 0.85 };
    const hoverStyle = { radius: 14, color: '#B906B9', fillColor: '#B906B9', weight: 2, fillOpacity: 1 };

    const overlay = document.getElementById('overlay');
    const cityTitle = document.getElementById('cityTitle');
    const cityContent = document.getElementById('cityContent');

    function openPanel(city) {
      cityTitle.textContent = city.name;
      cityContent.innerHTML = `
  <p>${city.info}</p>
  <h3>Team Members</h3>
  <ul class="member-list">
    ${city.members.map(m => `
      <li class="member">
        <div class="avatar"><i data-lucide="user"></i></div>
        <div class="member-name">${m.name}</div>
        <div class="member-role"><em>${m.role}</em></div>
      </li>
    `).join('')}
  </ul>
`;
      overlay.classList.add('active');
      lucide.createIcons();
    }

    function closePanel(event) {
      if (event && event.target !== overlay && !event.target.classList.contains('close-btn'))
        return;
      overlay.classList.remove('active');
    }

    cities.forEach(city => {
      const marker = L.circleMarker([city.lat, city.lon], normalStyle).addTo(map);
      marker.bindTooltip(city.name, { direction: 'top', offset: [0, -8] });

      marker.on('mouseover', () => marker.setStyle(hoverStyle));
      marker.on('mouseout', () => marker.setStyle(normalStyle));
      marker.on('click', () => openPanel(city));
    });
</script>
</body>
</html>