FR:Osmarender/Symbols
Osmarender utilise des symboles au format SVG pour dessiner les icônes représentant les bureaux de poste, les téléphones, les églises et bien d'autres éléments sur la carte. Lisez la description du fichier des règles pour apprendre à inclure des symboles dans votre carte. Lisez la page Osmarender/SVG pour plus d'information sur le format SVG et Osmarender.
Vous pouvez définir des symboles dans votre fichier des règles mais ils peuvent aussi se trouver dans un ou plusieurs fichiers séparés (et liés au fichier des règles à l'aide du xlink de SVG). Mais le moyen le plus simple pour les inclure est de les mettre dans le répertoire symbols. Ils seront alors inclus dans le fichier SVG de la carte lors de sa création.
Comment créer des symboles
Ces symboles sont créés à l'aide du logiciel Inkscape, puis convertis dans une syntaxe qu'Osmarender peut comprendre. Mais vous pouvez utiliser n'importe quel outil pour créer le SVG. Voici quelques trucs pour vous aider.
Dessinez les SVGs
- Ouvrez Inkscape, puis ajustez la taille de la page dans les propriétés du document à une valeur raisonnable, 30x30 ou 90x90 par exemple, tout dépend de la complexité du symbole souhaité.
- Utilisez les outils de dessin d'Inkscape pour créer le symbole, en essayant de réduire au maximum la complexité de celui-ci. Par exemple:
- utilisez si possible des lignes droites;
- réduisez le nombre de noeuds au strict minimum;
- utilisez la fonction "coller à la grille" pour les noeuds
- Editez manuellement les données XML (en utilisant la fenêtre de l'éditeur XML d'Inkscape) pour 'optimiser' le code. Par exemple:
- réduisez la précision décimales des données (par exemple M 20.34763 pourrait très bien être mis à M 20 sans que le résultat final n'en soit trop affecté)
- supprimez le code non indispensable (par exemple les instructions de remplissage (fill) là où dans les faits, il n'y a rien à remplir).
Convertissez les SVGs pour Osmarender
D'abord, ouvrez le SVG avec un éditeur de texte pour pouvoir examiner le code. Cherchez dans les définitions de chemin (path definition) une section qui doit ressembler à ceci:
<path style="stroke:#eeeeee; stroke-width:3; stroke-linecap:butt; stroke-linejoin:miter;
stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1"
d="M 19.4,4.6 C 19.4,31.5 19.4,31.5 19.4,31.5"
id="path11206" />
Il faut ensuite convertir cette partie dans un format compréhensible par Osmarender. Par exemple, ici, le symbole "pointless_node":
<svg:symbol id="pointless_node" viewBox="0 0 10 10"> <svg:path d="M 19.4,4.6 C 19.4,31.5 19.4,31.5 19.4,31.5" style="stroke:#eeeeee" /> </svg:symbol>
Pour finir, vous aurez besoin d'une règle pour le rendu des "pointless_node":
<rule e="node" k="amenity" v="pointless_node"> <symbol xlink:href="#pointless_node" width='2.5' height='2.5' transform='translate(-1.25,-1.25)' /> </rule>
Vous aurez toujours besoin d'entrer les deux définitions, celle de la règle et celle du symbole dans le fichier des règles pour pouvoir ensuite les utiliser.
Les règles se décrivent assez bien par elles-même, mais voici une explication plus détaillée en quelques mots. En prenant l'exemple ci-dessus, la première ligne détermine pour quelle caractéristique d'OSM le symbole sera utilisé (ici, n'importe quel noeud avec la paire clé/valeur amenity=pointless_node). La deuxième ligne spécifie la taille du symbole à afficher: ici, dans un carré de 2.5 pixels (pour des exemples pratiques de tailles relatives, examinez les symboles existants, et décidez si le symbole que vous voulez afficher doit être plus grand ou plus petit - dans le cas des hôpitaux ci-dessous, j'ai pensé (i) qu'ils étaient relativement importants et devaient être affichés dans les niveaux de zooms inférieurs; et (ii) qu'ils avaient tendance à occuper un large espace; donc qu'il leur fallait un symbole relativement large), puis vous centrez le symbole sur le noeud concerné en convertissant la position sur la moitié de sa largeur et la moitié de sa hauteur.
Format des symboles dans le répertoire des symboles
Tous les symboles doivent être au format SVG. Voici les détails:
- Un fichier contenant le symbole lui-même encadré par les tags <svg/> et <defs/>.
- Un ID unique dans l'attribut id de l'élément symbol qui doit commencer par symbol-.
- Un attribut viewBox qui fait que le symbole est centré correctement à la bonne taille. Tous les symboles devraient utiliser l'unité de taille 1x1 et le point (0,0) devrait être le centre de l'icône. De cette manière, tous les symboles sont de la même taille par défaut et sont correctement centrés sur un noeud. Les symboles peuvent être redimensionnés dans un usage ultérieur ou transformés si une taille différente est requise.
Voici un exemple:
<?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <defs> <symbol id="symbol-airport" viewBox="5 5 10 10" fill="black" fill-opacity="1" fill-rule="evenodd" stroke="none"> <path d="M 9.2,5 C 9.2,4.5 9.8,3.2 10,3 L 9,3 L 8,4 L 5.5,4 L 8,0 L 6,0 L 3,4 C 2,4 1,4.2 0.5,4.5 C 0,5 0,5 0.5,5.5 C 1,5.8 2,6 3,6 L 6,10 L 8,10 L 5.5,6 L 7.8,6 L 9,7 L 10,7 C 9.8,6.8 9.2,5.5 9.2,5 z " /> </symbol> </defs> </svg>
Catalogue de symboles
Un catalogue de tous les symboles est inclu dans la dépôt de subversion. On peut le régénérer avec l'ensemble des symboles disponible en utilisant Makefile. Ce catalogue contient les symboles eux-mêmes, un gabarit pour donner une meilleure idée de la taille et du positionnement des symboles et les ID de ces symboles. Ce catalogue n'est pas nécessaire pour faire un rendu de carte, c'est juste là pour vous aider à voir les symboles déjà existants.
Le catalogue est disponible en différents formats:
Comment ajouter un symbole
- Créez votre icône en tant que symbole SVG. Voyez ci-dessus pour le format.
- Ajoutez la définition du symbole aux autres symboles dans le sous-répertoire symbols. Les fichiers de ce répertoires doivent avoir le même nom que l'ID avec comme préfixe symbol-.
- Vous pouvez maintenant utiliser les symboles dans votre fichier de règles avec <symbol ref="symbol id"/> (n'employez pas le préfixe symbol- ici).
Les symboles sur les chemins
Vous pouvez placer des symboles sur des chemins en utilisant un marqueur SVG. On peut le placer sur le premier noeud (marker-start), sur le dernier noeud (marker-end) ou encore sur tous les noeuds se trouvant au milieu (marker-mid).
Le code suivant est utilisé pour l'image du télésiège qui suit une ligne:
| rules code |
<rule e="way" k="aerialway" v="chair_lift"> <line class='chairlift' /> </rule> |
| style code |
.chairlift {
stroke-width: 1;
stroke-linecap: butt;
stroke-linejoin: round;
stroke: #0000ff;
fill: none;
marker-mid:url(#chairlift);
}
|
| marker code |
<svg:marker id="chairlift" refX="4" refY="0" markerUnits="userSpaceOnUse" orient="auto">
<svg:path style="fill:none; stroke:#0000dc; stroke-width:1px; stroke-linecap:butt;
stroke-linejoin:miter; stroke-opacity:1"
d="M 2.5,5 L 2.5,8 L 6,8M 5,14 L 5,10 L 2,10 L 2,7 L 3,7
L 3,10M 3,0 C 3,1 3,1 3,1 L 0,4 L 0,12 L 0,12 L 3,13" />
<svg:path style="opacity:1; fill:#0000dc; fill-opacity:1; fill-rule:nonzero; stroke:none"
d="M 3.5 5 A 1 1 0 1 1 1.5,5 A 1 1 0 1 1 3.5 5 z" />
</svg:marker>
|
Symboles comme motifs dans une zone
ajouter exemple
Sources des symboles
Assurez vous que tous les symboles sur la carte sont du domaine public ou sont disponibles selon les termes de la license Creative Commons.
- Sodipodi map symbols. Ces symboles cartographiques semblent faire partie du domaine public.
- Librarie Open Clipart Library
- U.S. Park Service - Symboles cartographiques du domaine public