Inclure des images dans les modèles de rendu des cartes

Image-URL

Il existe différentes manières pour référencer les images dans les modèles :

Images intégrées

Vous pouvez référencer les images intégrées. Pour parcourir les icônes disponibles, décompressez le fichier josm-*.jar avec n'importe quel programme capable de gérer une archive zip. Les fichiers images sont situés dans le sous-dossier images. Omettez le premier dossier dans le chemin du fichier (pas images/presets/food/restaurant.svg, mais presets/food/restaurant.svg). Exemple :

node[amenity=restaurant] {
    icon-image: "presets/food/restaurant.svg";
}

Images locales

Fournir le chemin d'un fichier image sur le système de fichiers local, soit absolu ou relatif au fichier .mapcss courant. Exemple:

node[amenity=restaurant] {
    icon-image: "/home/username/osm/my-restaurant.png";
}

ou

node[amenity=restaurant] {
    icon-image: "my-restaurant.png";
}

URL d'une image sur un serveur distant

URL complète d'une image sur le web. Assurez-vous que les liens directs sont tolérés par le propriétaire du site Web. Les images sont chargées à la demande et mises en cache sur l'ordinateur du client (pendant une semaine, en général).

node {
    icon-image: "https://upload.wikimedia.org/wikipedia/en/9/9d/Commons-logo-31px.png";
}

Images dans une archive zip

Il est possible d'emballer votre modèle et toutes les ressources nécessaires dans une archive zip, afin de simplifier la distribution. Lorsque l'utilisateur charge le fichier zip comme modèle, JOSM détecte automatiquement le fichier .mapcss dans l'archive et trouve toutes les images.

node {
    icon-image: "image/file/within/archive.png";
}

Données de l'image incorporée

data:-URL selon ​RFC2397. Exemples:

node {
    icon-image: "data:image/png;base64,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";
}

ou

node {
    icon-image: "data:image/svg+xml,<svg><rect x='10' y='10' width='50' height='20' fill='white' stroke='blue' stroke-width='2px'/><line x1='18' y1='37' x2='50' y2='5' stroke='black' stroke-width='1.5px'/></svg>";
}

Images dans le wiki OSM

Les fichiers images du wiki OSM peuvent être liés de manière spéciale. Ceci est censé être compatible avec le l'attribut wiki:symbol, voir ​DE:Hiking. Exemple:

node {
    icon-image: "wiki://Symbol_Jakobsweg.png";
}

Les formats d'image

Les formats Raster

JOSM peut afficher les formats raster suivants : png, jpeg, gif et bmp.
(En gros, tous les formats qui sont pris en charge par Environnement d'exécution Java JRE)

Les formats vectoriels

Il existe également un support intégré pour les scalable vector graphics (svg). Les icônes svg sont préférées aux icônes au format raster en raison de leur mise à l'échelle sans perte sur les écrans hidpi. La plupart des images svg devraient être rendues correctement, mais dans certains cas le résultat peut être imparfait. Ceci est dû aux limitations de la ​bibliothèque svg utilisée.

Une chose dont vous pouvez être sûr, c'est que le rendu est le même sur tous les systèmes. Donc, soit le résultat est correct, soit il ne l'est pas.

Si ce n'est pas le cas, essayez de "simplifier" le svg de manière à ce qu'il puisse être traité par JOSM. Voir aussi les conseils relatifs aux svg dans la directive sur les nouvelles icônes.

Voir également

• La version originale de cette page en anglais

---

Retour aux Modèles de rendu de cartes JOSM