Skip to content

Commit a7053a1

Browse files
bryanlimyclaude
bryanlimy
and
claude
authored
Add Our Network section with interactive collaborator map (#1)
* Add Our Network section with interactive collaborator map Adds a Leaflet-powered interactive map section between The Team and Media, showing 5 collaborating institutes with clickable pins and popups displaying the institute name, city, description, key personnel, and a link to the group page where available. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * move map css * code cleaning * update --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 0ca479b commit a7053a1

3 files changed

Lines changed: 196 additions & 3 deletions

File tree

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
*.DS_Store
1+
*.DS_Store
2+
3+
.claude/

‎assets/css/main.css‎

Lines changed: 97 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ html {
190190
}
191191

192192
/* body {
193-
background-color: #935d8c;
193+
background-color: #935d8c;
194194
background-image: url("images/overlay.png"), -moz-linear-gradient(45deg, #e37682 15%, #5f4d93 85%);
195195
background-image: url("images/overlay.png"), -webkit-linear-gradient(45deg, #e37682 15%, #5f4d93 85%);
196196
background-image: url("images/overlay.png"), -ms-linear-gradient(45deg, #e37682 15%, #5f4d93 85%);
@@ -2766,7 +2766,7 @@ article.special {
27662766
}
27672767

27682768
header.major {
2769-
margin-bottom: 3em;
2769+
margin-bottom: 2em;
27702770
}
27712771

27722772
header.major h2 {
@@ -4054,4 +4054,99 @@ body.is-preload #header.alt .logo {
40544054
#counter {
40554055
font-size: 4em;
40564056
font-weight: 100;
4057+
}
4058+
4059+
/* Leaflet interactive map*/
4060+
4061+
#collab-map {
4062+
width: 100%;
4063+
height: 520px;
4064+
border-radius: 8px;
4065+
position: relative;
4066+
}
4067+
4068+
.collab-pin {
4069+
width: 26px;
4070+
height: 26px;
4071+
border-radius: 50% 50% 50% 0;
4072+
transform: rotate(-45deg);
4073+
border: 3px solid white;
4074+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
4075+
}
4076+
4077+
.leaflet-popup-content-wrapper {
4078+
border-radius: 12px;
4079+
box-shadow: 0 8px 40px rgba(13, 27, 42, 0.18);
4080+
padding: 0;
4081+
overflow: hidden;
4082+
}
4083+
4084+
.leaflet-popup-content {
4085+
margin: 0;
4086+
width: 260px !important;
4087+
}
4088+
4089+
.leaflet-popup-content p {
4090+
margin: 0 0 0.5em;
4091+
}
4092+
4093+
.collab-popup-header {
4094+
padding: 14px 16px 10px;
4095+
border-bottom: 3px solid;
4096+
}
4097+
4098+
.collab-popup-header h3 {
4099+
font-size: 1rem;
4100+
font-weight: 700;
4101+
color: #1a2e44;
4102+
line-height: 1.3;
4103+
margin: 0 0 2px 0;
4104+
border: none;
4105+
padding: 0;
4106+
}
4107+
4108+
.collab-popup-header p {
4109+
margin: 0;
4110+
}
4111+
4112+
.collab-popup-body {
4113+
padding: 12px 16px 14px;
4114+
background: #fff;
4115+
}
4116+
4117+
.collab-popup-desc {
4118+
margin: 0 0 8px 0;
4119+
line-height: 1.4;
4120+
}
4121+
4122+
.collab-popup-people {
4123+
display: flex;
4124+
flex-wrap: wrap;
4125+
gap: 4px;
4126+
margin-bottom: 10px;
4127+
}
4128+
4129+
.collab-popup-person {
4130+
display: inline-block;
4131+
background: #f0f0f0;
4132+
color: #333;
4133+
font-size: 0.72rem;
4134+
font-weight: 500;
4135+
padding: 2px 9px;
4136+
border-radius: 20px;
4137+
}
4138+
4139+
.collab-popup-link {
4140+
display: inline-block;
4141+
text-decoration: none;
4142+
}
4143+
4144+
.collab-popup-link:hover {
4145+
text-decoration: underline;
4146+
}
4147+
4148+
@media screen and (max-width: 736px) {
4149+
#collab-map {
4150+
height: 350px;
4151+
}
40574152
}

‎index.html‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<noscript>
1515
<link rel="stylesheet" href="assets/css/noscript.css" />
1616
</noscript>
17+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
1718
</head>
1819

1920
<body class="is-preload">
@@ -34,6 +35,7 @@ <h1>INTREPIBD Group</h1>
3435
<li><a href="#summary">Summary</a></li>
3536
<li><a href="#research">Research</a></li>
3637
<li><a href="#the-team">The Team</a></li>
38+
<li><a href="#our-network">Our Network</a></li>
3739
<li><a href="#media">Media</a></li>
3840
</ul>
3941
</nav>
@@ -260,6 +262,14 @@ <h3>Diego Hidalgo-Mazzei</h3>
260262
</ul>
261263
</section>
262264

265+
<section id="our-network" class="main special">
266+
<header class="major">
267+
<h2>Our Network</h2>
268+
<p>Research institutes we collaborate with around the world.</p>
269+
</header>
270+
<div id="collab-map"></div>
271+
</section>
272+
263273
<section id="media" class="main special publications">
264274
<header class="major">
265275
<h2>Media</h2>
@@ -362,6 +372,92 @@ <h2>Contact</h2>
362372

363373
<!-- <canvas class="background"></canvas>
364374
<script src="assets/js/particles.min.js"></script> -->
375+
376+
<!-- Leaflet for Our Network map -->
377+
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
378+
<script>
379+
const collabInstitutes = [
380+
{
381+
name: "Universidad de Cádiz",
382+
city: "Cádiz, Spain",
383+
lat: 36.5379139, lng: -6.300027,
384+
color: "#ff595e",
385+
description: "Leader of Neuropsychopharmacology and psychobiology group, Psychology Department",
386+
people: ["Cristina Romero López-Alberca"],
387+
url: "https://produccioncientifica.uca.es/investigadores/113353/detalle"
388+
},
389+
{
390+
name: "Hospital Universitario de Basurto",
391+
city: "Bilbao, Spain",
392+
lat: 43.2615543, lng: -2.955517,
393+
color: "#ffca3a",
394+
description: "Leader of Early Intervention Services for Psychosis",
395+
people: ["Ana Catalán Alcántara"],
396+
url: null
397+
},
398+
{
399+
name: "Hospital Universitari Institut Pere Mata",
400+
city: "Reus, Spain",
401+
lat: 41.1557062, lng: 1.0663926,
402+
color: "#8ac926",
403+
description: null,
404+
people: ["Esteban Sepúlveda Ramos"],
405+
url: null
406+
},
407+
{
408+
name: "Università di Parma",
409+
city: "Parma, Italy",
410+
lat: 44.8007886, lng: 10.3210303,
411+
color: "#1982c4",
412+
description: "Department of Medicine and Surgery",
413+
people: ["Paolo Ossola"],
414+
url: "https://personale.unipr.it/en/ugovdocenti/person/95562"
415+
},
416+
{
417+
name: "Hospital Clínic de Barcelona",
418+
city: "Barcelona, Spain",
419+
lat: 41.3894185, lng: 2.1496325,
420+
color: "#6a4c93",
421+
description: "Bipolar and depressive disorders research group",
422+
people: ["Diego Hidalgo-Mazzei", "Eduard Vieta"],
423+
url: "https://www.clinicbarcelona.org/en/idibaps/research-groups/bipolar-and-depressive-disorders"
424+
}
425+
];
426+
427+
const collabMap = L.map('collab-map', { zoomControl: true, attributionControl: true });
428+
429+
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
430+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/">CARTO</a>',
431+
subdomains: 'abcd',
432+
maxZoom: 19
433+
}).addTo(collabMap);
434+
435+
const collabMarkers = collabInstitutes.map(u => {
436+
const icon = L.divIcon({
437+
className: '',
438+
html: `<div class="collab-pin" style="background:${u.color}"></div>`,
439+
iconSize: [26, 26],
440+
iconAnchor: [13, 26],
441+
popupAnchor: [0, -28]
442+
});
443+
444+
const peopleHtml = u.people.map(p => `<span class="collab-popup-person">${p}</span>`).join('');
445+
const popupHtml = `
446+
<div class="collab-popup-header" style="border-color:${u.color}">
447+
<h3>${u.name}</h3>
448+
<p>&#128205; ${u.city}</p>
449+
</div>
450+
<div class="collab-popup-body">
451+
${u.description ? `<p class="collab-popup-desc">${u.description}</p>` : ''}
452+
<div class="collab-popup-people">${peopleHtml}</div>
453+
${u.url ? `<a class="collab-popup-link" href="${u.url}" target="_blank" rel="noopener">Visit group</a>` : ''}
454+
</div>`;
455+
456+
return L.marker([u.lat, u.lng], { icon }).bindPopup(popupHtml).addTo(collabMap);
457+
});
458+
459+
collabMap.fitBounds(L.featureGroup(collabMarkers).getBounds().pad(0.2));
460+
</script>
365461
</body>
366462

367463
</html>

0 commit comments

Comments
 (0)