OpenStreetMap Fr
Personnaliser Potlatch 2
Pour utiliser Potlatch 2, tout ce dont vous avez besoin est un navigateur web compatible avec Flash, ainsi qu'une connexion à Internet. Pour personnaliser Potlatch 2, il vous faut un serveur web et les permissions pour y transférer des fichiers. Aucune connaissance de Flash ni d'ActionScript n'est nécessaire. Vous n'avez pas non plus à compiler Potlatch 2.
Potlatch 2 vous permet de personnaliser l'éditeur selon vos propres besoins. Vous pouvez prendre l'éditeur Potlatch 2 et l'intégrer à votre propre site web, ce qui facilitera l'ajout ou la modification de données OpenStreetMap correspondant aux centres d'intérêts de votre site web. Par exemple, le site web CycleStreets (http://www.cyclestreets.net/) propose le calcul d'itinéraires pour cyclistes en Grande-Betagne en utilisant les données OpenStreetMap. CycleStreets propose un éditeur en ligne modifié dans le but de faciliter l'ajout par les utilisateurs de données spécifiques aux cyclistes et faciliter l'amélioration du calculateur d'itinéraires. Un autre exemple est OpenEcoMaps (http://www.openecomaps.co.uk) réalisé par Tom Chance, qui, lui, se consacre aux infrastructures écologiques.
Vous pouvez modifier le style de la carte, ainsi que les contrôles sur la partie gauche de la carte, sans avoir à écrire de code Flash ou ActionScript ni devoir compiler Potlatch 2. Toutefois, des notions d'administration de serveurs web sont nécessaires, ainsi qu'une certaine connaissance des langages HTML et Javascript.
Intégrer Potlatch 2 sur votre propre site
Vous pouvez ajouter Potlatch 2 sur votre propre site sans y apporter aucune personnalisation. Cette approche est un bon début.
Récupérer les fichiers
Téléchargez tous les fichiers depuis http://random.dev.openstreetmap.org/potlatch2/, y compris le contenu des dossiers features/, icons/ et fills/. Ce sont les fichiers de ressources nécessaires à Potlatch 2.
L'application en tant que telle est le fichier potlatch2.swf. Le fichier potlatch2.html est un exemple de page web que vos visiteurs pourraient visiter pour profiter de vos ajouts et de votre personnalisation. Le fichier potlatch2.swf et les fichiers de ressources sont souvent mis à jour, donc téléchargez régulièrement ces fichiers pour vous assurer de profiter des dernières améliorations.
Téléchargez tous les fichiers du répertoire potlatch2 vers un répertoire de votre serveur web. Les fichiers potlatch2.swf et potlatch2.html doivent se trouver dans le répertoire potlatch2, mais vous devriez remplacer les fichiers d'exemples du répertoire potlatch2 en suivant l'exemple suivant.
Mettre en place Potlatch 2
Quelques ajustements sont nécessaires pour permettre à l'application de fonctionner sur votre site web.
Vous devez tout d'abord indiquer la position de départ ainsi que le niveau de zoom de la carte. Pour ce faire, il faut indiquer les paramètres de requête lat, lon et zoom à la fin de l'URL. Souvenez-vous que les niveaux de zoom vont de 1 à 18, avec le niveau 1 correspondant à une couverture mondiale et le niveau 18 correspondant à une vue très rapprochée. Par exemple, si votre URL est http://mycustompotlatch2.com/potlatch2.html vous pourrez y ajouter à la fin "?lat=53.293456&lon=-6.20537&zoom=17". Vous pouvez également préciser la position par défaut pour le cas où les paramètres de requête n'ont pas été spécifiés, en indiquant les lignes suivantes dans le fichier html :
lat=53.2934; lon=-6.2053; zoom=16;
Par défaut, le fichier de configuration potlatch2.html renvoie vers un serveur de développement du projet OpenStreetMap. Vous pouvez utiliser ce serveur sans conséquence fâcheuse en cas d'erreur de votre part. Une fois vos essais terminés et quand vous souhaitez utiliser le serveur principal du projet OpenStreetMap, remplacez "api06.dev" par "www".
args["api"] = "http://api06.dev.openstreetmap.org/api/0.6/"; args["policy"] = "http://api06.dev.openstreetmap.org/api/crossdomain.xml"; args["oauth_policy"] = "http://api06.dev.openstreetmap.org/oauth/crossdomain.xml"; args["oauth_request_url"] = "http://api06.dev.openstreetmap.org/oauth/request_token"; args["oauth_access_url"] = "http://api06.dev.openstreetmap.org/oauth/access_token"; args["oauth_auth_url"] = "http://api06.dev.openstreetmap.org/oauth/authorize"; args["serverName"] = "api06 Test On Dev";
Vous pouvez utiliser Potlatch 2 pour consulter les informations de la carte depuis votre propre site web. Cela fonctionne sur le serveur de développement et sur le serveur principal du projet OpenStreetMap. Cependant, pour pouvoir réellement modifier les données, il vous faut enregistrer votre version de Potlatch en tant que nouvelle application. Pour cela, il vous faut un compte OpenStreetMap et vous enregistrer avec sur le site principal d'OpenStreetMap.
Cliquez sur votre nom d'utilisateur dans le coin supérieur droit de la page pour accéder à la page de votre compte utilisateur OpenStreetMap. Cliquez ensuite sur paramètres OAuth, puis sur Enregistrez votre application tout en bas de la page. Notez que cet enregistrement sera nécessaire pour chacun des sites web sur lesquels vous intègrerez Potlatch 2. Afin de pouvoir faire des essais sur le serveur de test (api06.dev.openstreetmap.org), vous devrez également vous enregistrer sur ce serveur.
Note : vous ne pouvez pas ouvrir la page sur le système de fichiers local de votre ordinateur et communiquer avec le serveur OpenStreetMap, car cela n'est pas autorisé par les règles de sécurité de Flash.
Entrez ensuite un nom pour votre personnalisation (par ex. "Mon Potlatch 2 perso") et son URL (par ex. "http://monpotlatch2perso.com)
Sous l'en-tête "URL de rappel", vous pouvez indiquer une page intermédiaire qui permettra de rappeler à vos utilisateurs qu'ils sont enregistrés et qu'ils peuvent commencer l'édition sur votre site. Sous l'en-tête "URL de support", vous pouvez indiquer une URL d'aide dans le cas où vous proposez une documentation complémentaire pour cette personnalisation de Potlatch 2.
Pour que votre personnalisation de Potlatch 2 fonctionne, cochez la case modifier la carte puis cliquez sur Enregistrer. Une 'clef d'utilisateur' ainsi qu'une 'clef utilisateur secrète' OAuth vont seront attribuées. Copiez et collez les dans les lignes correspondantes de votre fichier html, comme montré dans l'exemple ci-dessous.
args["oauth_consumer_key"] = "fiM1IoqnKJk4JCfcl63DA"; args["oauth_consumer_secret"] = "7fYgJK9M4vB1CvBZ6jEsPGxYK9UD1hEnI6NqTxNGs";
Votre personnalisation de Potlatch 2 est désormais prête !
Pour plus d'informations sur la personnalisation de Potlatch 2, consultez : http://wiki.osm.org/wiki/Potlatch_2/Deploying_Potlatch_2
Ajuster les contrôles
Les icônes sur la partie gauche de l'éditeur Potlatch 2 sont définies par le fichier XML resources/map_features.xml. Ce fichier est communément appelé fichier de pré-réglages. Il s'agit pour ce fichier de liens vers d'autres fichiers afin de grouper certains contrôles plutôt que de devoir travailler sur un seul fichier très volumineux, ce qui n'est pas pratique. Pour ajouter un lien dans map_features.xml vers un nouveau fichier xml, utilisez le tag "include".
<include file="map_features/barriers.xml" />
Note : les fichiers recensés doivent être écrits en XML valide, ce qui signifie qu'ils doivent n'avoir qu'un seul élément racine, par convention <featureGroup/>.
Des conventions spécifiques existent pour les types de balises XML que vous ajoutez aux fichiers de pré-réglages.
feature correspond à un élément qui sera présenté à l'utilisateur comme un type d'objet. Par exemple : une bretelle d'autoroute, une école, un réservoir.
feature category permet de grouper des éléments ensemble. Par exemple : Routes, Chemins, Hébergements, Sports et Loisirs.
input correspond à un contrôle d'édition attribué à un élément unique. Par exemple, un menu déroulant proposant les choix oui/non, ou bien un champ de texte libre pour un nom.
input set permet de regrouper des contrôles d'édition. Il peut être utilisé partout dans le fichier, et inséré dans d'autres groupes de contrôle d'édition. Exemple : un menu déroulant 'type de pont' (clé 'bridge') associé à un menu glissant de choix de couche (clé 'layer') peuvent former un seul groupe de contrôle d'édition.
Pour utiliser ces balises dans le but de créer un simple éditeur d'attributs, vous devez commencer par créer l'élément qui vous intéresse, par exemple "École", puis définir la catégorie à laquelle cet élément appartient, dans notre cas "Éducation". Vous pourrez ensuite définir quel type d'objet géométrique peut définir cet élément. Dans notre exemple, une école peut être représentée par un point ou bien une surface. Ajoutez les clés qui définissent l'élément ainsi que le type de valeur qu'elles peuvent prendre. Une balise XML correspondant à la description d'une école est présentée ci-dessous.
<feature name="School">
<category>eduction</category>
<icon image="features/school.png">${name}</icon>
<help>http://wiki.openstreetmap.org/wiki/Tag:amenity%3Dschool</help>
<point/>
<area/>
<tag k="amenity" v="school"/>
<inputSet ref="buildingInfo"/>
</feature>
Pour cet exemple particulier, il y a quelques points notables. La présence des balises "<point/>" et "<area/>" indiquent que les écoles peuvent être représentées soit par un point soit par une surface. De plus la balise "${name}" correspond au nom de l'élément.
Les indications line, area, point et relation définissent sous quelle forme d'entité un élément peut être représenté. Par exemple, un tronçon routier peut être défini par une balise <line/> mais aussi par une balise <area/> (s'il s'agit d'un rond-point par exemple) ; un supermarché peut être défini par une balise <area/> ou <point/> ; Par contre, un terrain de football ne devrait être défini que sous la forme d'une surface, à l'aide de la balise <area/>.
La balise tag définit toutes les clefs qui permettent d'identifier cet élément.
La balise name détermine chacun des noms affichés dans les menus déroulants parmi lesquels l'utilisateur va pouvoir faire son choix.
La balise category détermine la catégorie d'élément (voir ci-dessous) dans laquelle cet élément doit être groupé.
La balise help détermine une URL d'aide apportant des informations complémentaires sur l'élément.
Les balises input déterminent les contrôles accessibles pour cet élément (voir ci-dessous).
Les balises inputSet référencent les groupes de contrôles d'édition accessibles pour cet élément. Leur balise de référence est relative à l'identification d'un groupe de contrôle d'édition défini à un autre endroit du fichier (voir ci-dessous)
La balise icon permet d'associer l'apparence graphique (icône) d'un élément décrit dans le panneau des attributs
Syntaxe des balises d'attributs
Les balises tag définissent tous les attributs qui identifient un élément. Ce sera souvent un unique attribut (par exemple, highway=trunk pour une voie rapide) mais il est possible de spécifier plusieurs balises pour un même élément (par exemple amenity=public_building ; building=yes pour décrire un édifice public).
Pour chacun des attributs, son k (comme key) détermine la clé devant correspondre, et son v (value) détermine la valeur devant correspondre. Ces attributs seront appliqués à l'objet lorsque l'utilisateur choisira l'élément dans le menu déroulant.
L'attribut optionnel vmatch vous permet de spécifier des valeurs qui correspondent sans toutefois s'appliquer. Ceci est pratique pour apporter une compatibilité avec des attributs parfois obsolètes ou bien minoritaires. L'attribut est alors parcouru comme une expression régulière (la valeur spéciale "*" signifie "toute valeur"). Par exemple :
<tag k="route" v="hiking" vmatch="hiking|foot"/>
Syntaxe des balises d'icônes
La balise icon détermine l'apparence graphique d'un élément dans le panneau des attributs. On la trouve normalement à l'intérieur de la description d'un élément <feature/>, mais la formulation s'applique également pour l'entrée de relations d'itinéraires (voir ci-dessous).
Sa balise image correspond à l'URL d'une image qui doit apparaître quand l'élément est sélectionné, et quand le menu déroulant est ouvert.
Sa balise dnd (drag-and-drop) est l'URL d'une image devant apparaître dans le panneau des icônes à glisser-déposer. Ppar défaut il s'agit du même icône que celui de la balise image.
Ses balises background et foreground sont les couleurs d'arrière-plan et d'avant-plan par lesquelles le fragment HTML sera affiché.
Son contenu est un fragment HTML affiché à côté de l'image quand l'élément sera sélectionné. Les attributs (tels que name et ref) peuvent y être intégrés en utilisant la syntaxe ${clef}.
Les catégories d'éléments
Les catégories d'éléments servent à grouper des éléments. Des catégories peuvent être constituées pour regrouper l'ensemble des types de routes, de chemins, d'hébergements, de sports et de loisirs. Les éléments spécifiques à une catégorie apparaissent ensuite dans le menu déroulant principal. Par exemple, pour la catégorie roads apparaîtront les différents types de routes, comme residential, primary, secondary, tertiary ...
Une catégorie se définit de la manière suivante :
<category name="Routes" id="roads"/>
Pour assigner un élément à cette catégorie, utilisez la balise <category> dans la description de l'élément en question. Par exemple :
<category>roads</category>
Entrées
Une entrée (input) est un contrôle d'édition unique assigné à un attribut. C'est en général une balise intégrée à un élément (<feature/>). Afin de permettre aux entrées d'être partagées entre divers éléments, elles peuvent être rassemblées au sein d'un groupe d'entrées (<inputSet/>), comme montré ci-dessous :
La forme la plus simple de l'entrée est le texte libre :
<input type="freetext" presence="always" category="Dénominations" name="Ref" key="ref" description="Numéro de référence de la route"/>
L'attribut key définit quelle clé OSM sera décrite (par exemple, "highway").
L'attribut name définit une étiquette affichée par le contrôle.
L'attribut layout détermine l'orientation du contrôle : 'horizontal' ou 'vertical' (par défaut).
L'attribut category dans la balise d'entrée détermine sous quel onglet l'entrée sera montrée. Cet attribut est sans lien avec les catégories d'éléments.
L'attribut subcategory (optionnel) définit un sous-ensemble sous l'onglet (utilisé pour les attributs les moins usuels).
L'attribut presence définit si l'entrée doit être représentée sous l'onglet 'basic' :
- always - toujours représenté
- onTagMatch - seulement si l'attribut est défini
- withCategory - ne pas représenter dans l'onglet 'basic'
L'attribut priority contrôle l'ordre dans l'onglet. Les valeurs possibles, sont classées de la priorité la plus haute à la priorité la plus basse, en utilisant les valeurs suivantes : highest, high, normal, low et lowest.
L'attribut type détermine de quel type de contrôle il s'agit. La suite de cette section définit ces contrôles et leurs attributs.
type="choice"
Un menu déroulant. Les balises <choice/> sont utilisées pour définir les options possibles (comme <option/> au sein d'une balise HTML </select>). Par exemple :
<input type="choice" presence="always" category="" name="Religion" key="religion" description="La religion pratiquée ici.">
<choice value="christian" text="Christianisme (église)"/>
<choice value="jewish" text="Judaïsme (synagogue)"/>
<choice value="muslim" text="Islam (mosquée)"/>
</input>
type="checkbox"
Une case à cocher utilisée pour attribuer la valeur d'un attribut à 'yes' ou 'no'. Des valeurs comme "1", "0", "true" et "false" sont reconnues mais ne sont pas attribuées ici.
type="freetext"
Un simple champ d'édition de texte. Vous pouvez utiliser l'attribut absenceText pour définir une valeur si le champ n'est pas renseigné.
type="number"
Un champ d'entrée de texte numérique, avec des boutons complémentaires "plus" et "moins" adjacents. Par exemple :
<input type="number" minimum="0" maximum="99999" stepSize="1"
presence="always" category="Parking" name="Capacité" key="capacity" description="Le nombre de voitures pouvant se garer sur ce parking"/>
Les attributs minimum et maximum déterminent la plage de valeurs admises par les boutons (par défaut 0, 100).
L'attribut stepSize détermine la valeur de l'incrément quand l'un des boutons plus/moins est pressé (par défaut 1).
L'attribut absenceText définit le texte à afficher lorsque une valeur n'est pas entrée.
L'attribut notValidText définit le texte à afficher lorsque la valeur n'est pas un nombre, ou si elle se situe hors des limites minimum et maximum.
type="slider"
Ce contrôle est un curseur permettant de choisir une valeur entre deux extrêmes. Par exemple :
<input type="slider" presence="onTagMatch"
name="Layer" category="Physical" description="Relative vertical positions (-5 lowest, +5 highest)"
key="layer" minimum="-5" maximum="5" default="0" snapInterval="1" labels="Lowest,Ground,Highest"
defaultName="Ground"/>
Les attributs minimum et maximum déterminent la plage de valeurs admises (par défaut 0, 100).
L'attribut snapInterval détermine l'incrément minimal entre deux valeurs (par défaut 1).
L'attribut default détermine la valeur numérique par défaut (défaut 0).
L'attribut labels est une liste de valeurs à afficher à intervalles réguliers entre les valeurs minimum et maximum. Les valeurs sont séparées par des virgules.
type="speed"
Un contrôle spécifique pour définir les limitations de vitesse.
type="route"
Un éditeur de relations d'itinéraires, affichant les relations de ce type auxquelles appartient ce membre, et permettant à l'utilisateur de l'ajouter à d'autres relations d'itinéraires. Par exemple :
<input type="route" name="Voie Cyclable Nationale" description="Un itinéraire balisé appartenant à un réseau national cyclable, ou sous plus proche équivalent." category="Cycle" priority="low">
<match k="type" v="route"/>
<match k="route" v="bicycle"/>
<match k="network" v="ncn"/>
<icon image="features/route__ncn.png" background="#ff6f7a" foreground="white">${ref} ${name}</icon>
</input>
Les éléments match déterminent les attributs requis pour pouvoir correspondre à une relation parente.
L'élément icon détermine l'apparence du contrôle pour une relation correspondante. Suivre la même syntaxe que pour un <icon/> au sein d'une balise <feature/>.
type="turn"
Un éditeur dédié à la saisie des interdictions de tourner, montrant les restrictions pour lesquelles cette entité est un membre, et permettre à l'utilisateur de l'ajouter à d'autres restrictions. Par exemple :
<input type="turn" name="Interdiction de tourner" description="Interdiction de tourner" category="Turn" priority="normal" presence="onTagMatch"> <match k="type" v="restriction"/> <role role="via"/> </input>
Les éléments match déterminent les attributs requis pour pouvoir correspondre à une relation parente.
L'élément role détermine le rôle requis à un membre pour pouvoir correspondre avec une relation parente.
Groupements de contrôles
inputSet correspond à un groupement de contrôles. Il peut être réutilisé pour n'importe quel type d'élément.
Il contient des balises <input/> comme celles montrées ci-dessus. Par exemple :
<inputSet id="roadRefs"> <input type="freetext" presence="always" name="Reference" category="Naming" priority="high" key="ref" /> <input type="freetext" presence="onTagMatch" name="International Reference" category="Naming" key="int_ref" /> <input type="freetext" presence="onTagMatch" name="Old Reference" category="Naming" priority="low" key="old_ref" /> </inputSet>
Un inputSet peut également inclure d'autres inputSet qui y seront imbriqués :
<inputSet id="common"> <inputSet ref="source"/> <inputSet ref="designation"/> </inputSet>
Pour obtenir les informations les plus à jour concernant l'ajustement des contrôles pour l'éditeur Potlatch 2, reportez-vous à la page suivante : http://wiki.osm.org/wiki/Potlatch_2/Developer_Documentation/Map_Features
Style de la carte
Vous pouvez également personnaliser le style de la carte affichée par Potlatch 2. Ceci se fait en utilisant le format MapCSS, similaire aux feuilles de style en cascade (CSS). Si l'élaboration de pages web vous est familière, cette section ne devrait pas vous poser de problème.
Pour plus d'informations sur les spécifications de MapCSS, jetez un œil sur la page suivante : http://wiki.openstreetmap.org/wiki/MapCSS/0.2