Carte Monde
Svg
Interactive
Javascript
Bootstrap 5
Html Css Js
Visualisation
International
Animation
Snippet
Continents
Data Viz
Carte du monde interactive en SVG avec présence mondiale sur les continents. Style professionnel Bootstrap 5 avec animations et effets au survol des zones.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippet Carte Work HTML CSS JS SVG 2026 05080003 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
:root {
--primary: #0066FF;
--dark: #0a0e27;
--card-bg: #111533;
}
body {
background-color: var(--dark);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
.world-map-section {
padding: 80px 0;
position: relative;
overflow: hidden;
}
.world-map-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 102, 255, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.section-badge {
display: inline-block;
background: rgba(0, 102, 255, 0.1);
color: var(--primary);
padding: 8px 20px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
margin-bottom: 15px;
border: 1px solid rgba(0, 102, 255, 0.2);
}
.section-title {
font-size: 42px;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
}
.section-subtitle {
color: #8888aa;
font-size: 16px;
margin-bottom: 50px;
}
.map-container {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.world-map-svg {
width: 100%;
height: auto;
filter: drop-shadow(0 10px 30px rgba(0, 102, 255, 0.2));
}
.continent-path {
fill: #1a1f4e;
stroke: #2a2f5e;
stroke-width: 1.5;
transition: all 0.3s ease;
cursor: pointer;
}
.continent-path:hover {
fill: #252a5e;
stroke: #3a3f6e;
}
.continent-path.active {
fill: #2a2f6e;
stroke: #0066FF;
stroke-width: 2;
}
.location-dot {
cursor: pointer;
transition: all 0.3s ease;
}
.location-dot:hover {
filter: brightness(1.5);
}
.location-pulse {
animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
0% {
r: 4;
opacity: 1;
}
50% {
r: 8;
opacity: 0.5;
}
100% {
r: 4;
opacity: 1;
}
}
.location-tooltip {
position: absolute;
background: var(--card-bg);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 10px 15px;
pointer-events: none;
z-index: 1000;
display: none;
backdrop-filter: blur(10px);
white-space: nowrap;
}
.location-tooltip .tooltip-title {
font-size: 13px;
font-weight: 600;
color: white;
margin: 0;
}
.location-tooltip .tooltip-subtitle {
font-size: 11px;
color: #8888aa;
margin: 3px 0 0 0;
}
.continent-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 40px;
}
.continent-tag {
display: flex;
align-items: center;
gap: 8px;
background: var(--card-bg);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50px;
padding: 10px 22px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
font-weight: 500;
color: #aaaacc;
}
.continent-tag:hover {
border-color: var(--primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 102, 255, 0.2);
}
.continent-tag.active {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.continent-tag .tag-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.stats-row {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-top: 30px;
}
.stat-item {
background: var(--card-bg);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 20px 30px;
text-align: center;
min-width: 150px;
transition: all 0.3s ease;
}
.stat-item:hover {
border-color: rgba(0, 102, 255, 0.4);
transform: translateY(-3px);
}
.stat-value {
font-size: 28px;
font-weight: 700;
color: white;
display: block;
}
.stat-label {
font-size: 13px;
color: #8888aa;
margin-top: 5px;
display: block;
}
</style>
</head>
<body>
<!-- Section Carte du Monde -->
<section class="world-map-section">
<div class="container">
<!-- En-tête -->
<div class="text-center mb-5">
<span class="section-badge">🌍 Présence Mondiale</span>
<h2 class="section-title">Nous sommes présents<br>sur tous les continents</h2>
<p class="section-subtitle">Découvrez notre réseau international et nos implantations stratégiques</p>
</div>
<!-- Carte -->
<div class="map-container" id="mapContainer">
<!-- SVG World Map -->
<svg class="world-map-svg" viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="dotGlow">
<stop offset="0%" stop-color="#0066FF" stop-opacity="1"/>
<stop offset="100%" stop-color="#0066FF" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Fond océan -->
<rect width="1000" height="500" fill="none"/>
<!-- Grille de fond subtile -->
<g stroke="#1a1f3e" stroke-width="0.5" fill="none" opacity="0.5">
<line x1="0" y1="125" x2="1000" y2="125"/>
<line x1="0" y1="250" x2="1000" y2="250"/>
<line x1="0" y1="375" x2="1000" y2="375"/>
<line x1="250" y1="0" x2="250" y2="500"/>
<line x1="500" y1="0" x2="500" y2="500"/>
<line x1="750" y1="0" x2="750" y2="500"/>
<line x1="100" y1="0" x2="100" y2="500"/>
<line x1="900" y1="0" x2="900" y2="500"/>
</g>
<!-- === AMÉRIQUE DU NORD === -->
<g id="continent-northAmerica">
<path class="continent-path"
d="M130,60 L155,35 L195,28 L230,32 L260,40 L285,35
L310,42 L330,55 L350,58 L370,52 L390,60
L400,72 L395,90 L385,105 L360,118 L340,128
L315,135 L295,140 L275,150 L258,158
L240,155 L225,148 L205,140 L185,130
L165,118 L148,102 L135,80 Z"
data-continent="northAmerica"/>
<!-- Groenland -->
<path class="continent-path"
d="M310,20 L335,12 L355,18 L368,30 L370,45
L360,52 L340,58 L318,55 L305,42 Z"
data-continent="northAmerica"/>
<!-- Points de localisation -->
<circle cx="200" cy="100" r="4" fill="#0066FF" class="location-dot location-pulse"
data-location="New York" data-info="Siège Amérique du Nord"/>
<circle cx="340" cy="45" r="3" fill="#0066FF" class="location-dot"
data-location="Toronto" data-info="Bureau régional"/>
<circle cx="160" cy="140" r="3" fill="#0066FF" class="location-dot"
data-location="Mexico" data-info="Centre opérationnel"/>
</g>
<!-- === AMÉRIQUE DU SUD === -->
<g id="continent-southAmerica">
<path class="continent-path"
d="M195,165 L215,160 L235,162 L250,172 L268,185
L278,200 L285,220 L290,245 L285,265
L275,285 L260,298 L245,305
L232,298 L222,278 L212,255
L202,232 L195,210 L190,185 Z"
data-continent="southAmerica"/>
<circle cx="265" cy="260" r="4" fill="#4ECDC4" class="location-dot location-pulse"
data-location="São Paulo" data-info="Hub Amérique Latine"/>
<circle cx="225" cy="225" r="3" fill="#4ECDC4" class="location-dot"
data-location="Lima" data-info="Bureau andin"/>
</g>
<!-- === EUROPE === -->
<g id="continent-europe">
<path class="continent-path"
d="M435,45 L455,32 L478,28 L498,32 L518,40
L535,48 L548,58 L555,72 L555,90
L545,105 L528,112 L512,115
L495,112 L478,107 L465,100
L452,90 L445,78 L438,62 Z"
data-continent="europe"/>
<!-- Îles Britanniques -->
<path class="continent-path"
d="M420,55 L432,48 L442,52 L445,62 L440,72 L428,75 L418,68 Z"
data-continent="europe"/>
<!-- Scandinavie -->
<path class="continent-path"
d="M462,18 L482,12 L502,18 L515,30 L508,42 L490,48 L472,44 L460,32 Z"
data-continent="europe"/>
<circle cx="470" cy="68" r="5" fill="#FF6B6B" class="location-dot location-pulse"
data-location="Paris" data-info="Siège Social"/>
<circle cx="495" cy="55" r="3" fill="#FF6B6B" class="location-dot"
data-location="Berlin" data-info="Bureau Europe Centrale"/>
<circle cx="432" cy="60" r="3" fill="#FF6B6B" class="location-dot"
data-location="Londres" data-info="Bureau International"/>
</g>
<!-- === AFRIQUE === -->
<g id="continent-africa">
<path class="continent-path"
d="M445,118 L460,112 L482,108 L502,108
L522,112 L542,118 L555,130 L562,148
L568,168 L570,190 L565,215
L555,242 L540,268 L522,290
L505,305 L490,312 L478,305
L465,290 L452,268 L442,242
L438,218 L440,192 L442,168
L445,145 Z"
data-continent="africa"/>
<!-- Madagascar -->
<path class="continent-path"
d="M575,268 L585,260 L592,270 L590,285 L580,288 L573,280 Z"
data-continent="africa"/>
<circle cx="500" cy="200" r="4" fill="#F7DC6F" class="location-dot location-pulse"
data-location="Nairobi" data-info="Hub Afrique"/>
<circle cx="470" cy="270" r="3" fill="#F7DC6F" class="location-dot"
data-location="Johannesburg" data-info="Bureau Afrique Australe"/>
<circle cx="545" cy="170" r="3" fill="#F7DC6F" class="location-dot"
data-location="Lagos" data-info="Bureau Afrique Ouest"/>
</g>
<!-- === ASIE === -->
<g id="continent-asia">
<path class="continent-path"
d="M570,50 L600,32 L640,25 L690,28
L740,38 L785,52 L820,65
L845,80 L860,98 L865,118
L855,140 L838,158 L815,172
L785,180 L748,185 L710,188
L672,185 L640,175 L612,162
L590,145 L575,125 L568,102
L562,80 L565,62 Z"
data-continent="asia"/>
<!-- Inde -->
<path class="continent-path"
d="M670,155 L688,148 L702,155 L712,170
L715,188 L708,200 L692,205
L678,195 L668,178 Z"
data-continent="asia"/>
<!-- Japon -->
<path class="continent-path"
d="M855,85 L865,78 L872,88 L870,100 L860,102 L852,95 Z"
data-continent="asia"/>
<!-- Asie du Sud-Est -->
<path class="continent-path"
d="M730,195 L745,190 L758,195 L768,208 L775,222
L765,228 L748,225 L735,215 Z"
data-continent="asia"/>
<circle cx="680" cy="110" r="5" fill="#96CEB4" class="location-dot location-pulse"
data-location="Shanghai" data-info="Hub Asie-Pacifique"/>
<circle cx="710" cy="175" r="3" fill="#96CEB4" class="location-dot"
data-location="Singapour" data-info="Centre financier"/>
<circle cx="860" cy="90" r="3" fill="#96CEB4" class="location-dot"
data-location="Tokyo" data-info="Bureau Asie de l'Est"/>
<circle cx="690" cy="148" r="3" fill="#96CEB4" class="location-dot"
data-location="Mumbai" data-info="Bureau Inde"/>
</g>
<!-- === OCÉANIE === -->
<g id="continent-oceania">
<path class="continent-path"
d="M730,290 L760,275 L790,278 L820,290
L840,305 L848,322 L838,340
L818,350 L790,355 L762,348
L740,338 L728,320 Z"
data-continent="oceania"/>
<!-- Nouvelle-Zélande -->
<path class="continent-path"
d="M865,355 L875,348 L882,358 L878,372 L868,378 L860,368 Z"
data-continent="oceania"/>
<circle cx="790" cy="315" r="4" fill="#FF8C42" class="location-dot location-pulse"
data-location="Sydney" data-info="Hub Océanie"/>
</g>
<!-- === ANTARCTIQUE === -->
<g id="continent-antarctica">
<path class="continent-path"
d="M150,445 L220,435 L320,430 L420,428
L520,430 L620,428 L720,430 L820,435 L880,442
L850,458 L760,465 L640,470 L500,472
L360,468 L250,462 L170,455 Z"
data-continent="antarctica"/>
</g>
<!-- Cercles de glow -->
<circle cx="200" cy="100" r="15" fill="url(#dotGlow)" opacity="0.3" class="location-glow"/>
<circle cx="470" cy="68" r="20" fill="url(#dotGlow)" opacity="0.4" class="location-glow"/>
<circle cx="680" cy="110" r="22" fill="url(#dotGlow)" opacity="0.35" class="location-glow"/>
</svg>
<!-- Tooltip -->
<div class="location-tooltip" id="locationTooltip">
<p class="tooltip-title"></p>
<p class="tooltip-subtitle"></p>
</div>
</div>
<!-- Liste des continents -->
<div class="continent-list">
<div class="continent-tag active" data-filter="all" onclick="filterContinents('all', this)">
<span class="tag-dot" style="background: #0066FF;"></span>
Tous
</div>
<div class="continent-tag" data-filter="northAmerica" onclick="filterContinents('northAmerica', this)">
<span class="tag-dot" style="background: #0066FF;"></span>
Amérique du Nord
</div>
<div class="continent-tag" data-filter="southAmerica" onclick="filterContinents('southAmerica', this)">
<span class="tag-dot" style="background: #4ECDC4;"></span>
Amérique du Sud
</div>
<div class="continent-tag" data-filter="europe" onclick="filterContinents('europe', this)">
<span class="tag-dot" style="background: #FF6B6B;"></span>
Europe
</div>
<div class="continent-tag" data-filter="africa" onclick="filterContinents('africa', this)">
<span class="tag-dot" style="background: #F7DC6F;"></span>
Afrique
</div>
<div class="continent-tag" data-filter="asia" onclick="filterContinents('asia', this)">
<span class="tag-dot" style="background: #96CEB4;"></span>
Asie
</div>
<div class="continent-tag" data-filter="oceania" onclick="filterContinents('oceania', this)">
<span class="tag-dot" style="background: #FF8C42;"></span>
Océanie
</div>
</div>
<!-- Statistiques -->
<div class="stats-row">
<div class="stat-item">
<span class="stat-value">15+</span>
<span class="stat-label">Bureaux</span>
</div>
<div class="stat-item">
<span class="stat-value">6</span>
<span class="stat-label">Continents</span>
</div>
<div class="stat-item">
<span class="stat-value">50+</span>
<span class="stat-label">Pays</span>
</div>
<div class="stat-item">
<span class="stat-value">500+</span>
<span class="stat-label">Clients</span>
</div>
</div>
</div>
</section>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const tooltip = document.getElementById('locationTooltip');
const mapContainer = document.getElementById('mapContainer');
const locationDots = document.querySelectorAll('.location-dot');
const continentPaths = document.querySelectorAll('.continent-path');
const continentGlows = document.querySelectorAll('.location-glow');
// Gestion du tooltip pour les points de localisation
locationDots.forEach(dot => {
dot.addEventListener('mouseenter', function(e) {
const location = this.getAttribute('data-location');
const info = this.getAttribute('data-info');
tooltip.querySelector('.tooltip-title').textContent = location;
tooltip.querySelector('.tooltip-subtitle').textContent = info;
tooltip.style.display = 'block';
});
dot.addEventListener('mousemove', function(e) {
const rect = mapContainer.getBoundingClientRect();
const x = e.clientX - rect.left + 20;
const y = e.clientY - rect.top - 60;
tooltip.style.left = x + 'px';
tooltip.style.top = y + 'px';
});
dot.addEventListener('mouseleave', function() {
tooltip.style.display = 'none';
});
});
// Gestion du survol des continents
continentPaths.forEach(path => {
path.addEventListener('mouseenter', function() {
const continent = this.getAttribute('data-continent');
// Highlight all paths in the same continent group
const group = this.closest('g');
if (group) {
const allPaths = group.querySelectorAll('.continent-path');
allPaths.forEach(p => p.style.opacity = '1');
}
});
path.addEventListener('mouseleave', function() {
const group = this.closest('g');
if (group) {
const allPaths = group.querySelectorAll('.continent-path');
allPaths.forEach(p => p.style.opacity = '');
}
});
});
// Masquer le tooltip quand on quitte la carte
mapContainer.addEventListener('mouseleave', function() {
tooltip.style.display = 'none';
});
});
// Fonction de filtrage par continent
function filterContinents(continent, element) {
// Mettre à jour les tags actifs
document.querySelectorAll('.continent-tag').forEach(tag => {
tag.classList.remove('active');
});
element.classList.add('active');
// Filtrer les continents
const allGroups = document.querySelectorAll('g[id^="continent-"]');
allGroups.forEach(group => {
const groupId = group.getAttribute('id').replace('continent-', '');
if (continent === 'all' || groupId === continent) {
group.style.opacity = '1';
group.style.transition = 'opacity 0.5s ease';
} else {
group.style.opacity = '0.15';
group.style.transition = 'opacity 0.5s ease';
}
});
}
</script>
</body>
</html>Télécharger le fichier source