Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
umap:8_-_le_cas_des_polygones [2017/02/12 14:13] – [3. Réaliser un menu cartographique] admin | umap:8_-_le_cas_des_polygones [2022/03/30 08:13] (Version actuelle) – [3. Réaliser un menu cartographique] admin |
---|
* 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 ===== |
{{ :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|}} |
| |
<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> |
| |
=== 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 |
| |
=== b. Importer les contours de quartier dans une carte === | === b. Importer les contours de quartier dans une carte === |
| |
{{: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 précédemment obtenu. | {{: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. |
| |
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 === |
| |
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, comme nous l'avons vu plus haut. | 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. | 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. |
| |
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]] |
| |