Wereldkaart — Olav Kollen
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, sans-serif; background: white; }
#map-container { width: 100%; border-radius: 12px; overflow: hidden; background: #b8d9ea; }
#map-container svg { display: block; width: 100%; height: auto; }
.city-pin { cursor: pointer; }
.city-pin circle.outer { transition: r 0.15s; }
.city-pin:hover circle.outer { r: 10; }
.city-label {
font-size: 9px;
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, sans-serif;
pointer-events: none;
font-weight: 600;
}
/* Modal */
.modal-bg {
display: none;
min-height: 520px;
background: rgba(0,0,0,0.5);
align-items: center;
justify-content: center;
padding: 1rem;
position: fixed;
inset: 0;
z-index: 9999;
}
.modal-bg.open { display: flex; }
.modal {
background: white;
border-radius: 12px;
border: 1px solid rgba(0,0,0,0.1);
padding: 1.5rem;
max-width: 420px;
width: 100%;
position: relative;
max-height: 85vh;
overflow-y: auto;
}
.modal-close {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: none;
cursor: pointer;
font-size: 22px;
color: #888;
line-height: 1;
padding: 4px 8px;
}
.modal-close:hover { color: #1a1a1a; }
.modal-flag { font-size: 32px; margin-bottom: 8px; }
.modal-city { font-size: 22px; font-weight: 600; color: #1a1a1a; margin: 0 0 2px; }
.modal-country { font-size: 13px; color: #888; margin: 0 0 14px; }
/* === FOTO SECTIE ===
Vervang de src=”” hieronder met de URL van jouw foto.
Je kunt een foto uploaden in WordPress via Media > Uploaden,
dan rechtsklik op de foto > Afbeeldingsadres kopiëren.
*/
.modal-photo {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 12px;
background: #f0f0f0;
display: block;
}
.modal-photo-placeholder {
width: 100%;
height: 180px;
background: #f5f5f5;
border-radius: 8px;
border: 1px dashed #ccc;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
color: #aaa;
font-size: 13px;
}
/* === VIDEO SECTIE ===
Vervang de src=”” met een YouTube embed URL:
*/
.modal-video {
width: 100%;
height: 200px;
border-radius: 8px;
margin-bottom: 12px;
border: none;
}
.modal-story { font-size: 14px; color: #555; line-height: 1.7; margin: 0 0 12px; }
p { color: #555; font-size: 13px; margin-top: 8px; line-height: 1.6; }
Klik op een stad om mijn ervaring te zien ·
17 bestemmingen
https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js
// ============================================================
// STEDEN — vul hier jouw eigen tekst, foto-URL en video-URL in
// ============================================================
const cities = [
{
id: “denbosch”,
name: “Den Bosch”,
country: “Nederland”,
flag: “🇳🇱”,
lat: 51.69, lon: 5.30,
// Vervang met jouw eigen foto-URL (upload in WordPress Media)
photo: “”,
// Vervang met jouw YouTube embed URL, bv: “https://www.youtube.com/embed/ABC123”
video: “”,
story: “Vul hier jouw verhaal over Den Bosch in — wat maakt deze stad bijzonder voor jou?”
},
{
id: “newyork”,
name: “New York”,
country: “Verenigde Staten”,
flag: “🇺🇸”,
lat: 40.71, lon: -74.01,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over New York in.”
},
{
id: “tanzania”,
name: “Tanzania”,
country: “Tanzania”,
flag: “🇹🇿”,
lat: -6.37, lon: 34.89,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Tanzania in.”
},
{
id: “vancouver”,
name: “Vancouver”,
country: “Canada”,
flag: “🇨🇦”,
lat: 49.28, lon: -123.12,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Vancouver in.”
},
{
id: “marrakech”,
name: “Marrakech”,
country: “Marokko”,
flag: “🇲🇦”,
lat: 31.63, lon: -7.99,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Marrakech in.”
},
{
id: “parijs”,
name: “Parijs”,
country: “Frankrijk”,
flag: “🇫🇷”,
lat: 48.85, lon: 2.35,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Parijs in.”
},
{
id: “berlijn”,
name: “Berlijn”,
country: “Duitsland”,
flag: “🇩🇪”,
lat: 52.52, lon: 13.40,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Berlijn in.”
},
{
id: “milaan”,
name: “Milaan”,
country: “Italië”,
flag: “🇮🇹”,
lat: 45.46, lon: 9.19,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Milaan in.”
},
{
id: “londen”,
name: “Londen”,
country: “Verenigd Koninkrijk”,
flag: “🇬🇧”,
lat: 51.51, lon: -0.13,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Londen in.”
},
{
id: “barcelona”,
name: “Barcelona”,
country: “Spanje”,
flag: “🇪🇸”,
lat: 41.39, lon: 2.15,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Barcelona in.”
},
{
id: “lissabon”,
name: “Lissabon”,
country: “Portugal”,
flag: “🇵🇹”,
lat: 38.72, lon: -9.14,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Lissabon in.”
},
{
id: “bangkok”,
name: “Bangkok”,
country: “Thailand”,
flag: “🇹🇭”,
lat: 13.75, lon: 100.52,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Bangkok in.”
},
{
id: “helsinki”,
name: “Helsinki”,
country: “Finland”,
flag: “🇫🇮”,
lat: 60.17, lon: 24.94,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Helsinki in.”
},
{
id: “antwerpen”,
name: “Antwerpen”,
country: “België”,
flag: “🇧🇪”,
lat: 51.22, lon: 4.40,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Antwerpen in.”
},
{
id: “innsbruck”,
name: “Innsbruck”,
country: “Oostenrijk”,
flag: “🇦🇹”,
lat: 47.27, lon: 11.39,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Innsbruck in.”
},
{
id: “willemstad”,
name: “Willemstad”,
country: “Curaçao”,
flag: “🇨🇼”,
lat: 12.11, lon: -68.93,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Willemstad in.”
},
{
id: “athene”,
name: “Athene”,
country: “Griekenland”,
flag: “🇬🇷”,
lat: 37.98, lon: 23.73,
photo: “”,
video: “”,
story: “Vul hier jouw verhaal over Athene in.”
},
];
// ============================================================
// KAART LADEN — hoef je niet aan te passen
// ============================================================
const proj = d3.geoNaturalEarth1().scale(153).translate([480, 250]);
const path = d3.geoPath(proj);
const svg = d3.select(“#worldsvg”);
d3.json(“https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json”).then(world => {
const landFill = “#c8dda8”;
const borderStroke = “rgba(255,255,255,0.6)”;
const oceanFill = “#b8d9ea”;
svg.insert(“rect”,”*”).attr(“width”,960).attr(“height”,500).attr(“fill”,oceanFill);
svg.append(“g”)
.selectAll(“path”)
.data(topojson.feature(world, world.objects.countries).features)
.join(“path”)
.attr(“d”, path)
.attr(“fill”, landFill)
.attr(“stroke”, borderStroke)
.attr(“stroke-width”, 0.5);
svg.append(“path”)
.datum(topojson.mesh(world, world.objects.countries, (a,b) => a !== b))
.attr(“d”, path)
.attr(“fill”,”none”)
.attr(“stroke”, borderStroke)
.attr(“stroke-width”, 0.4);
const pinGroup = svg.append(“g”);
cities.forEach(c => {
const [x, y] = proj([c.lon, c.lat]);
if (!x || !y) return;
const g = pinGroup.append(“g”)
.attr(“class”,”city-pin”)
.attr(“transform”,`translate(${x},${y})`)
.style(“cursor”,”pointer”)
.on(“click”, () => openModal(c));
g.append(“circle”).attr(“class”,”outer”).attr(“r”,7).attr(“fill”,”#e24b4a”).attr(“stroke”,”white”).attr(“stroke-width”,1.5);
g.append(“circle”).attr(“r”,2.5).attr(“fill”,”white”);
const labelX = c.lon < -60 ? -10 : 10;
const labelAnchor = c.lon {
if (e.target === document.getElementById(“modal-bg”))
document.getElementById(“modal-bg”).classList.remove(“open”);
});
document.getElementById(“modal-close”).addEventListener(“click”, () => {
document.getElementById(“modal-bg”).classList.remove(“open”);
});
OLAV KOLLEN 