1
00:00:00,780 --> 00:00:04,163
‫- : Continuons maintenant à construire notre intégration de carte.

2
00:00:05,720 --> 00:00:08,637
‫Et donc passons maintenant à Mapbox.

3
00:00:11,036 --> 00:00:15,090
‫Et donc, j'utilise Mapbox au lieu de Google Maps maintenant et c'est

4
00:00:15,090 --> 00:00:16,710
‫parce qu'il y a

5
00:00:16,710 --> 00:00:19,260
‫quelque temps, Google Maps a commencé à exiger

6
00:00:19,260 --> 00:00:21,300
‫une carte de crédit de votre

7
00:00:21,300 --> 00:00:23,220
‫part pour pouvoir utiliser Google Maps.

8
00:00:23,220 --> 00:00:26,640
‫Et je ne pense pas que ce soit une bonne idée pour

9
00:00:26,640 --> 00:00:29,160
‫un cours comme celui-ci et, en fait, j'aime

10
00:00:29,160 --> 00:00:33,723
‫aussi beaucoup Mapbox, et donc, je pense que c'est parfait pour nous de l'utiliser dans ce cours.

11
00:00:35,500 --> 00:00:37,720
‫Ils ont également une excellente documentation

12
00:00:37,720 --> 00:00:40,130
‫que nous allons essayer dans une seconde ici.

13
00:00:40,130 --> 00:00:43,330
‫Mais pour l'instant, commençons et créons un nouveau compte.

14
00:00:43,330 --> 00:00:45,623
‫Alors appuyez simplement ici pour commencer à construire.

15
00:00:48,208 --> 00:00:51,960
‫Et puis, bien sûr, créez votre compte gratuit.

16
00:00:51,960 --> 00:00:54,370
‫J'en ai déjà un et donc, mettez

17
00:00:54,370 --> 00:00:58,200
‫simplement la vidéo en pause à ce stade afin de créer ce compte.

18
00:00:58,200 --> 00:01:00,210
‫Et après avoir créé votre compte,

19
00:01:00,210 --> 00:01:02,960
‫vous devriez atterrir sur une page qui ressemble à ceci.

20
00:01:02,960 --> 00:01:05,009
‫Au moment où vous regardez cette

21
00:01:05,009 --> 00:01:06,820
‫vidéo, cette page ici peut,

22
00:01:06,820 --> 00:01:09,430
‫bien sûr, avoir changé, et c'est probablement le

23
00:01:09,430 --> 00:01:11,020
‫cas, mais ce

24
00:01:11,020 --> 00:01:13,900
‫que nous devons faire maintenant, c'est trouver un lien

25
00:01:13,900 --> 00:01:17,281
‫qui dit quelque chose comme ça, alors installez le développement

26
00:01:17,281 --> 00:01:21,850
‫du logiciel de cartes kit, donc ceci ici, ou intégrer également Mapbox, qui

27
00:01:21,850 --> 00:01:24,455
‫devrait être à peu près le même.

28
00:01:24,455 --> 00:01:29,025
‫Je vais donc cliquer ici sur installer les cartes pour JavaScript.

29
00:01:29,025 --> 00:01:30,720
‫Et ce que nous allons

30
00:01:30,720 --> 00:01:33,100
‫faire ici, c'est utiliser le CDN Mapbox donc

31
00:01:33,100 --> 00:01:35,050
‫le réseau de diffusion de contenu

32
00:01:35,050 --> 00:01:36,500
‫et pour l'instant du

33
00:01:36,500 --> 00:01:38,503
‫moins pas le bundler de modules NPM.

34
00:01:40,230 --> 00:01:43,500
‫Donc, la première étape, comme il est dit

35
00:01:43,500 --> 00:01:47,941
‫ici, est d'inclure ces fichiers ici et dans le fichier HTML had.

36
00:01:47,941 --> 00:01:51,121
‫Et c'est là que nous avons maintenant besoin

37
00:01:51,121 --> 00:01:54,663
‫de cette technique de tête étendue que nous avions auparavant.

38
00:01:56,970 --> 00:01:58,860
‫Et c'est là que nous avons

39
00:01:58,860 --> 00:02:01,293
‫maintenant besoin de cette technique d'extension de la tête.

40
00:02:02,443 --> 00:02:04,060
‫Ici, dans la tournée,

41
00:02:04,060 --> 00:02:07,690
‫rappelez-vous comment nous avons fait sortir cela de la tête, en fait.

42
00:02:07,690 --> 00:02:10,550
‫Mais maintenant, nous avons encore besoin de choses que

43
00:02:10,550 --> 00:02:12,940
‫nous devons ajouter à la tête.

44
00:02:12,940 --> 00:02:16,533
‫Et c'est donc ce script, et cette feuille de style aussi.

45
00:02:17,570 --> 00:02:19,833
‫Traduisons rapidement ceci ici en carlin.

46
00:02:26,250 --> 00:02:28,533
‫Et le lien aussi,

47
00:02:31,470 --> 00:02:33,300
‫et c'est tout.

48
00:02:33,300 --> 00:02:34,663
‫Débarrassons-nous de

49
00:02:35,930 --> 00:02:39,370
‫cette partie et revenons à l'étape suivante ici.

50
00:02:39,370 --> 00:02:43,720
‫Ensuite, nous devons copier ce code JavaScript ici,

51
00:02:43,720 --> 00:02:45,885
‫dans notre fichier.

52
00:02:45,885 --> 00:02:48,050
‫Et à notre script, bien sûr.

53
00:02:48,050 --> 00:02:51,140
‫Donc ici dans mapbox. js.

54
00:02:51,140 --> 00:02:53,860
‫Maintenant, vous n'aurez probablement pas ce jeton d'accès à

55
00:02:53,860 --> 00:02:55,360
‫ce stade, et il

56
00:02:55,360 --> 00:02:58,180
‫vous a donc fallu soit le faire déjà, soit

57
00:02:58,180 --> 00:03:01,343
‫je vais vous montrer comment le faire dans une seconde.

58
00:03:02,586 --> 00:03:05,230
‫Indentons simplement cette partie ici.

59
00:03:05,230 --> 00:03:09,510
‫Avec cela, nous sommes en fait déjà prêts à partir.

60
00:03:09,510 --> 00:03:11,640
‫Cela devrait en fait déjà créer

61
00:03:11,640 --> 00:03:14,090
‫une carte et l'afficher sur notre page.

62
00:03:14,090 --> 00:03:17,760
‫C'est parce que le conteneur ici est défini sur map.

63
00:03:17,760 --> 00:03:20,260
‫Et ce que cela signifie, c'est qu'il mettra

64
00:03:20,260 --> 00:03:23,270
‫la carte sur un élément avec l'ID de la carte.

65
00:03:23,270 --> 00:03:26,410
‫C'est pourquoi ici, dans notre tournée, nous avons cet

66
00:03:27,280 --> 00:03:29,010
‫élément ici, oh, où

67
00:03:29,010 --> 00:03:30,003
‫est-ce ?

68
00:03:31,100 --> 00:03:34,760
‫Donc ici, nous avons un élément avec ID map.

69
00:03:34,760 --> 00:03:37,730
‫La raison en est qu'ici dans Mapbox, nous avons en

70
00:03:37,730 --> 00:03:39,390
‫fait besoin d'un élément avec

71
00:03:39,390 --> 00:03:41,940
‫un ID que nous pouvons ensuite spécifier ici.

72
00:03:41,940 --> 00:03:43,920
‫Et la valeur par défaut est

73
00:03:43,920 --> 00:03:46,750
‫map, et c'est ainsi que je l'ai appelé en html.

74
00:03:46,750 --> 00:03:48,900
‫Ensuite, nous avons également ce style par défaut ici,

75
00:03:48,900 --> 00:03:50,700
‫que nous allons changer dans une seconde.

76
00:03:52,070 --> 00:03:54,393
‫Pour l'instant, revenons à nos instructions ici,

77
00:03:56,530 --> 00:03:59,720
‫et il est donc dit que nous avons terminé ici.

78
00:03:59,720 --> 00:04:02,707
‫Mais maintenant, revenons à notre

79
00:04:02,707 --> 00:04:06,185
‫compte et créons le jeton dont nous

80
00:04:06,185 --> 00:04:09,650
‫avons besoin pour pouvoir accéder à Mapbox.

81
00:04:09,650 --> 00:04:11,460
‫S'il vous plaît, ne vous contentez pas

82
00:04:11,460 --> 00:04:13,990
‫de copier mon jeton, cela ne fonctionnera pas bien pour vous.

83
00:04:13,990 --> 00:04:16,270
‫Mais à la place, créez le vôtre.

84
00:04:16,270 --> 00:04:19,363
‫Vous pouvez simplement lui créer un nouveau nom.

85
00:04:21,760 --> 00:04:23,713
‫Appelons ça quelque chose comme ça.

86
00:04:26,010 --> 00:04:28,200
‫Et puis créez un jeton ici.

87
00:04:28,200 --> 00:04:29,550
‫Ensuite, vous mettez votre

88
00:04:32,040 --> 00:04:35,640
‫mot de passe, et ainsi, vous pouvez ensuite utiliser ce jeton.

89
00:04:35,640 --> 00:04:38,150
‫Donc, encore une fois, je ne sais pas s'il a

90
00:04:38,150 --> 00:04:40,860
‫déjà créé ce jeton pour vous, ou si vous aviez vraiment

91
00:04:40,860 --> 00:04:42,360
‫besoin d'en créer un nouveau.

92
00:04:42,360 --> 00:04:46,500
‫Quoi qu'il en soit, il est également agréable d'avoir un jeton pour chaque projet,

93
00:04:46,500 --> 00:04:47,820
‫de sorte que vous

94
00:04:47,820 --> 00:04:50,668
‫puissiez ensuite restreindre ce jeton à ce projet uniquement.

95
00:04:50,668 --> 00:04:54,160
‫J'ai créé mon compte ici il y a longtemps, et donc je ne

96
00:04:54,160 --> 00:04:57,530
‫suis pas vraiment sûr, encore une fois, comment cela a fonctionné,

97
00:04:57,530 --> 00:05:01,073
‫mais de toute façon, avoir ce jeton devrait maintenant être prêt à partir.

98
00:05:03,730 --> 00:05:07,883
‫En fait, cela devrait maintenant déjà afficher notre carte par défaut.

99
00:05:09,250 --> 00:05:13,990
‫Rechargeons donc, et en effet, c'est notre carte par défaut.

100
00:05:13,990 --> 00:05:15,960
‫Cela n'a pas l'air vraiment sympa,

101
00:05:15,960 --> 00:05:17,313
‫nous pouvons zoomer, mais vraiment,

102
00:05:19,390 --> 00:05:21,620
‫le style n'est pas si joli que

103
00:05:21,620 --> 00:05:24,110
‫ça, et ne correspond pas vraiment à notre site

104
00:05:24,110 --> 00:05:25,090
‫Web, et

105
00:05:25,090 --> 00:05:27,198
‫bien sûr, nous n'avons pas non plus

106
00:05:27,198 --> 00:05:29,627
‫nos emplacements tracés n'importe où sur le carte.

107
00:05:29,627 --> 00:05:33,700
‫Et maintenant, occupons-nous de tout cela.

108
00:05:33,700 --> 00:05:35,914
‫Revenons à Mapbox, et maintenant

109
00:05:35,914 --> 00:05:38,783
‫nous entrons dans notre studio de design.

110
00:05:40,280 --> 00:05:42,900
‫Cliquons simplement ici sur « commencer à concevoir une

111
00:05:42,900 --> 00:05:44,720
‫carte », ou encore, si votre

112
00:05:44,720 --> 00:05:46,200
‫site Web est un

113
00:05:46,200 --> 00:05:49,313
‫peu différent à ce stade, recherchez simplement le studio de conception.

114
00:05:50,680 --> 00:05:53,093
‫Peut-être qu'il apparaît quelque part ici.

115
00:05:56,220 --> 00:05:57,433
‫Alors essayons ça.

116
00:06:01,560 --> 00:06:04,330
‫Ici, nous pouvons vraiment faire toutes sortes de

117
00:06:04,330 --> 00:06:07,010
‫choses concernant la conception d'une carte.

118
00:06:07,010 --> 00:06:10,340
‫En fait, ce n'est pas vraiment ce à quoi

119
00:06:10,340 --> 00:06:13,670
‫je m'attendais, car c'est un peu trop complexe de

120
00:06:13,670 --> 00:06:15,090
‫changer tout ça

121
00:06:15,090 --> 00:06:18,670
‫ici, mais il y a des styles par défaut, ah

122
00:06:18,670 --> 00:06:20,670
‫ouais, c'est ce que je cherchais.

123
00:06:21,520 --> 00:06:23,640
‫Créons un nouveau style ici, puis

124
00:06:23,640 --> 00:06:27,790
‫à partir de là, nous pouvons en quelque sorte choisir un style par défaut.

125
00:06:27,790 --> 00:06:30,483
‫Et vraiment ce que je veux, c'est ce style léger.

126
00:06:31,400 --> 00:06:34,560
‫Alors créez, et en fait, je suis très satisfait de

127
00:06:34,560 --> 00:06:37,330
‫la façon dont il sort de la boîte.

128
00:06:37,330 --> 00:06:39,972
‫Maintenant, pour une raison quelconque, je ne

129
00:06:39,972 --> 00:06:43,937
‫vois rien ici, d'accord, c'est parce qu'il a été zoomé sur la mer.

130
00:06:43,937 --> 00:06:48,937
‫Mais de toute façon, zoomons maintenant quelque part ici, et je

131
00:06:50,570 --> 00:06:53,830
‫pense que ça a déjà l'air

132
00:06:53,830 --> 00:06:57,407
‫plutôt sympa, et donc ajoutons juste un nom

133
00:06:57,407 --> 00:06:58,550
‫ici, et

134
00:07:00,790 --> 00:07:04,968
‫donc je l'appelle l'enregistrement vidéo de Natour parce que j'ai

135
00:07:04,968 --> 00:07:08,430
‫déjà un style de Natour, mais vous bien

136
00:07:08,430 --> 00:07:11,724
‫sûr, vous pouvez l'appeler comme vous voulez.

137
00:07:11,724 --> 00:07:16,340
‫Confirmons le nom ici, revenons en arrière, puis

138
00:07:16,340 --> 00:07:19,230
‫nous partageons et utilisons ici.

139
00:07:19,230 --> 00:07:23,393
‫Et ce que nous voulons, ce n'est pas partager, mais plutôt utiliser.

140
00:07:23,393 --> 00:07:28,393
‫Quelque part ici, nous devrions voir notre URL de style, et

141
00:07:28,640 --> 00:07:30,960
‫donc, oui, c'est celle-là.

142
00:07:30,960 --> 00:07:34,877
‫Il doit donc s'agir d'une URL commençant essentiellement par Mapbox.

143
00:07:37,480 --> 00:07:40,630
‫Copiez-le, revenons en arrière, puis remplaçons le style que

144
00:07:40,630 --> 00:07:43,640
‫nous avons ici par défaut par celui que

145
00:07:43,640 --> 00:07:45,363
‫nous venons de créer.

146
00:07:47,699 --> 00:07:49,363
‫Faites une sauvegarde,

147
00:07:50,750 --> 00:07:51,630
‫et

148
00:07:54,060 --> 00:07:56,650
‫oui, ça a l'air beaucoup mieux.

149
00:07:56,650 --> 00:07:59,650
‫Et c'est exactement le style que nous venons de créer.

150
00:07:59,650 --> 00:08:02,473
‫Nous pouvons donc maintenant effectuer un zoom avant,

151
00:08:02,473 --> 00:08:04,830
‫un zoom arrière ou en fait

152
00:08:04,830 --> 00:08:07,433
‫l'inverse, nous pouvons déplacer la carte où

153
00:08:08,964 --> 00:08:13,136
‫nous voulons, et nous pouvons également définir une tonne de propriétés,

154
00:08:13,136 --> 00:08:15,123
‫d'options pour cette carte.

155
00:08:15,960 --> 00:08:17,810
‫À l'heure actuelle, chaque fois que nous

156
00:08:17,810 --> 00:08:19,230
‫chargeons la carte, elle a

157
00:08:19,230 --> 00:08:21,510
‫toujours la même apparence, toujours centrée ici à Boston.

158
00:08:21,510 --> 00:08:24,230
‫Mais nous pouvons changer cela en spécifiant le

159
00:08:25,720 --> 00:08:26,803
‫centre ici.

160
00:08:28,600 --> 00:08:31,580
‫Et donc nous devons passer un tableau de deux coordonnées.

161
00:08:31,580 --> 00:08:34,610
‫Prenons en fait celui de LA que

162
00:08:34,610 --> 00:08:37,473
‫nous avons utilisé auparavant dans Postman, donc

163
00:08:42,356 --> 00:08:43,189
‫exactement

164
00:08:48,210 --> 00:08:51,870
‫cela, mais, en fait, Mapbox est exactement comme MongoDB,

165
00:08:51,870 --> 00:08:55,200
‫en ce sens qu'il nécessite d'abord une longitude,

166
00:08:55,200 --> 00:08:56,603
‫puis la latitude.

167
00:08:58,270 --> 00:09:00,020
‫Nous devons les échanger ici.

168
00:09:02,925 --> 00:09:05,363
‫Et regardons ce que nous obtenons.

169
00:09:07,330 --> 00:09:10,083
‫Et bien, cela ne nous mène vraiment nulle part.

170
00:09:12,330 --> 00:09:15,953
‫Spécifions également un niveau de zoom ici.

171
00:09:17,310 --> 00:09:18,400
‫Disons quatre.

172
00:09:18,400 --> 00:09:19,843
‫Peut-être que cela le résout.

173
00:09:26,030 --> 00:09:29,153
‫Et en fait, c'était cette illusion.

174
00:09:30,221 --> 00:09:33,150
‫Il existe donc différents niveaux de zoom.

175
00:09:33,150 --> 00:09:35,820
‫Par exemple, nous pouvons également en essayer

176
00:09:35,820 --> 00:09:38,760
‫un ici, et cela devrait alors être beaucoup plus zoomé,

177
00:09:38,760 --> 00:09:41,460
‫ou peut-être dézoomé, je ne suis pas vraiment sûr.

178
00:09:41,460 --> 00:09:45,040
‫Ah, d'accord, donc ça fait vraiment un zoom arrière.

179
00:09:45,040 --> 00:09:46,943
‫Alors disons 10 ici par exemple,

180
00:09:49,180 --> 00:09:51,430
‫et comme vous le voyez, j'aime

181
00:09:51,430 --> 00:09:53,320
‫vraiment jouer avec ce

182
00:09:53,320 --> 00:09:57,360
‫genre de choses, et oui, à 10, c'est maintenant très rapproché.

183
00:09:57,360 --> 00:10:00,913
‫On peut aussi dire qu'on veut que ce ne soit pas

184
00:10:02,130 --> 00:10:04,400
‫interactif, et donc c'est très simple.

185
00:10:04,400 --> 00:10:07,683
‫Mettons interactive à faux.

186
00:10:08,610 --> 00:10:10,610
‫Et puis, fondamentalement, votre carte

187
00:10:10,610 --> 00:10:13,823
‫ressemblera à une simple image sur votre site Web.

188
00:10:15,960 --> 00:10:18,570
‫Donc, comme vous le voyez, je ne peux rien faire défiler ici, et

189
00:10:18,570 --> 00:10:20,650
‫je ne peux pas non plus le faire défiler.

190
00:10:20,650 --> 00:10:22,955
‫Donc je ne peux rien faire maintenant.

191
00:10:22,955 --> 00:10:25,940
‫Et ce ne sont en fait que quelques options que nous

192
00:10:25,940 --> 00:10:26,803
‫pouvons définir.

193
00:10:29,010 --> 00:10:32,090
‫Revenons en fait ici à

194
00:10:32,090 --> 00:10:36,093
‫Mapbox, et à la documentation et Mapbox JavaScript.

195
00:10:39,160 --> 00:10:42,020
‫Ici, vous obtenez toute la documentation pour vraiment

196
00:10:42,020 --> 00:10:46,300
‫tout ce que vous pouvez faire avec la version JavaScript de Mapbox.

197
00:10:46,300 --> 00:10:48,790
‫Ce que je voulais juste vous montrer, c'est que ce que

198
00:10:48,790 --> 00:10:51,240
‫je viens de vous montrer est en fait ici.

199
00:10:51,240 --> 00:10:53,550
‫Nous avons donc le conteneur que nous avons spécifié,

200
00:10:53,550 --> 00:10:55,023
‫nous avons le style et

201
00:10:55,990 --> 00:10:57,970
‫nous avons vraiment un tas de choses.

202
00:10:57,970 --> 00:10:59,720
‫Tellement interactif, et si vous

203
00:10:59,720 --> 00:11:02,750
‫le souhaitez, vous pouvez bien sûr jouer avec

204
00:11:02,750 --> 00:11:03,873
‫tout cela.

205
00:11:05,192 --> 00:11:08,120
‫Je voulais juste vous montrer que c'est

206
00:11:08,120 --> 00:11:11,400
‫ainsi que vous pouvez en apprendre davantage sur Mapbox.

207
00:11:11,400 --> 00:11:14,496
‫Maintenant, en fait, nous ne voulons rien de tout cela.

208
00:11:14,496 --> 00:11:17,800
‫Parce que nous ne voulons pas centrer la carte n'importe où, mais

209
00:11:17,800 --> 00:11:20,490
‫à la place, nous voulons qu'elle détermine automatiquement

210
00:11:20,490 --> 00:11:24,551
‫la position de la carte en fonction des points de localisation de notre visite.

211
00:11:24,551 --> 00:11:26,739
‫Ce que nous allons faire

212
00:11:26,739 --> 00:11:30,410
‫maintenant, c'est mettre tous les emplacements d'un certain tour sur la

213
00:11:30,410 --> 00:11:32,660
‫carte, puis permettre à la carte

214
00:11:32,660 --> 00:11:36,180
‫de déterminer automatiquement quelle partie de la carte elle doit

215
00:11:36,180 --> 00:11:39,280
‫afficher afin de s'adapter correctement à tous ces points.

216
00:11:39,280 --> 00:11:41,540
‫La première chose que nous devons faire

217
00:11:41,540 --> 00:11:43,713
‫est de créer une variable liée.

218
00:11:47,060 --> 00:11:52,060
‫Les limites correspondent à une nouvelle Mapbox GL. limites de latitude et de longitude.

219
00:12:00,360 --> 00:12:03,320
‫Et nous avons accès à cet objet Mapbox car

220
00:12:03,320 --> 00:12:05,520
‫nous avons inclus la bibliothèque Mapbox au

221
00:12:05,520 --> 00:12:06,983
‫début de notre page.

222
00:12:09,210 --> 00:12:10,113
‫Ici,

223
00:12:11,270 --> 00:12:12,883
‫y compris ce script

224
00:12:14,050 --> 00:12:15,760
‫ici, donc cette bibliothèque Mapbox,

225
00:12:15,760 --> 00:12:18,760
‫c'est ce qui expose l'objet Mapbox GL, que nous

226
00:12:18,760 --> 00:12:21,193
‫pouvons ensuite utiliser sur tout notre site.

227
00:12:24,180 --> 00:12:26,870
‫Cet objet de limites ici est essentiellement

228
00:12:26,870 --> 00:12:29,589
‫la zone qui sera affichée sur la carte.

229
00:12:29,589 --> 00:12:32,860
‫Nous allons maintenant étendre cela avec tous les emplacements qui

230
00:12:32,860 --> 00:12:35,043
‫se trouvent dans notre tableau d'emplacements.

231
00:12:35,043 --> 00:12:37,597
‫Et cela aura un peu plus de sens une

232
00:12:37,597 --> 00:12:39,333
‫fois que nous commencerons à l'utiliser.

233
00:12:41,490 --> 00:12:44,050
‫Parcourons maintenant tous nos emplacements et ajoutons

234
00:12:44,050 --> 00:12:46,203
‫un marqueur pour chacun d'eux.

235
00:12:48,150 --> 00:12:49,750
‫Pour chacun, et

236
00:12:49,750 --> 00:12:52,313
‫voyons verrouiller les emplacements, et

237
00:12:54,840 --> 00:12:58,150
‫donc ici, nous voulons ajouter un marqueur.

238
00:12:58,150 --> 00:13:00,160
‫Et pour cela, nous devons en

239
00:13:00,160 --> 00:13:02,053
‫fait créer un nouvel élément html,

240
00:13:04,228 --> 00:13:07,900
‫à cet égard, c'est vraiment un peu bas niveau, mais je trouve

241
00:13:07,900 --> 00:13:09,780
‫ça vraiment sympa, parce

242
00:13:09,780 --> 00:13:12,230
‫que, comme ça, nous avons beaucoup de contrôle

243
00:13:12,230 --> 00:13:15,110
‫sur ce qui se passe réellement dans notre carte.

244
00:13:15,110 --> 00:13:17,070
‫Et ce que je vous montre

245
00:13:17,070 --> 00:13:19,366
‫ici n'est en fait qu'une infime fraction de

246
00:13:19,366 --> 00:13:22,083
‫toutes les bonnes choses que vous pouvez faire avec Mapbox.

247
00:13:23,525 --> 00:13:26,593
‫Ceci est juste un JavaScript standard, et

248
00:13:26,593 --> 00:13:28,928
‫nous pouvons donc utiliser create

249
00:13:28,928 --> 00:13:31,490
‫element afin de créer des éléments.

250
00:13:31,490 --> 00:13:33,040
‫Comme son nom l'indique,

251
00:13:33,040 --> 00:13:35,490
‫et ici, nous voulons créer un nouveau diff.

252
00:13:35,490 --> 00:13:38,653
‫Et nous voulons également donner un nom de classe et

253
00:13:44,700 --> 00:13:46,193
‫le définir sur marker.

254
00:13:47,945 --> 00:13:50,170
‫Et voilà, c'est un point-virgule.

255
00:13:50,170 --> 00:13:52,500
‫Et donc dans le CSS, nous avons alors

256
00:13:52,500 --> 00:13:54,313
‫une classe pour ce marqueur.

257
00:13:57,140 --> 00:14:00,870
‫Marqueur, ici vous voyez l'image d'arrière-plan qui est spécifiée,

258
00:14:00,870 --> 00:14:03,459
‫qui est cette épingle verte ici.

259
00:14:03,459 --> 00:14:07,210
‫Cette épingle que vous allez voir dans une seconde sur la carte

260
00:14:07,210 --> 00:14:10,110
‫est en fait une image personnalisée que j'ai conçue.

261
00:14:10,110 --> 00:14:13,070
‫Cela ne vient pas directement de Mapbox.

262
00:14:13,070 --> 00:14:16,500
‫Comme ça, vous pouvez vraiment l'adapter à votre propre style et à votre

263
00:14:16,500 --> 00:14:17,333
‫propre marque.

264
00:14:17,333 --> 00:14:21,733
‫J'ai également défini la taille du marqueur ici, oui,

265
00:14:23,500 --> 00:14:25,363
‫c'est vraiment personnalisable.

266
00:14:27,362 --> 00:14:32,335
‫Maintenant, nous créons en fait un nouveau marqueur à l'intérieur de Mapbox

267
00:14:32,335 --> 00:14:37,257
‫en disant new Mapbox GL. marqueur.

268
00:14:40,230 --> 00:14:45,230
‫Et puis là-dedans, nous passons l'élément que nous venons de créer,

269
00:14:45,400 --> 00:14:49,503
‫donc L, puis nous spécifions également une propriété d'ancrage.

270
00:14:51,100 --> 00:14:52,090
‫Ce que

271
00:14:53,440 --> 00:14:54,910
‫j'ai mis au fond ici.

272
00:14:54,910 --> 00:14:58,610
‫Et ce que cela signifie, c'est que c'est le bas de l'élément,

273
00:14:58,610 --> 00:15:01,230
‫et donc dans ce cas le bas

274
00:15:01,230 --> 00:15:04,683
‫de cette broche, qui va être situé à l'emplacement GPS exact.

275
00:15:05,790 --> 00:15:07,710
‫Nous pourrions également le mettre

276
00:15:07,710 --> 00:15:10,113
‫au centre, mais je pense qu'il est

277
00:15:11,260 --> 00:15:13,690
‫plus logique d'ouvrir à nouveau cette image,

278
00:15:13,690 --> 00:15:16,520
‫je pense qu'il est plus logique que cette extrémité

279
00:15:16,520 --> 00:15:19,110
‫de l'image soit celle qui pointe vraiment vers

280
00:15:19,110 --> 00:15:20,663
‫l'emplacement GPS exact.

281
00:15:22,512 --> 00:15:26,040
‫C'est ce que nous faisons avec cette propriété d'ancrage.

282
00:15:26,040 --> 00:15:27,680
‫C'est donc le

283
00:15:27,680 --> 00:15:31,896
‫marqueur, et maintenant, là-dessus, nous pouvons appeler quelques méthodes.

284
00:15:31,896 --> 00:15:35,600
‫Pour le moment, Mapbox ne sait rien des coordonnées GPS de

285
00:15:35,600 --> 00:15:36,635
‫ce marqueur.

286
00:15:36,635 --> 00:15:39,250
‫Nous n'avons défini cela nulle part.

287
00:15:39,250 --> 00:15:40,580
‫Faisons-le maintenant, alors

288
00:15:40,580 --> 00:15:44,960
‫définissez la longitude, la latitude et l'égalité de

289
00:15:44,960 --> 00:15:47,423
‫l'emplacement. coordonnées.

290
00:15:49,364 --> 00:15:54,301
‫N'oubliez pas qu'il s'agit ici d'un tableau de longitude et

291
00:15:54,301 --> 00:15:55,990
‫de latitude forcé.

292
00:15:55,990 --> 00:15:59,471
‫C'est exactement ce que Mapbox attend.

293
00:15:59,471 --> 00:16:02,540
‫Juste pour être sûr de bien comprendre, jetons

294
00:16:02,540 --> 00:16:04,633
‫un coup d'œil aux visites.

295
00:16:05,719 --> 00:16:09,670
‫Encore une fois, chaque emplacement a cette propriété de coordonnées, et c'est

296
00:16:09,670 --> 00:16:12,693
‫donc de là que nous lisons maintenant les coordonnées.

297
00:16:13,915 --> 00:16:16,323
‫Emplacement. coordonnées.

298
00:16:18,040 --> 00:16:23,040
‫Et puis, enfin, ajoutez à et puis notre variable de carte.

299
00:16:25,070 --> 00:16:28,850
‫Donc cette carte ici est cette variable de carte où nous

300
00:16:28,850 --> 00:16:33,093
‫avons créé notre nouvelle Mapbox. carte dès le début.

301
00:16:34,507 --> 00:16:38,320
‫Et maintenant, tout ce que nous devons faire pour

302
00:16:38,320 --> 00:16:40,463
‫terminer, c'est d'étendre nos limites.

303
00:16:41,490 --> 00:16:46,490
‫Donc limites. extend et aussi avec des emplacements, ou en fait

304
00:16:48,540 --> 00:16:52,033
‫"loc", qui est l'emplacement actuel. coordonnées.

305
00:16:56,310 --> 00:16:59,720
‫Cette première partie ici ajoute en fait le

306
00:16:59,720 --> 00:17:00,950
‫marqueur, ou

307
00:17:00,950 --> 00:17:03,120
‫elle crée, rendons-la encore plus

308
00:17:03,120 --> 00:17:04,310
‫spécifique,

309
00:17:08,550 --> 00:17:09,910
‫créez un marqueur

310
00:17:11,500 --> 00:17:15,540
‫puis ajoutez le marqueur, puis ici, étendez les limites

311
00:17:18,600 --> 00:17:21,653
‫de la carte pour inclure l'emplacement actuel.

312
00:17:22,624 --> 00:17:25,410
‫Mais cela ne suffit toujours pas, car maintenant nous

313
00:17:25,410 --> 00:17:27,850
‫faisons également en sorte que la carte

314
00:17:27,850 --> 00:17:29,560
‫corresponde réellement aux limites.

315
00:17:29,560 --> 00:17:34,560
‫Donc carte. fit, pas de trouvaille, mais fit des limites,

316
00:17:39,310 --> 00:17:41,743
‫et puis bien sûr notre objet limites.

317
00:17:42,640 --> 00:17:43,473
‫Ouf.

318
00:17:43,473 --> 00:17:48,473
‫Donc, beaucoup de travail juste pour mettre des marqueurs sur la carte.

319
00:17:48,530 --> 00:17:50,829
‫Mais, encore une fois, je trouve vraiment agréable

320
00:17:50,829 --> 00:17:52,533
‫de travailler avec cette bibliothèque.

321
00:17:53,840 --> 00:17:55,800
‫Et jetons maintenant un coup d'œil et je

322
00:17:55,800 --> 00:17:58,450
‫ne suis pas vraiment sûr que tout s'est bien passé ici.

323
00:18:00,430 --> 00:18:02,300
‫Et en fait, ce n'est pas le

324
00:18:02,300 --> 00:18:05,264
‫cas, donc nos cartes ne se trouvent vraiment nulle part, faisons un

325
00:18:05,264 --> 00:18:07,630
‫zoom arrière un peu pour voir si elles sont

326
00:18:07,630 --> 00:18:09,083
‫réellement quelque part, et elles

327
00:18:10,049 --> 00:18:11,253
‫ne le sont pas.

328
00:18:13,070 --> 00:18:15,220
‫Jetons un coup d'œil à notre console,

329
00:18:15,220 --> 00:18:17,883
‫et en effet, il y a une sorte d'erreur.

330
00:18:18,910 --> 00:18:23,250
‫Donc lat, les limites de longitude ne sont pas un

331
00:18:23,250 --> 00:18:26,150
‫constructeur, et en fait c'est l'inverse.

332
00:18:26,150 --> 00:18:28,750
‫Encore une fois, Mapbox, tout comme MongoDB, s'attend

333
00:18:28,750 --> 00:18:31,350
‫à ce que les coordonnées soient d'abord la

334
00:18:31,350 --> 00:18:32,900
‫longitude, puis la latitude.

335
00:18:32,900 --> 00:18:34,314
‫C'est ce que nous

336
00:18:34,314 --> 00:18:36,420
‫avons ici dans ce nom, et donc

337
00:18:36,420 --> 00:18:38,350
‫ici, il devrait en être de même.

338
00:18:38,350 --> 00:18:42,813
‫Donc longitude, latitude.

339
00:18:44,616 --> 00:18:47,193
‫Essayons à nouveau ici.

340
00:18:48,990 --> 00:18:51,360
‫Ahh, maintenant ça marche.

341
00:18:51,360 --> 00:18:52,900
‫Très agréable.

342
00:18:52,900 --> 00:18:54,660
‫Vous avez vu ce joli zoom.

343
00:18:54,660 --> 00:18:57,290
‫C'est ce que fait la méthode des limites d'ajustement.

344
00:18:57,290 --> 00:19:00,370
‫Ainsi, il déplace et zoome la carte jusqu'aux limites

345
00:19:00,370 --> 00:19:03,000
‫pour s'adapter réellement à nos marqueurs.

346
00:19:03,000 --> 00:19:07,180
‫Maintenant, vous voyez que nous avons ce genre d'autres éléments ici

347
00:19:07,180 --> 00:19:08,943
‫qui chevauchent notre carte.

348
00:19:08,943 --> 00:19:11,740
‫Et c'est à cause de ce design que

349
00:19:11,740 --> 00:19:14,470
‫j'ai créé avec ces bords ici.

350
00:19:14,470 --> 00:19:16,490
‫Mais ce n'est pas un problème

351
00:19:16,490 --> 00:19:20,323
‫car nous pouvons en fait spécifier manuellement un certain remplissage à ces limites.

352
00:19:21,290 --> 00:19:23,860
‫Nous pouvons passer un objet ici,

353
00:19:23,860 --> 00:19:27,363
‫et donc disons 200 pixels en haut, 200 pixels

354
00:19:30,430 --> 00:19:32,830
‫en bas également, puis 100

355
00:19:32,830 --> 00:19:35,273
‫pixels à gauche et à droite.

356
00:19:42,561 --> 00:19:45,100
‫Et nous n'avons pas à spécifier les pixels ici,

357
00:19:45,100 --> 00:19:47,883
‫je suppose que c'est juste moi qui écris tellement de CSS.

358
00:19:50,780 --> 00:19:52,053
‫Essayons encore.

359
00:19:53,635 --> 00:19:55,440
‫Oh, belle animation de zoom,

360
00:19:55,440 --> 00:19:58,023
‫mais qui ne respectait pas vraiment nos paramètres.

361
00:19:59,110 --> 00:20:02,850
‫Et en fait, c'est parce que ce n'est pas correct.

362
00:20:02,850 --> 00:20:05,180
‫Donc, nous devrions plutôt créer un objet,

363
00:20:05,180 --> 00:20:08,150
‫puis là-dedans, nous devons spécifier la propriété padding, qui

364
00:20:08,150 --> 00:20:09,673
‫contient alors tout cela.

365
00:20:10,920 --> 00:20:11,770
‫Alors faisons-le.

366
00:20:14,130 --> 00:20:14,963
‫Rembourrage.

367
00:20:17,180 --> 00:20:18,013
‫Et maintenant,

368
00:20:19,020 --> 00:20:20,913
‫coupez ceci et mettez-le là.

369
00:20:23,970 --> 00:20:25,113
‫Faites une sauvegarde ici.

370
00:20:27,790 --> 00:20:28,883
‫Une fois de plus.

371
00:20:31,750 --> 00:20:34,310
‫Mec, quelque chose ne va toujours pas ici.

372
00:20:34,310 --> 00:20:35,840
‫Qu'est-ce que c'est?

373
00:20:35,840 --> 00:20:39,560
‫Ahh, et bien sûr ce code ne devrait pas être ici.

374
00:20:39,560 --> 00:20:43,913
‫Ce n'est pas dans l'étendue, c'est bien ici dans des limites convenables.

375
00:20:45,060 --> 00:20:47,633
‫C'est donc en fait là qu'il est logique d'être.

376
00:20:52,620 --> 00:20:57,333
‫Corrigons ce code ici, et maintenant cela a du sens.

377
00:20:59,144 --> 00:21:00,890
‫Bien sûr, il doit être dans

378
00:21:00,890 --> 00:21:03,460
‫les limites d'ajustement, ce qui est en fin de compte

379
00:21:03,460 --> 00:21:05,750
‫la fonction qui exécute le déplacement et le zoom.

380
00:21:05,750 --> 00:21:07,430
‫C'est là que le rembourrage

381
00:21:07,430 --> 00:21:10,400
‫devrait être, et nous pourrions spécifier un tas d'autres options.

382
00:21:10,400 --> 00:21:12,320
‫Et encore une fois, si

383
00:21:12,320 --> 00:21:14,713
‫cela vous intéresse, allez simplement consulter la documentation.

384
00:21:15,810 --> 00:21:17,680
‫Alors un troisième essai

385
00:21:17,680 --> 00:21:19,730
‫ici, espérons que cette fois j'ai

386
00:21:19,730 --> 00:21:23,520
‫bien compris, ahh, et oui, ça a l'air beaucoup mieux.

387
00:21:23,520 --> 00:21:26,980
‫Mais, il y a encore des choses que nous pouvons améliorer ici,

388
00:21:26,980 --> 00:21:29,680
‫car pour le moment nous ne pouvons même pas savoir

389
00:21:29,680 --> 00:21:31,670
‫ce qu'est chacun de ces emplacements.

390
00:21:31,670 --> 00:21:35,290
‫Et donc nous voulons en fait une sorte de fenêtre contextuelle

391
00:21:35,290 --> 00:21:38,373
‫ici, qui affiche ensuite des informations sur l'emplacement.

392
00:21:41,110 --> 00:21:45,043
‫Non seulement le marqueur, mais nous souhaitons également ajouter une fenêtre contextuelle.

393
00:21:49,270 --> 00:21:52,630
‫Et donc c'est un peu similaire à l'ajout du marqueur,

394
00:21:52,630 --> 00:21:57,133
‫donc nous disons nouveau Mapbox GL. apparaitre.

395
00:21:59,800 --> 00:22:02,300
‫Ensuite, comme avant, nous spécifions les coordonnées de

396
00:22:02,300 --> 00:22:03,623
‫cette fenêtre contextuelle.

397
00:22:05,940 --> 00:22:07,523
‫Alors celui-là ici.

398
00:22:08,610 --> 00:22:11,900
‫Ensuite, nous devons également définir le html pour cette

399
00:22:11,900 --> 00:22:14,990
‫fenêtre contextuelle, et je vais le faire maintenant en

400
00:22:14,990 --> 00:22:17,730
‫utilisant la méthode set html, car cela me

401
00:22:17,730 --> 00:22:19,950
‫permettra ensuite d'ajouter du contenu

402
00:22:19,950 --> 00:22:24,353
‫directement dans ce html, donc définissez html, puis un chaîne de modèle ici.

403
00:22:26,040 --> 00:22:28,030
‫Je veux que ce soit

404
00:22:28,030 --> 00:22:30,760
‫un paragraphe, et les informations que je veux

405
00:22:30,760 --> 00:22:33,630
‫afficher ici sont le jour où nous allons être

406
00:22:33,630 --> 00:22:36,250
‫à cet endroit, puis le nom de l'endroit.

407
00:22:36,250 --> 00:22:39,730
‫Donc, en gros, je veux afficher le jour, c'est

408
00:22:39,730 --> 00:22:43,300
‫pourquoi nous avons créé ces propriétés de jour ici,

409
00:22:43,300 --> 00:22:44,753
‫puis la description.

410
00:22:50,170 --> 00:22:54,520
‫Jour, puis emplacement, rappelez-vous quel est l'emplacement

411
00:22:54,520 --> 00:22:56,623
‫actuel pour

412
00:22:57,860 --> 00:23:03,543
‫chaque boucle, puis jour, emplacement.

413
00:23:03,543 --> 00:23:03,543
‫la description.

414
00:23:06,870 --> 00:23:07,980
‫Faites une sauvegarde

415
00:23:07,980 --> 00:23:10,210
‫ici, cela a l'air beaucoup plus joli maintenant.

416
00:23:10,210 --> 00:23:14,010
‫Et puis, tout comme avec l'autre,

417
00:23:14,010 --> 00:23:19,010
‫nous devons également faire add to, puis notre variable map.

418
00:23:22,130 --> 00:23:24,380
‫Et cela n'aura pas l'air parfait, car

419
00:23:24,380 --> 00:23:26,730
‫nous devons spécifier certaines options, mais je voulais

420
00:23:26,730 --> 00:23:29,083
‫quand même vous montrer le résultat à ce stade.

421
00:23:32,070 --> 00:23:35,100
‫Et donc, vous voyez qu'ils chevauchent réellement

422
00:23:35,100 --> 00:23:36,453
‫les marqueurs maintenant.

423
00:23:37,920 --> 00:23:41,083
‫Nous pouvons en fait résoudre ce problème en utilisant une propriété offset.

424
00:23:43,560 --> 00:23:46,883
‫Nous passons ces options ici dans la nouvelle fenêtre contextuelle.

425
00:23:48,396 --> 00:23:49,770
‫On

426
00:23:51,390 --> 00:23:54,940
‫dit décalage de 30 pixels.

427
00:23:54,940 --> 00:23:57,081
‫Et j'ai aussi remarqué

428
00:23:57,081 --> 00:23:59,840
‫que nous avons un peu trop

429
00:23:59,840 --> 00:24:04,840
‫de rembourrage en bas, alors réduisons cela à 150 et répétons l'opération.

430
00:24:09,610 --> 00:24:13,190
‫Et donc, ça a l'air plutôt sympa je trouve.

431
00:24:13,190 --> 00:24:15,750
‫Ainsi, quiconque jette maintenant un

432
00:24:15,750 --> 00:24:18,609
‫œil à notre page peut très rapidement

433
00:24:18,609 --> 00:24:21,533
‫voir quel type d'itinéraire sera sur cette tournée.

434
00:24:21,533 --> 00:24:23,740
‫Et s'il y a trop

435
00:24:23,740 --> 00:24:26,423
‫d'informations, nous pouvons également fermer ces pop-ups.

436
00:24:27,680 --> 00:24:30,700
‫Et nous pourrions vraiment ajouter toutes sortes de choses à cette carte.

437
00:24:30,700 --> 00:24:33,440
‫Par exemple, nous pourrions créer ces lignes ici entre

438
00:24:33,440 --> 00:24:35,250
‫ces points et les joindre

439
00:24:35,250 --> 00:24:38,570
‫ensemble, comme une ligne verte ici ou quelque chose du genre.

440
00:24:38,570 --> 00:24:41,096
‫Ou nous pourrions également afficher l'itinéraire

441
00:24:41,096 --> 00:24:42,820
‫réel d'un point

442
00:24:42,820 --> 00:24:45,350
‫à l'autre en utilisant essentiellement des

443
00:24:45,350 --> 00:24:47,610
‫directions, mais restons simples ici.

444
00:24:47,610 --> 00:24:49,990
‫La seule chose qui me reste

445
00:24:49,990 --> 00:24:53,430
‫à faire ici est de désactiver la fonctionnalité de zoom.

446
00:24:53,430 --> 00:24:55,320
‫Parce que maintenant, disons

447
00:24:55,320 --> 00:24:57,230
‫que nous zoomons sur cette page,

448
00:24:57,230 --> 00:24:59,400
‫ou en fait si nous faisons défiler

449
00:24:59,400 --> 00:25:01,450
‫sur cette page, et donc une

450
00:25:01,450 --> 00:25:03,740
‫fois que nous atteignons ceci ici, puis

451
00:25:03,740 --> 00:25:08,740
‫continuons à faire défiler ici, alors nous faisons défiler la carte au lieu de la page.

452
00:25:09,034 --> 00:25:12,060
‫Ce n'est pas une bonne expérience utilisateur, et tout

453
00:25:12,060 --> 00:25:13,673
‫ce que nous devons

454
00:25:13,673 --> 00:25:17,110
‫faire maintenant est de désactiver essentiellement la fonctionnalité de défilement

455
00:25:17,110 --> 00:25:18,410
‫sur cette carte.

456
00:25:18,410 --> 00:25:22,880
‫Nous allons toujours permettre aux gens de se déplacer comme ça, mais

457
00:25:22,880 --> 00:25:24,883
‫le zoom va être désactivé.

458
00:25:26,200 --> 00:25:29,463
‫Allons ici à notre carte et ajoutons cela.

459
00:25:30,743 --> 00:25:33,760
‫Et nous n'utilisons pas les valeurs par défaut interactives, car nous ne pourrions

460
00:25:33,760 --> 00:25:35,970
‫même pas faire un panoramique de la carte.

461
00:25:35,970 --> 00:25:39,317
‫Mais encore une fois, cela devrait au moins être autorisé.

462
00:25:39,317 --> 00:25:43,680
‫L'option que je définis ici est scroll zoom false.

463
00:25:46,580 --> 00:25:49,202
‫Et encore une fois, pour toutes les options

464
00:25:49,202 --> 00:25:50,888
‫possibles que vous pourriez définir

465
00:25:50,888 --> 00:25:55,190
‫ici, veuillez simplement aller de l'avant et jeter un œil à la référence.

466
00:25:55,190 --> 00:25:58,730
‫Et maintenant, lorsque nous mettons notre souris ici et faisons défiler,

467
00:25:58,730 --> 00:26:01,463
‫cela ne change pas le niveau de zoom.

468
00:26:03,040 --> 00:26:04,530
‫Parfait.

469
00:26:04,530 --> 00:26:09,060
‫Nous pouvons toujours faire un panoramique, et donc je pense que ça a l'air vraiment sympa maintenant.

470
00:26:09,060 --> 00:26:12,083
‫Testons cela dans un autre.

471
00:26:12,920 --> 00:26:14,653
‫Disons ici le randonneur forestier.

472
00:26:17,290 --> 00:26:19,450
‫Et donc, ça marche toujours.

473
00:26:19,450 --> 00:26:22,130
‫Et ceux-ci ici se chevauchent en quelque sorte, mais

474
00:26:22,130 --> 00:26:25,553
‫pas de problème, nous pouvons toujours les fermer si nous le voulons.

475
00:26:28,120 --> 00:26:30,713
‫Jetons un coup d'œil ici par exemple, explorateur de la mer.

476
00:26:32,420 --> 00:26:33,440
‫Et si nous

477
00:26:33,440 --> 00:26:35,231
‫sommes assez rapides, nous pouvons même

478
00:26:35,231 --> 00:26:38,100
‫voir l'animation de zoom déplacer la carte à cet endroit.

479
00:26:38,100 --> 00:26:39,890
‫D'accord, parfait.

480
00:26:39,890 --> 00:26:42,680
‫J'espère donc que vous avez pu vraiment

481
00:26:42,680 --> 00:26:46,670
‫suivre cet exemple avec tout ce que nous avons fait dans Mapbox.

482
00:26:46,670 --> 00:26:49,060
‫Maintenant, au cas où quelque chose ne fonctionnerait pas,

483
00:26:49,060 --> 00:26:50,330
‫assurez-vous que vous utilisez

484
00:26:50,330 --> 00:26:51,863
‫une version similaire à la mienne,

485
00:26:52,870 --> 00:26:56,500
‫donc ce que je veux dire est une version similaire de la bibliothèque Mapbox.

486
00:26:56,500 --> 00:26:59,403
‫Ce qui dans mon cas est la version 0. 54.

487
00:27:00,870 --> 00:27:04,363
‫Le vôtre ne devrait probablement pas être 1. quelque chose.

488
00:27:05,250 --> 00:27:06,600
‫Donc, si vous

489
00:27:06,600 --> 00:27:10,430
‫regardez cette vidéo longtemps après cet enregistrement et que vous avez un

490
00:27:10,430 --> 00:27:14,891
‫V1, alors allez-y et changez-le en 0. quelque chose, de sorte qu'il

491
00:27:14,891 --> 00:27:18,213
‫n'y a fondamentalement aucun changement de rupture là-bas.

492
00:27:19,242 --> 00:27:24,242
‫Quoi qu'il en soit, avec cela, nous terminons en fait notre page de

493
00:27:24,560 --> 00:27:27,140
‫visite, et nous n'avons donc plus

494
00:27:27,140 --> 00:27:30,140
‫besoin de tout cela, la carte est également

495
00:27:30,140 --> 00:27:34,740
‫là, et donc, cette partie du site Web est en fait terminée.

496
00:27:34,740 --> 00:27:35,573
‫Impressionnant.

497
00:27:35,573 --> 00:27:38,660
‫Félicitations pour en avoir fait une réalité, pour avoir

498
00:27:38,660 --> 00:27:42,200
‫vraiment commencé à créer ce magnifique site Web en utilisant toutes

499
00:27:42,200 --> 00:27:44,200
‫ces technologies étonnantes que vous avez

500
00:27:44,200 --> 00:27:45,663
‫apprises jusqu'à présent.