Différences

Ci-dessous, les différences entre deux révisions de la page.

--- umap:8_-_le_cas_des_polygones [2017/02/12 13:14] – [Réaliser un menu cartographique] admin
+++ umap:8_-_le_cas_des_polygones [2022/03/30 10:13] (Version actuelle) – [3. Réaliser un menu cartographique] admin
@@ Ligne 8: / Ligne 8: @@
   * Styliser un polygone : remplissage et contour(s)
   * Associer une URL à un polygone
-  * Créer un //menu cartographique//
+  * Extraire des limites administratives d'OpenStreetMap
+  * Importer des données dans une carte
 ===== Procédons par étapes =====
@@ Ligne 42: / Ligne 44: @@
 {{ :umap:interaction-desactivee.png?nolink|}}
-Toute interaction peut être désactivée en choisissant **OFF** pour **Autoriser les interactions**. Aucune infobulle n'est alors affichée lors d'un clic sur le polygone. Cette option est intéressante pour donner de l'importance à une zone de la carte sans que l'utilisateur ne puisse interagir avec.
+Toute interaction peut être désactivée en sélectionnant **OFF** pour l'option **Autoriser les interactions**. Aucune infobulle n'est alors affichée lors d'un clic sur le polygone. Cette option est intéressante pour donner de l'importance à une zone de la carte sans que l'utilisateur ne puisse interagir avec.
 {{ :umap:ile-de-nantes.jpg?nolink&360|}}
-Voici un exemple montrant l'Ile de Nantes entourée d'un large trait rouge et sans remplissage.
+Voici un exemple montrant l'Ile de Nantes entourée d'un large trait rouge et sans remplissage. Il n'est possible de cliquer ni sur le contour ni à l'intérieur du polygone.
 <WRAP left important round 55%>
@@ Ligne 56: / Ligne 58: @@
   * **fenêtre parente** : la page s'ouvre dans le même onglet que celui de la carte
   * **iframe** : si la carte est intégrée dans une iframe, la page Web est alors ouverte à l'intérieur de l'iframe
+----
 ==== 3. Réaliser un menu cartographique ====
@@ Ligne 62: / Ligne 66: @@
 <html>
-<iframe width="500px" height="550px" frameBorder="0" src="http://umap.openstreetmap.fr/fr/map/quartiers-de-nantes_126581?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=false&allowEdit=false&moreControl=false&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=false&onLoadPanel=undefined&captionBar=false&fullscreenControl=false&datalayers=311326#12/47.24/-1.5"></iframe>
+<iframe width="500px" height="550px" frameBorder="0" src="https://umap.openstreetmap.fr/fr/map/quartiers-de-nantes_126581?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=false&allowEdit=false&moreControl=false&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=false&onLoadPanel=undefined&captionBar=false&fullscreenControl=false&datalayers=311326#12/47.24/-1.5"></iframe>
 </html>
 Voici les étapes pour réaliser cette carte.
-=== Importer le contour des quartiers ===
+=== a. Récupérer les contours des quartiers ===
-Le contour des quartiers de Nantes provient les limites administratives d'OpenStreetMap (pour en savoir plus, consultez cette [[http://wiki.openstreetmap.org/wiki/WikiProject_France/Liste_limites_administratives|page du Wiki]]). Le site [[https://osm.wno-edv-service.de/boundaries/|OSM Boundaries]] permet de sélectionner les limites administratives une à une, puis de les exporter dans différents formats.
+Le contour des quartiers de Nantes provient les limites administratives d'OpenStreetMap (pour en savoir plus, consultez cette [[http://wiki.openstreetmap.org/wiki/WikiProject_France/Liste_limites_administratives|page du Wiki]]). Le site [[https://osm-boundaries.com/|OSM Boundaries]] permet de sélectionner les limites administratives une à une, puis de les exporter dans différents formats.
 {{ :umap:osm-boundaries.png?nolink|}}
 Suivez ces étapes :
-  - connectez-vous à votre compte OpenStreetMap
+  - connectez-vous à votre compte OpenStreetMap (celui-ci est exigé pour pouvoir exporter les limites administratives)
   - sélectionnez les limites administratives une par une, en ouvrant successivement les différents niveaux : pays - région - département etc.
-  - sélectionez le format d'export JSON : le format GeoJson est alors utilisé
+  - sélectionez le format d'export JSON : le format [[https://fr.wikipedia.org/wiki/GeoJSON|GeoJSON]] est alors utilisé
   - cliquez sur Export
-Il suffit alors d'importer le fichier téléchargé dans une carte uMap, en utilisant un calque dédié.
+Vous récupérez dans le dossier des téléchargements un fichier dont l'extension est ''.geojson''.
+{{ :umap:import-contours.png?nolink&300|}}
-=== Configurer la carte uMap ===
+=== b. Importer les contours de quartier dans une carte ===
-{{ :umap:limites-geographiques.png?nolink&300|}}
+{{:umap:umap_edit_import.png?nolink |}} Dans une nouvelle carte, cliquez sur **Importer des données**. Dans le panneau qui appraît alors, sélectionnez le fichier produit à l'étape précédente.
-Configurez le calque des limites de quartier, afin d'afficher une étiquette - au survol ou pas selon votre choix. Ensuite éditez chaque polygone pour lui associer l'URL vers la page Web correspondante.
+Le sélecteur de format se positionne automatiquement sur **geojson**, sélectionnez-le si ce n'est pas le cas, par exemple parce que l'extension du fichier n'est pas ''.geojson''. Cliquez sur **Importer** : les contours apparaissent sur la carte.
+=== c. Configurer la carte uMap ===
+Configurez le calque afin d'afficher une étiquette - au survol ou pas selon votre choix. Ensuite éditez chaque polygone pour lui associer l'URL vers la page Web correspondante, comme nous l'avons vu plus haut.
 Enfin vous pouvez, dans les **Paramètres de la carte**, définir les **Limites géographiques** de la carte. Cela permet d'empêcher l'utilisateur de déplacer la carte au-delà de ces limites.
+{{ :umap:limites-geographiques.png?nolink&300|}}
-=== Intégrer la carte dans une iframe ===
+=== d. Intégrer la carte dans une iframe ===
-Récupérez le code de l'iframe, comme nous l'avons vu dans le [[umap:7_-_je_publie_ma_carte_et_en_controle_l_acces|tutoriel précédent]], en prenant soin de désactiver toutes les options d'interaction : boutons de zoom, zoom avec la molette, bouton « Plus » etc.
+Récupérez le code de l'iframe, comme nous l'avons vu dans le [[umap:7_-_je_publie_ma_carte_et_en_controle_l_acces#adapter_les_fonctionnalites_de_la_carte|tutoriel précédent]], en prenant soin de désactiver toutes les options d'interaction : boutons de zoom, zoom avec la molette, bouton « Plus » etc.
+Copiez ce **code iframe** dans votre page Web, et le tour est joué !
+<WRAP left round important 60%>
+Lorsque vous modifiez la carte, vous devez recharger entièrement la page contenant l'iframe pour vider le cache du navigateur, par exemple en utilisant **Ctrl+F5** sur Firefox.
+</WRAP>
-Copiez ce code dans votre page Web, et le tour est joué !
@@ Ligne 99: / Ligne 115: @@
 ===== Faisons le point =====
+Ce tutoriel marque la fin du niveau intermédiaire. Vous savez structurer le contenu d'une carte avec des calques et utiliser des styles par défaut. Vous savez formater les infobulles et y intégrer du multimédia. Vous savez intégrer votre carte dans une page Web et contrôler qui peut la voir et la modifier.
+Nous venons de voir comment importer des données dans une carte, le niveau avancé va nous permettre d'aller bien plus loin dans cette démarche.
+[[umap:tutoriel_umap#maitriser_umap_en_12_lecons|Retourner à la liste des tutoriels uMap]]