Prompt dans ChatGPT ou DeepSeek
Crée une carte interactive en HTML et JavaScript avec les bibliothèques Leaflet et MarkerCluster. La carte doit afficher les villes mondiales du classement GaWC 2024 réparties par catégories (Alpha++, Alpha+, Alpha) avec des coordonnées géographiques, des images, et des liens Wikipédia. Ajoute une légende pour les catégories et un contrôle des couches avec une vue satellite et une carte topographique. Inclus une clusterisation des marqueurs et des fenêtres pop-up avec les informations des villes. Chaque ville doit avoir une couleur spécifique selon sa catégorie.
Le résultat
Le fichier à télécharger et à ouvrir dans son explorateur web (Chrome, etc.)
Le code HTML généré par l’IA
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carte Interactive - Classement Alpha</title>
<link rel="stylesheet" href="<https://unpkg.com/[email protected]/dist/leaflet.css>" />
<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.min.css>" />
<style>
#map { height: 100vh; width: 100%; }
.legend {
background: rgba(255, 255, 255, 0.95);
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
font-size: 12px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="<https://unpkg.com/[email protected]/dist/leaflet.js>"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js>"></script>
<script>
// Configuration de la carte
const map = L.map("map", {
center: [20, 0],
zoom: 2,
layers: [
L.tileLayer("<https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}>", {
attribution: "© Esri"
})
]
});
// Couches basiques
const baseLayers = {
"Vue Satellite": L.tileLayer("<https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}>", {
attribution: "© Esri"
}),
"Carte Topographique": L.tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png")
};
// Catégories de villes
const categories = {
"Alpha++": "darkred",
"Alpha+": "red",
"Alpha": "orange"
};
// Données des villes
const cities = [
// Alpha++
{
name: "Londres",
category: "Alpha++",
coordinates: [51.5074, -0.1278],
image: "<https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/London_Montage_L.jpg/1280px-London_Montage_L.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Londres>"
},
{
name: "New York",
category: "Alpha++",
coordinates: [40.7128, -74.0060],
image: "<https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/New_york_times_square-terabass.jpg/1280px-New_york_times_square-terabass.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/New_York>"
},
// Alpha+
{
name: "Hong Kong",
category: "Alpha+",
coordinates: [22.3193, 114.1694],
image: "<https://upload.wikimedia.org/wikipedia/commons/e/e1/1_hongkong_panorama_victoria_peak_2011.JPG>",
wiki: "<https://fr.wikipedia.org/wiki/Hong_Kong>"
},
{
name: "Pékin",
category: "Alpha+",
coordinates: [39.9042, 116.4074],
image: "<https://upload.wikimedia.org/wikipedia/commons/d/dd/Beijing_montage.png>",
wiki: "<https://fr.wikipedia.org/wiki/P%C3%A9kin>"
},
{
name: "Singapour",
category: "Alpha+",
coordinates: [1.3521, 103.8198],
image: "<https://upload.wikimedia.org/wikipedia/commons/d/d0/Skyscrapers_in_Singapore_10.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Singapour>"
},
{
name: "Shanghai",
category: "Alpha+",
coordinates: [31.2304, 121.4737],
image: "<https://upload.wikimedia.org/wikipedia/commons/4/4c/Huangpu_Park_20124-Shanghai_%2832208802494%29.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Shanghai>"
},
{
name: "Paris",
category: "Alpha+",
coordinates: [48.8566, 2.3522],
image: "<https://upload.wikimedia.org/wikipedia/commons/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Paris>"
},
{
name: "Dubaï",
category: "Alpha+",
coordinates: [25.276987, 55.296249],
image: "<https://upload.wikimedia.org/wikipedia/commons/8/86/DubaiCollage.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Duba%C3%AF_(ville)>"
},
{
name: "Tokyo",
category: "Alpha+",
coordinates: [35.6895, 139.6917],
image: "<https://upload.wikimedia.org/wikipedia/commons/b/bf/Tokyo_Montage_2015.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Tokyo>"
},
{
name: "Sydney",
category: "Alpha+",
coordinates: [-33.8688, 151.2093],
image: "<https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg/1280px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Sydney>"
},
// Alpha
{
name: "Séoul",
category: "Alpha",
coordinates: [37.5665, 126.9780],
image: "<https://upload.wikimedia.org/wikipedia/commons/0/0a/Seoul_montage.PNG>",
wiki: "<https://fr.wikipedia.org/wiki/S%C3%A9oul>"
},
{
name: "Milan",
category: "Alpha",
coordinates: [45.4642, 9.1900],
image: "<https://upload.wikimedia.org/wikipedia/commons/6/60/Milan.Proper.Wikipedia.Image.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Milan>"
},
{
name: "Toronto",
category: "Alpha",
coordinates: [43.6532, -79.3832],
image: "<https://upload.wikimedia.org/wikipedia/commons/b/b5/Toronto_August_2017.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Toronto>"
},
{
name: "Francfort",
category: "Alpha",
coordinates: [50.1109, 8.6821],
image: "<https://upload.wikimedia.org/wikipedia/commons/e/e4/Frankfurt_collage.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Francfort-sur-le-Main>"
},
{
name: "Chicago",
category: "Alpha",
coordinates: [41.8781, -87.6298],
image: "<https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Chicago_montage1.jpg/1280px-Chicago_montage1.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Chicago>"
},
{
name: "Jakarta",
category: "Alpha",
coordinates: [-6.2088, 106.8456],
image: "<https://upload.wikimedia.org/wikipedia/commons/b/b7/Jakarta_Pictures-4.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Jakarta>"
},
{
name: "São Paulo",
category: "Alpha",
coordinates: [-23.5505, -46.6333],
image: "<https://upload.wikimedia.org/wikipedia/commons/4/49/Montagem_SP.png>",
wiki: "<https://fr.wikipedia.org/wiki/S%C3%A3o_Paulo>"
},
{
name: "Mexico",
category: "Alpha",
coordinates: [19.4326, -99.1332],
image: "<https://upload.wikimedia.org/wikipedia/commons/1/15/Montaje.Ciudad_de_M%C3%A9xico.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Mexico>"
},
{
name: "Bombay",
category: "Alpha",
coordinates: [19.0760, 72.8777],
image: "<https://upload.wikimedia.org/wikipedia/commons/1/14/Mumbai_Skyline_at_Night.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Mumbai>"
},
{
name: "Madrid",
category: "Alpha",
coordinates: [40.4168, -3.7038],
image: "<https://upload.wikimedia.org/wikipedia/commons/e/e6/CollageMadrid.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Madrid>"
},
{
name: "Varsovie",
category: "Alpha",
coordinates: [52.2297, 21.0122],
image: "<https://upload.wikimedia.org/wikipedia/commons/3/35/Aleja_Niepdleglosci_Warsaw_2022_aerial_%28cropped%29.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Varsovie>"
},
{
name: "Canton",
category: "Alpha",
coordinates: [23.1291, 113.2644],
image: "<https://upload.wikimedia.org/wikipedia/commons/d/df/Guangzhou_montage.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Canton_(Chine)>"
},
{
name: "Istanbul",
category: "Alpha",
coordinates: [41.0082, 28.9784],
image: "<https://upload.wikimedia.org/wikipedia/commons/5/54/Istanbul_collage_4.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Istanbul>"
},
{
name: "Amsterdam",
category: "Alpha",
coordinates: [52.3676, 4.9041],
image: "<https://upload.wikimedia.org/wikipedia/commons/d/d9/Siege_Philips_Amsterdam.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Amsterdam>"
},
{
name: "Bangkok",
category: "Alpha",
coordinates: [13.7563, 100.5018],
image: "<https://upload.wikimedia.org/wikipedia/commons/a/a0/Bangkok_Montage.png>",
wiki: "<https://fr.wikipedia.org/wiki/Bangkok>"
},
{
name: "Los Angeles",
category: "Alpha",
coordinates: [34.0522, -118.2437],
image: "<https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/LA_Skyline_Mountains2.jpg/1280px-LA_Skyline_Mountains2.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Los_Angeles>"
},
{
name: "Kuala Lumpur",
category: "Alpha",
coordinates: [3.1390, 101.6869],
image: "<https://upload.wikimedia.org/wikipedia/commons/1/11/KL_Composite2.jpg>",
wiki: "<https://fr.wikipedia.org/wiki/Kuala_Lumpur>"
}
];
// Clusterisation des marqueurs
const markers = L.markerClusterGroup();
// Ajout des villes
cities.forEach(city => {
const marker = L.circleMarker(city.coordinates, {
radius: 8,
color: categories[city.category],
fillColor: categories[city.category],
fillOpacity: 0.7
}).bindPopup(`
<div>
<h3>${city.name}</h3>
<img src="${city.image}" alt="${city.name}" style="width:100%; height:auto; border-radius:5px;">
<p><a href="${city.wiki}" target="_blank">En savoir plus</a></p>
</div>
`);
markers.addLayer(marker);
});
map.addLayer(markers);
// Légende
const legend = L.control({ position: "bottomright" });
legend.onAdd = function () {
const div = L.DomUtil.create("div", "legend");
div.innerHTML = "<h4>Catégories</h4>";
Object.keys(categories).forEach(key => {
div.innerHTML += `<i style="background: ${categories[key]}; width: 12px; height: 12px; display: inline-block; margin-right: 5px;"></i> ${key}<br>`;
});
return div;
};
legend.addTo(map);
// Contrôle des couches
L.control.layers(baseLayers).addTo(map);
</script>
</body>
</html>