# OpenStreetMap FAN #10 Vendredi 29 janvier 2021 Florian Coucou https://www.openstreetmap.org/search?whereami=1&query=47.49979%2C0.58168#map=19/47.49979/0.58168 ![](https://i.imgur.com/JFex2ZP.png) Soit il faut taper l'adresse ou le nom de l'endroit recherché dans la barre de recherche en haut a gauche, soit on peut zoomer avec la molette puis clic droit sur la carte à l'endroit voulu, puis Afficher l'adresse. Puis copier/coller l'URL de la page (elle contient les coordonnées GPS à sa fin) Cédric Coucou c'est nous!!! Paul B - Coucou I_ Openstreeetmap ![](https://i.imgur.com/E1Xk8x2.png) 1_ Aller sur https://www.openstreetmap.org/ 2_ Dans la fenêtre de recherche en haut à gauche, écrire "AFPP Touraine" 3_ Cliquer à gauche sur l'adresse proposée pour faire apparaître un marqueur 4_ Effectuer une capture d'écran et la copier 5- Aller sur le pad, passer en mode "Edit" (Crayon) et coller Hopitâl Clocheville de Tours : https://www.openstreetmap.org/search?whereami=1&query=47.38982%2C0.68057#map=19/47.38982/0.68057 Ctrl+c/v lien dans la barre de recherche II_ Artefact Group 3 Valentin https://www.openstreetmap.org/search?query=7%2C%20bis%20rue%20Nationale%20Monnaie%2037380#map=19/46.58810/1.35613 Sophian https://www.openstreetmap.org/search?query=hospital%20mulhouse#map=19/47.78167/7.34744 1 - Ouverture Openstreet map 2 - Recherche ecrite (ma ville de naissance) 3 - Recherche manuel du lieu souhaité 4 - Zoom maximum via la molette ou le boutton "+" Afpp : ![](https://i.imgur.com/olfASyU.png) Marie-Agnès https://www.openstreetmap.org/#map=19/47.41266/0.68799 1-Ouvrir OpenStreetMap, 2-Cliquer sur "Ouvrir la carte" ( en vert), 3-Sur cette page, utiliser la molette de votre souris pour zoomer sur un lieu, dans l'exemple école st exupéry, 4-Copier dans la barre url le lien, il change en fonction du lieu choisi Siegfried ![](https://i.imgur.com/nCXBDXN.png) Coucou https://www.openstreetmap.org/search?whereami=1&query=48.88467%2C2.32698#map=19/48.88467/2.32698 Afpp : https://www.openstreetmap.org/#map=19/47.39377/0.67312 J'ouvre open street map puis je clique sur "ouvrir la carte " puis je zoom sur l'emplacement desiré. Je copie l'url . Julie coucou https://www.openstreetmap.org/search?query=romorantin%20lyc%C3%A9e#map=18/47.36818/1.74093 J'ai entré l'adresse du bâtiment et j'ai copié le lien dans la barre d'adresse ![](https://i.imgur.com/NKxylVj.png) - Ecrire "AFPP Tours" dans le moteur de recherche du site - Faire une capture d'écran et la coller sur le pad avec ctrl +V Louis https://www.openstreetmap.org/way/191209012#map=19/46.05847/3.97501 https://www.openstreetmap.org/search?query=tours#map=19/47.39345/0.67299 : afpp J'ai ecrit l'adresse dans google street et j'ai copié le lien Sur le site afp![Uploading file..._qensws4ep]() ![Uploading file..._qensws4ep]() ![Uploading file..._qensws4ep]() ![Uploading file..._qensws4ep]() p c'est google map qui a été utilisé compiler avec html/css Paul R. https://www.openstreetmap.org/#map=19/47.41237/0.64990 AFPP : https://www.openstreetmap.org/#map=19/47.39377/0.67312 ![](https://i.imgur.com/vPN0ayA.png) aller sur OpenStreetMap, cliquez sur "voir la carte", zoomer sur le lieu souhaité, et compier l'url pour le coller sur le PAD. Yamina J'ai entré l'adresse du chu de naissance https://www.openstreetmap.org/way/261699698 AFPP ![](https://i.imgur.com/fFmejxI.png) Aller sur OpenStreetMap dans la barre en haut à gauche taper l'AFPP et cliquer sur aller Clément coucou <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <--! a finir plus tard --></--!> </body> </html> ![](https://i.imgur.com/Es4XS94.png) https://www.openstreetmap.org/node/4226488991 ******** ## Groupe 1 (flo, sieg, louis, val, marie) Sur le site de l'AFPP c'est Google Maps qui a été utilisé. La page contient du html, du css et du javascript. Le service de map offert par google l'est par le biais d'API. https://osons.cc/a/DMN10/?LesOrganismes1 ## Groupe 2 Yamina, Cédric et Clément https://www.cefim.eu/lecole/informations-pratiques/ ## Groupe 3 (Yamina, Julie, Paul) ![](https://i.imgur.com/4MqlbKG.png) Les images disponibles sur le site internet de Artefacts servent à référencer les adresses des différents sites membres de la coop. Les images proviennent de sources différentes : image 1 (MapQuest), image 2 (OSM ?), iamge 3 (Google Maps), image 4 (Google Maps) Le site contient du HTML, CSS et du javascript ![](https://i.imgur.com/NxQnymc.png) https://osons.cc/a/DMN10/?LesOrganismes3 ## I – Utiliser la carte et les services d’OpenStreetMap https://www.openstreetmap.org (20 min) Travail individuel - zoomez sur votre ville de naissance, choisissez un point précis dans cette ville et zoomez dessus au maximum (hôpital où vous êtes né, bâtiment où vous avez habité, école dans laquelle vous avez été…). - récupérez le lien de l’emplacement (plusieurs possibilités, notez la méthode que vous avez utilisée) et collez-le dans le pad Si vous avez terminé avant les autres, pour aller plus loin : * Récupérez une image de la localisation de l' AFPP et collez-là dans le PAD au niveau de votre prénom. * Notez votre procédure façon tuto (comme si vous vouliez expliquer la méthode à une personne qui n’a jamais fait cette manipulation). ## II – Intégration iframe d’une carte dans un site web (20 min) Travail en groupe (3 groupes) Étudiez la façon dont les sites de vos organismes de formation ont utilisé les cartes sur leur site, décrivez la méthode et indiquez la carte utilisée (google, osm, autre…). Renseignez le pad avec ces informations. - Groupe 1 : AFPP http://www.afpptours.com - Groupe 2 : CEFIM https://www.cefim.eu - Groupe 3 : Artefacts https://artefacts.coop Pour ceux qui ont déjà utilisé le HTML, étudiez le code source et expliquez aux autres ce que vous en comprenez. Notez les informations dans le PAD. ## III - Intégration iframe d’une carte OSM dans YesWiki (20 min) Travail en groupe (3 groupes) Allez sur le wiki de la formation, https://osons.cc/a/DMN10 Dans le menu Tests, rentrez sur la page correspondant à votre groupe, créez la page. Sur cette page spécifique à votre groupe, faites des tests pour réussir à intégrer l’iframe d’une carte OSM correspondant à chaque organisme de formation. Quand vous avez réussi, postez le lien de votre page sur le PAD.