« Aide:GoogleMaps » : différence entre les versions

De Scoutopedia
(Recyclage de l'article pour le nouveau système de maps, généralités)
(→‎Créer une carte statique : Comment créer une carte statique)
Ligne 29 : Ligne 29 :
== Créer une carte statique ==
== Créer une carte statique ==


{{ébauche}}
 
=== Éditeur de carte ===
 
Pour les utilisateurs débutants, il existe un éditeur de carte [http://semantic-mediawiki.org/wiki/Special:MapEditor ici] {{en}}.
 
Pour fabriquer une nouvelle carte, élaborez votre carte à l'aide de l'éditeur puis cliquez sur "Export to wiki code".
 
Une popup s'ouvre avec le code wiki à copier / coller dans sur scoutopédia pour afficher la carte.
 
=== Syntaxe d'une carte statique ===
 
Les utilisateurs qui sont suffisamment à l'aise avec le système de cartographie peuvent écrire leur propre code directement :
 
<pre>{{#display_map:
coordonnées
|width = 400
|height = 300
|zoom = 18
|center = coordonnées
}}
</pre>
 
* width : largeur de la carte en pixels (par défaut : largeur de la page)
* height : hauteur de la carte en pixels (par défaut : 350 pixels)
* zoom : niveau de zoom de la carte au chargement (par défaut : plus proche permettant d'afficher tous les points)
* center : permet de centrer la carte sur un point précis (par défaut : centre des points affichés)
 
Les coordonnées sont les points à afficher sur la carte. Vous pouvez utiliser soit des coordonnées au format GPS indiqué plus haut, soit donner une adresse qu'un système de géolocalisation sera chargé de transformer en coordonnées GPS. Pour afficher plusieurs points, il suffit de séparer les coordonnées ou adresses par un point-virgule (un retour de ligne est facultatif mais permet d'améliorer la lisibilité du code). L'ensemble de ces points doivent être déclarés avant le moindre paramètre de carte. Il est aussi possible d'afficher une carte n'affichant aucun point de coordonnées.
 
Exemple:
<pre>{{#display_map:
22.46383,-62.578125;
31.23347,-52.812525;
Miami, Florida
}}</pre>
{{#display_map:
22.46383,-62.578125;
31.23347,-52.812525;
Miami, Florida
}}
 
=== Points interactifs ===
 
Par défaut les points sont manifestés par un marqueur standard et le visiteur ne pourra pas interagir avec eux. Il est cependant possible d'enrichir le comportement des points en ajoutant des paramètres supplémentaires pour en faire des points interactifs, de type bulle ou de type lien. Lorsqu'un utilisateur clique sur un point de type bulle, cela affiche une petite bulle avec une description que vous aurez précisée. Lorsqu'il clique sur un lien, il est directement redirigé vers une nouvelle page.
 
<pre>{{#display_map:
22.46383,-62.578125 ~ title ~ text ~ icon ~ group ~ label ~ visited;
31.23347,-52.812525 ~ link:address ~ icon ~ group ~ label ~ visited
}}</pre>
 
Il est possible d'omettre un paramètre en laissant son champ vide.
 
* title et text : titre et description du point affichés dans la bulle, séparés par une barre horizontale. La syntaxe wiki est active.
* address : URL absolue externe ou titre d'un article de scoutopédia vers lequel l'utilisateur sera redirigé en cliquant sur le marqueur.
* icon : nom de l'image à utiliser à la place du marqueur par défaut. URL ou <nowiki>Fichier:</nowiki>
* group : ''l'utilisation de ce paramètre n'est pas documenté pour l'instant ; le laisser vide''
* label : génère une marqueur de type textuel plutôt que d'utiliser une image.
* visited : nom de l'image à utiliser pour le marqueur après que l'utilisateur ait cliqué dessus.
 
=== Artéfacts ===
 
En plus d'ajouter des points, il est possible d'ajouter des artéfacts comme des lignes, des rectangles, des cercles et des polygones. Pour cela, il suffit d'ajouter les paramètres adéquats dans la balise de la carte. Comme pour les autres paramètres de carte ils doivent être déclarés après l'ensemble de la liste des points affichés. Il est possible de déclarer plusieurs artéfacts du même type les uns à la suite des autres.
 
'''Toutes les coordonnées utilisées par les artéfacts doivent forcément être des points GPS ; les adresses ne seront pas acceptées.''' Si vous voulez tester vos artéfacts sur l'éditeur de cartes, sachez aussi qu'il ne supporte pas très bien les espaces et les retours de ligne. Pensez donc à les supprimer avant de faire un "Import from Wiki code".
 
Tous les artéfacts peuvent être rendus interactifs ou non-interactifs de la même manière que les points, en utilisant les formats suivants :
* non interactif : <nowiki>|<attribut> = <coordonnées> ~ ~ ~ <autres options></nowiki>
* type bulle : <nowiki>|<attribut> = <coordonnées> ~ titre ~ texte ~ <autres options></nowiki>
* type lien : <nowiki>|<attribut> = <coordonnées> ~ link:address ~ <autres options></nowiki>
 
Les format des données sont toutes identiques :
* les couleurs sont [http://www.w3schools.com/cssref/css_colors.asp au format CSS HEX].
* les décimales sont séparées des unités par un point (les virgules ne fonctionneront pas)
 
Les options des artéfacts suivent toutes le même modèle :
* stroke color : la couleur du trait de contour (type couleur)
* fill color : la couleur du remplissage du rectangle (type couleur)
* stroke opacity : l'opacité du trait de contour (nombre décimal, 0 = transparent, 1 = opaque)
* fill opacity : l'opacité du remplissage du rectangle (nombre décimal, 0 = transparent, 1 = opaque)
* stroke weight : épaisseur du trait de contour (nombre entier)
 
==== Lignes ====
 
<pre>
|lines =
<point 1> :
<point 2> :
(...)
<point 3>
 
|lines =
<point 1> :
<point 2> :
(...)
<point 3>
~ title ~ text ~ stroke color ~ stroke opacity ~ stroke weight
</pre>
 
Pour insérer une ligne ou un polygone vide (un polygone vide est tout simplement une ligne dont le premier et le dernier point sont identiques) il suffit de lister les coordonnées GPS des points qu'ils devront relier en les séparant par deux points. Pour plus de lisibilité il est recommandé de revenir à la ligne entre chaque point.
 
==== Rectangles ====
<pre>
|rectangles = <point 1> : <point 2>
 
|rectangles = <point 1> : <point 2>
~ title ~ text ~ stroke color ~ stroke opacity ~ stroke weight ~ fill color ~ fill opacity
</pre>
 
Pour insérer une forme rectangulaire, il suffit de donner deux points GPS qui constitueront les deux angles opposés du rectangle. Les deux autres points sont automatiquement calculés à partir des premiers en combinant leur latitude et leur longitude.
 
==== Cercles ====
<pre>
|circles = <point> : <radius>
 
|circles = <point> : <radius>
~ title ~ text ~ stroke color ~ stroke opacity ~ stroke weight ~ fill color ~ fill opacity
</pre>
 
Pour insérer un cercle, il suffit de préciser les coordonnées du point central et la longueur du rayon. Ce dernier est fourni sous la forme d'un décimal et l'unité de base est le mettre. Un cercle de rayon 10km aura donc un radius de 10000.0
 
==== Polygones pleins ====
 
<pre>
|polygons =
<point 1> :
<point 2> :
(...)
<point 3>
 
|polygons =
<point 1> :
<point 2> :
(...)
<point 3>
~ title ~ text ~ stroke color ~ stroke opacity ~ stroke weight ~ fill color ~ fill opacity
</pre>
 
Pour insérer un polygone plein, il suffit de préciser la liste des coordonnées des différents points qui constituent le polygone de la même manière que pour la ligne ou le polygone vide. Contrairement à eux, il n'est pas nécessaire de répéter le premier point à la fin, puisque l'on sait que l'on va devoir de toutes façons refermer le polygone pour le remplir.
 
=== Références ===
[http://semantic-mediawiki.org/wiki/Maps Site officiel de l'extension maps] (utile pour les utilisateurs expert)


== Créer une carte dynamique ==
== Créer une carte dynamique ==

Version du 15 août 2013 à 17:51

Pour commencer
Manuel du parfait
petit Scoutopedien

Bac à sable

Aide technique
Règles générales
Règles techniques


L'extension Maps permet de visualiser de manière dynamique (avec zoom, déplacement, etc) un lieu, partout dans le monde.

Cet outil a été ajouté à Scoutopedia pour permettre de mieux rendre compte des différents lieux scouts, et sera donc par conséquent utilisé principalement sur le portail du scoutisme dans le monde. Néanmoins, utilisé sur cette page ou ailleurs, voici des informations pour ajouter des lieux à une carte, ou des nouvelles cartes, si vous le jugez nécessaire à tel ou tel endroit de Scoutopedia.

Cartes statiques ou dynamiques

Une carte statique est une carte pour laquelle les données à afficher sont insérées statiquement, c'est à dire directement dans l'article lui-même. Par exemple, si vous éditez la page d'un centre de formation et que vous voulez afficher une vue satellite locale avec les limite de la propriété et les quelques points remarquables, vous utiliserez certainement une carte statique. Si les données évoluent, un contributeur aura d'abord l'idée de modifier la page de l'article et les données qui y sont inscrites. Cala n'empêchera pas le visiteur de pouvoir se déplacer sur la carte, zoomer, changer le fond de carte, etc ...

Les cartes statiques s'opposent aux cartes dynamiques qui vont aller récupérer des informations dans d'autres articles pour se mettre à jour. Typiquement, ce type de carte est utilisé pour le référencement et le géopositionnement des groupes scouts d'un échelon. Lorsque vous affichez la carte dynamique des groupes de l'échelon X, vous récupérez la liste des points de tous les articles géopositionnés qui sont associés à cet échelon, en les filtrant éventuellement (pour n'afficher que les groupes ouverts par exemple) puis vous les affichez sous forme de carte.

Ainsi lorsqu'un contributeur modifie la page d'un groupe de cet échelon pour changer son géopositionnement, le point est dynamiquement modifié sur la carte de la structure. De la même manière, si un contributeur vient modifier la page d'un groupe pour indiquer qu'il est désormais fermé, si vous avez filtré la carte sur les groupes ouverts, alors le point associé au groupe disparaitra de la carte des groupes ouverts de la structure (et apparaitra dans la liste des groupes fermés, si vous en avez mis une, par exemple). Le tout sans avoir à modifier la page de l'échelon !

Bien évidemment les cartes dynamiques ont l'inconvénient de leur avantage. Si elles sont très puissantes et permettent de faire des choses très complexes et automatiques, elles nécessitent de comprendre des notions avancées et auront besoin de plus de travail pour les mettre en place et les maintenir.

Formatage des coordonnées géographiques

Bien que le système de cartographie supporte de nombreux formats, il vous est conseillé d'utiliser la convention en degrés décimaux non directionnels. Les coordonnées sont établies comme deux nombres décimaux variant entre -90 et +90 pour la latitude et entre -180 et +180 pour la longitude. Les décimales sont séparées des unités par un point. La latitude précède la longitude et elles sont séparées par une virgule et un espace. Les valeurs négatives correspondent au sud et à l'ouest et sont précédées d'un signe moins. Les valeurs positives correspondent au nord et à l'est mais ne sont pas précédées d'un signe.

Exemples :

  • 12.12345, -23.12345
  • -2.75264, 1.12398

5 chiffres après la virgule suffisent ; ils donnent une précision d'environ 1m.



Circle-icons-magnifyingglass.svg Voir l’article détaillé : wp-fr:Coordonnées_géographiques



Créer une carte statique

Éditeur de carte

Pour les utilisateurs débutants, il existe un éditeur de carte ici Flag of the United Kingdom.svg.

Pour fabriquer une nouvelle carte, élaborez votre carte à l'aide de l'éditeur puis cliquez sur "Export to wiki code".

Une popup s'ouvre avec le code wiki à copier / coller dans sur scoutopédia pour afficher la carte.

Syntaxe d'une carte statique

Les utilisateurs qui sont suffisamment à l'aise avec le système de cartographie peuvent écrire leur propre code directement :

{{#display_map:
coordonnées
|width = 400
|height = 300
|zoom = 18
|center = coordonnées
}}
  • width : largeur de la carte en pixels (par défaut : largeur de la page)
  • height : hauteur de la carte en pixels (par défaut : 350 pixels)
  • zoom : niveau de zoom de la carte au chargement (par défaut : plus proche permettant d'afficher tous les points)
  • center : permet de centrer la carte sur un point précis (par défaut : centre des points affichés)

Les coordonnées sont les points à afficher sur la carte. Vous pouvez utiliser soit des coordonnées au format GPS indiqué plus haut, soit donner une adresse qu'un système de géolocalisation sera chargé de transformer en coordonnées GPS. Pour afficher plusieurs points, il suffit de séparer les coordonnées ou adresses par un point-virgule (un retour de ligne est facultatif mais permet d'améliorer la lisibilité du code). L'ensemble de ces points doivent être déclarés avant le moindre paramètre de carte. Il est aussi possible d'afficher une carte n'affichant aucun point de coordonnées.

Exemple:

{{#display_map:
22.46383,-62.578125;
31.23347,-52.812525;
Miami, Florida
}}
Chargement de la carte...

Points interactifs

Par défaut les points sont manifestés par un marqueur standard et le visiteur ne pourra pas interagir avec eux. Il est cependant possible d'enrichir le comportement des points en ajoutant des paramètres supplémentaires pour en faire des points interactifs, de type bulle ou de type lien. Lorsqu'un utilisateur clique sur un point de type bulle, cela affiche une petite bulle avec une description que vous aurez précisée. Lorsqu'il clique sur un lien, il est directement redirigé vers une nouvelle page.

{{#display_map:
22.46383,-62.578125 ~ title ~ text ~ icon ~ group ~ label ~ visited;
31.23347,-52.812525 ~ link:address ~ icon ~ group ~ label ~ visited
}}

Il est possible d'omettre un paramètre en laissant son champ vide.

  • title et text : titre et description du point affichés dans la bulle, séparés par une barre horizontale. La syntaxe wiki est active.
  • address : URL absolue externe ou titre d'un article de scoutopédia vers lequel l'utilisateur sera redirigé en cliquant sur le marqueur.
  • icon : nom de l'image à utiliser à la place du marqueur par défaut. URL ou Fichier:
  • group : l'utilisation de ce paramètre n'est pas documenté pour l'instant ; le laisser vide
  • label : génère une marqueur de type textuel plutôt que d'utiliser une image.
  • visited : nom de l'image à utiliser pour le marqueur après que l'utilisateur ait cliqué dessus.

Artéfacts

En plus d'ajouter des points, il est possible d'ajouter des artéfacts comme des lignes, des rectangles, des cercles et des polygones. Pour cela, il suffit d'ajouter les paramètres adéquats dans la balise de la carte. Comme pour les autres paramètres de carte ils doivent être déclarés après l'ensemble de la liste des points affichés. Il est possible de déclarer plusieurs artéfacts du même type les uns à la suite des autres.

Toutes les coordonnées utilisées par les artéfacts doivent forcément être des points GPS ; les adresses ne seront pas acceptées. Si vous voulez tester vos artéfacts sur l'éditeur de cartes, sachez aussi qu'il ne supporte pas très bien les espaces et les retours de ligne. Pensez donc à les supprimer avant de faire un "Import from Wiki code".

Tous les artéfacts peuvent être rendus interactifs ou non-interactifs de la même manière que les points, en utilisant les formats suivants :

  • non interactif : |<attribut> = <coordonnées> ~ ~ ~ <autres options>
  • type bulle : |<attribut> = <coordonnées> ~ titre ~ texte ~ <autres options>
  • type lien : |<attribut> = <coordonnées> ~ link:address ~ <autres options>

Les format des données sont toutes identiques :

  • les couleurs sont au format CSS HEX.
  • les décimales sont séparées des unités par un point (les virgules ne fonctionneront pas)

Les options des artéfacts suivent toutes le même modèle :

  • stroke color : la couleur du trait de contour (type couleur)
  • fill color : la couleur du remplissage du rectangle (type couleur)
  • stroke opacity : l'opacité du trait de contour (nombre décimal, 0 = transparent, 1 = opaque)
  • fill opacity : l'opacité du remplissage du rectangle (nombre décimal, 0 = transparent, 1 = opaque)
  • stroke weight : épaisseur du trait de contour (nombre entier)

Lignes

|lines =
<point 1> :
<point 2> :
(...)
<point 3>

|lines =
<point 1> :
<point 2> :
(...)
<point 3>
~ title ~ text ~ stroke color ~ stroke opacity ~ stroke weight

Pour insérer une ligne ou un polygone vide (un polygone vide est tout simplement une ligne dont le premier et le dernier point sont identiques) il suffit de lister les coordonnées GPS des points qu'ils devront relier en les séparant par deux points. Pour plus de lisibilité il est recommandé de revenir à la ligne entre chaque point.

Rectangles

|rectangles = <point 1> : <point 2>

|rectangles = <point 1> : <point 2>
~ title ~ text ~ stroke color ~ stroke opacity ~ stroke weight ~ fill color ~ fill opacity

Pour insérer une forme rectangulaire, il suffit de donner deux points GPS qui constitueront les deux angles opposés du rectangle. Les deux autres points sont automatiquement calculés à partir des premiers en combinant leur latitude et leur longitude.

Cercles

|circles = <point> : <radius>

|circles = <point> : <radius>
~ title ~ text ~ stroke color ~ stroke opacity ~ stroke weight ~ fill color ~ fill opacity

Pour insérer un cercle, il suffit de préciser les coordonnées du point central et la longueur du rayon. Ce dernier est fourni sous la forme d'un décimal et l'unité de base est le mettre. Un cercle de rayon 10km aura donc un radius de 10000.0

Polygones pleins

|polygons =
<point 1> :
<point 2> :
(...)
<point 3>

|polygons = 
<point 1> :
<point 2> :
(...)
<point 3>
~ title ~ text ~ stroke color ~ stroke opacity ~ stroke weight ~ fill color ~ fill opacity

Pour insérer un polygone plein, il suffit de préciser la liste des coordonnées des différents points qui constituent le polygone de la même manière que pour la ligne ou le polygone vide. Contrairement à eux, il n'est pas nécessaire de répéter le premier point à la fin, puisque l'on sait que l'on va devoir de toutes façons refermer le polygone pour le remplir.

Références

Site officiel de l'extension maps (utile pour les utilisateurs expert)

Créer une carte dynamique

Avant de lancer dans l'aventure de l'élaboration d'une nouvelle carte dynamique, vous devez vous familiariser avec l'utilisation des données relationnelles sur Scoutopédia. On vous avait bien dit que ça représente plus de travail !



Circle-icons-magnifyingglass.svg Voir l’article détaillé : Aide:SemanticMediaWiki



Sommaire aide.svg Sommaire de l'aide – Toutes les pages d'aide de Scoutopedia.