-
Notifications
You must be signed in to change notification settings - Fork 375
/
Copy pathindex.html
141 lines (129 loc) · 7.14 KB
/
index.html
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Villes</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="spectre.min.css"/>
<link rel="stylesheet" href="spectre-icons.min.css"/>
<link rel="stylesheet" href="spectre-exp.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<script type='text/javascript' src='https://unpkg.com/[email protected]/dist/leaflet.markercluster.js'></script>
<script type='text/javascript' src='carte.js'></script>
<script type="text/javascript">
// On initialise la latitude et la longitude de Paris (centre de la carte)
var lat = 48.852969;
var lon = 2.349903;
var villes = { // Seules les villes ajoutées dans ce tableau sont affichées sur la carte
// Le nom de la ville "qqChose" doit correspondre à un div d'id "ville_qqChose" plus bas
// Les coordonnées lat/lon d'une ville peuvent être trouvées sur wikipedia,
// ou dans google maps. Par exemple sur google maps, Les deux premiers
// nombres dans l'url sont lat et lon :
// https://www.google.com/maps/@50.4255595,2.8231708,12.95z
// correspond à Lens, avec lat : 50.4255595 lon :2.3231708
"Paris": { "lat": 48.852969, "lon": 2.349903 },
"Brest": { "lat": 48.383, "lon": -4.500 },
"Quimper": { "lat": 48.000, "lon": -4.100 },
"Bayonne": { "lat": 43.500, "lon": -1.467 }
};
window.onload = function(){
// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
initMap();
};
</script>
<style type="text/css">
#map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
height:600px;
}
</style>
<title>Villes</title>
</head>
<body>
<div id="map">
<!-- Ici s'affichera la carte -->
</div>
<div class="columns">
<!-- Début du div de la première ville -->
<div class="column col-xs-12 col-sm-6 col-md-3 col-2 col-lg-1">
<div id="ville_Paris" class="card bg-dark m-2">
<!-- L'id de la forme ville_A est nécessaire pour que le lien vers
la ville A fonctionne. Pensez à ajouter les coordonnées de A
dans le tableau ville, en début de fichier -->
<div class="card-header">
<div class="card-title h5">Paris</div>
<div class="card-subtitle text-gray">Capitale</div>
</div>
<div class="card-image">
<!-- Utilisez de préférence des images de taille identique partout (ici : 320x200)-->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/320px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg" class="img-responsive">
</div>
<div class="card-body bg-secondary text-dark">
Insérez description...
</div>
</div>
</div>
<!-- Fin du div de la première ville -->
<div class="column col-xs-12 col-sm-6 col-md-3 col-2 col-lg-1">
<div id="ville_Brest" class="card bg-dark m-2">
<!-- L'id de la forme ville_A est nécessaire pour que le lien vers
la ville A fonctionne. Pensez à ajouter les coordonnées de A
dans le tableau ville, en début de fichier -->
<div class="card-header">
<div class="card-title h5">Brest</div>
<div class="card-subtitle text-gray">Capitale</div>
</div>
<div class="card-image">
<!-- Utilisez de préférence des images de taille identique partout (ici : 320x200)-->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/320px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg" class="img-responsive">
</div>
<div class="card-body bg-secondary text-dark">
Insérez description...
</div>
</div>
</div>
<div class="column col-xs-12 col-sm-6 col-md-3 col-2 col-lg-1">
<div id="ville_Quimper" class="card bg-dark m-2">
<!-- L'id de la forme ville_A est nécessaire pour que le lien vers
la ville A fonctionne. Pensez à ajouter les coordonnées de A
dans le tableau ville, en début de fichier -->
<div class="card-header">
<div class="card-title h5">Quimper</div>
<div class="card-subtitle text-gray">Capitale</div>
</div>
<div class="card-image">
<!-- Utilisez de préférence des images de taille identique partout (ici : 320x200)-->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/320px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg" class="img-responsive">
</div>
<div class="card-body bg-secondary text-dark">
Insérez description...
</div>
</div>
</div>
<div class="column col-xs-12 col-sm-6 col-md-3 col-2 col-lg-1">
<div id="ville_Bayonne" class="card bg-dark m-2">
<!-- L'id de la forme ville_A est nécessaire pour que le lien vers
la ville A fonctionne. Pensez à ajouter les coordonnées de A
dans le tableau ville, en début de fichier -->
<div class="card-header">
<div class="card-title h5">Bayonne</div>
<div class="card-subtitle text-gray">Capitale</div>
</div>
<div class="card-image">
<!-- Utilisez de préférence des images de taille identique partout (ici : 320x200)-->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/320px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg" class="img-responsive">
</div>
<div class="card-body bg-secondary text-dark">
Insérez description...
</div>
</div>
</div>
</div>
<p class="footer bg-secondary text-center">
Site réalisé avec <a href="https://picturepan2.github.io/spectre/">Spectre CSS.</a>
Carte OpenStreetMap gérée avec Leaflet (<a href="https://nouvelle-techno.fr/actualites/2018/05/11/pas-a-pas-inserer-une-carte-openstreetmap-sur-votre-site">tuto</a>)
</p>
</body>
</html>