# Localiser les nouveaux restaurants à Montréal

Le site web [RestoMontreal](https://www.restomontreal.ca/) permet de chercher parmi les nouveaux restaurants qui sont ouverts dans cette ville. Les données apparaissent sur la forme d'une liste ainsi que d'une carte. Cependant, la carte n'est pas exploitable, car elle est incluse dans la page. Afin d'utiliser ces données pour créer notre propre carte, nous allons extraire l'information de celle-ci qui est dissimulée dans le code JavaScript de la page.

![Carte de RestoMontreal](Images/carte_restomontreal.png)

Pour ce faire, nous téléchargeons le code de la page web contenant la carte sur notre ordinateur depuis les outils de développement de notre navigateur (touche F12).

![Sélectionner le code JavaScript depuis les outils de développement](Images/firefox_developper_copier_interieur_html.png)

Nous sauvegardons le contenu dans un fichier à l'aide d'un éditeur de texte (Bloc-notes). Puis, à l'aide de l'éditeur [sed](https://www.gnu.org/software/sed/manual/sed.html), nous ajoutons des sauts dans le code afin de faciliter l'extraction des variables d'intérêt. Sinon, tout le code apparaît sur une seule ligne.

La variable *contentString* contient les informations sur le restaurant et la variable *popupOptions* contient les coordonnées géographiques du restaurant.

```{.bash linenos="true" breaklines="true" tabsize="2" fontsize="\small" bgcolor="turquoisefonce!10!white"}
sed 's/var/\n&/g' javascript-nouveaux-restos-montreal.js | \
grep "contentString=" > \ 
javascript-nouveaux-restos-montreal-contentstring.js

sed 's/var/\n&/g' javascript-nouveaux-restos-montreal.js | \
grep "popupOptions=" > \
javascript-nouveaux-restos-montreal-popupoptions.js
```

Astuce : Il n'est pas toujours évident d'extraire les coordonnées géographiques d'une page qui contient une carte, mais ces données sont d'une très grande utilité, alors ça vaut souvent la peine de s'y attarder. Les coordonnées prennent généralement la forme d'une paire latitude-longitude.

Ici, dans le contenu de la variable *popupOptions*, nous pouvons observer ceci :

```{.js linenos="true" breaklines="true" tabsize="2" fontsize="\small" bgcolor="turquoisefonce!10!white"}
L.marker([45.541091,-73.638153],{icon:restoIcon,alt:'La Quinta',bouncingExclusif:true})
```

Ce sont les informations que nous recherchons : le nom du restaurant et sa localisation. À l'aide des librairies *stringr* et *sf*, il est maintenant possible d'extraire celles-ci dans une table au format géospatial. Nous affichons ici les 5 premières lignes.

```{.r linenos="true" breaklines="true" tabsize="2" fontsize="\small" bgcolor="turquoisefonce!10!white"}
Simple feature collection with 5 features and 1 field
Attribute-geometry relationship: 1 constant, 0 aggregate, 0 identity
Geometry type: POINT
Dimension: XY
Bounding box: xmin: -74.0026 ymin: 45.40418 xmax: -73.54002 ymax: 45.77691
Geodetic CRS: WGS 84
 nom_restaurant geometry
1 La Quinta POINT (-73.63815 45.54109)
2 SHAKER Cuisine & Mixologie POINT (-74.0026 45.77691)
3 Canard Café POINT (-73.54002 45.55249)
4 Chiki Churros POINT (-73.62334 45.46642)
5 Casamigos POINT (-73.95365 45.40418)
```