Outils pour utilisateurs

Outils du site


umap:8_-_le_cas_des_polygones

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
umap:8_-_le_cas_des_polygones [2017/02/12 14:31] – [3. Réaliser un menu cartographique] adminumap: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)   * Styliser un polygone : remplissage et contour(s)
   * Associer une URL à un polygone   * 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 ===== ===== Procédons par étapes =====
Ligne 42: Ligne 44:
 {{ :umap:interaction-desactivee.png?nolink|}} {{ :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|}} {{ :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%> <WRAP left important round 55%>
Ligne 64: Ligne 66:
  
 <html> <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> </html>
  
Ligne 71: Ligne 73:
 === a. Récupérer les contours 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|}} {{ :umap:osm-boundaries.png?nolink|}}
  
 Suivez ces étapes : 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é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   - 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|}}
  
 === b. Importer les contours de quartier dans une carte === === b. Importer les contours de quartier dans une carte ===
  
-{{ :umap:import-contours.png?nolink&350|}} +{{: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.
-{{:umap:umap_import.png?nolink |}} Dans une nouvelle carte, lciquez sur **Importer des données**. Dans le panneau qui appraît alors, sélectionnez le fichier précédemment obtenu+
  
 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. 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 === === c. Configurer la carte uMap ===
  
-{{ :umap:limites-geographiques.png?nolink&300|}} +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.
-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. +
  
 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. 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|}}
  
 === d. 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 dans votre page Web, et le tour est joué !+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. 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>
 +
  
  
Ligne 111: Ligne 115:
 ===== Faisons le point ===== ===== Faisons le point =====
  
-Ce tutoriel marque la fin du niveau intermédiaire. Vous savez créer une carte structurée en calques avec du contenu multimédia. Vous savez intégrer votre carte dans une page Web et contrôler qui peut la voir et la modifier. +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. 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]]
  
umap/8_-_le_cas_des_polygones.1486906293.txt.gz · Dernière modification : 2021/01/25 17:13 (modification externe)