Skip to content

FR—Adapter le style pour le VTT ou la rando

Antonin Del Fabbro edited this page Feb 4, 2024 · 1 revision

Difficulté

les symboles visuels par dessus les sentiers / chemins pour signifier leur difficulté sont regroupés dans le fichier à partir de la ligne 3864 (dans le bloc "line")

mtb_scale

le premier bloc concerne l'état des chemins

			<apply difficulte="false" >				
				<apply_if additional="surface=mud" color_3="#ff9933"/>
				<apply_if additional="smoothness=very_horrible" color_3="#ff0000"/>
				<apply_if additional="smoothness=impassable" color_3="#000000" >	
					<case nightMode="true" color_3="#cccccc"/>
				</apply_if>

le second bloc concerne le VTT

				<case additional="mtb:scale=0" color_2="#00ff00" />
				<case additional="mtb:scale:imba=0" color_2="#00ff00" />
				<case additional="mtb:scale=1" color_2="#ff9933" />
				<case additional="mtb:scale:imba=1" color_2="#ff9933" />
				<case additional="mtb:scale=2" color_2="#ff0000" />
				<case additional="mtb:scale:imba=2" color_2="#ff0000" />
				<case additional="mtb:scale=3" color_2="#ff0000" />
				<case additional="mtb:scale:imba=3" color_2="#ff0000" />
				<case additional="mtb:scale=4" color_2="#000000" />
				<case additional="mtb:scale:imba=4" color_2="#000000" />
				<case additional="mtb:scale=5" color_2="#000000" />
				<case additional="mtb:scale=6" color_2="#000000" />

le chemin étant défini en amont, ici il s'agit juste de rajouter les points de couleur selon les critères "mtb:scale" grâce à la couleur "color_2" qui vient s'ajouter au sentier.
pour mon usage je n'ai mis que 4 couleurs, libre à vous de segmenter différemment.

le principe est exactement le même pour les "sac_scale" dans le bloc suivant

				<case additional="sac_scale=hiking" color_2="#ff9933" />
				<case additional="sac_scale=mountain_hiking" color_2="#ff0000" />
				<case additional="sac_scale=demanding_mountain_hiking" color_2="#000000" />
				<case additional="sac_scale=alpine_hiking" color_2="#000000" />
				<case additional="sac_scale=demanding_alpine_hiking" color_2="#000000" />
				<case additional="sac_scale=difficult_alpine_hiking" color_2="#000000" />

vous pouvez donc si le rendu vous plait, l'adapter facilement pour voir tous les niveaux de difficulté (ici pour les "sac_scale" je n'en ai mis que 3)

la fin du bloc (ligne 3927) gère la taille des points (strokeWidth_2) et leur espacement (pathEffect_2)

				<apply cap_2="ROUND">
					<case maxzoom="15" strokeWidth_2="8" pathEffect_2="1_50" />
					<case maxzoom="16" strokeWidth_2="9" pathEffect_2="1_55" />
					<case maxzoom="17" strokeWidth_2="10" pathEffect_2="1_60" />
					<case maxzoom="18" strokeWidth_2="11" pathEffect_2="1_60" />
					<case minzoom="19" strokeWidth_2="12" pathEffect_2="1_65" />
				</apply>

Chemins

la "qualité" des chemins est défini à partir de la ligne 3500 du bloc "line" du fichier
j'ai retenu 5 niveaux de "qualité" (carrossabilité pour un usage moto / 4x4) et le sixième est les chemins (track) sans précisions dans OpenStreetMap

chaque niveau regroupe les tags osm que j'ai jugés opportuns pour définir une couleur et une épaisseur aux chemins

				<!-- facile -->
				<switch>
					<case additional="surface=gravel" />
					<case additional="surface=paved" />
					<case additional="surface=asphalt" />
					<case additional="surface=concrete" />
					<case additional="surface=concrete:lanes" />
					<case additional="surface=concrete:plates" />
					<case additional="surface=paving_stones" />
					<case additional="surface=sett" />
					<case additional="surface=cobblestone" />
					<case additional="surface=compacted" />
					<case additional="surface=fine_gravel" />
					<case additional="smoothness=bad" />
					<case additional="smoothness=intermediate" />
					<case additional="smoothness=good" />
					<case additional="smoothness=excellent" />
					<case additional="tracktype=grade2" />
					<case additional="tracktype=grade1" />
					<apply minzoom="12" color_5="$trackColor">
						<case maxzoom="11" strokeWidth_5="0" /> 
						<case maxzoom="12" strokeWidth_5="1.4" /> 
						<case maxzoom="13" strokeWidth_5="1.8" />
						<case maxzoom="14" strokeWidth_5="2.2" />
						<case maxzoom="15" strokeWidth_5="2.6" />
						<case maxzoom="16" strokeWidth_5="3" />
						<case minzoom="17" strokeWidth_5="3.4" /> 
						<case minzoom="18" strokeWidth_5="3.8" /> 
					</apply >
					<apply_if lessDetailed="true" color_5="#afbf9f" >
						<case maxzoom="11" strokeWidth_5="0"/> 
						<case maxzoom="12" strokeWidth_5="2" /> 
						<case maxzoom="13" strokeWidth_5="2.4" /> 
						<case maxzoom="14" strokeWidth_5="2.8"/> 
						<case maxzoom="15" strokeWidth_5="3.2"/> 
						<case maxzoom="16" strokeWidth_5="3.6"/> 
						<case maxzoom="17" strokeWidth_5="4"/> 
						<case minzoom="18" strokeWidth_5="4.4"/> 
						<apply_if nightMode="true" color_5="#444400"/>
					</apply_if>
					<apply_if ign="true"  strokeWidth_5="0" color="#ffffff" color_0="#000000" color_5="#ffffff">
						<case maxzoom="11" strokeWidth="0" /> 
						<case maxzoom="12" strokeWidth="2" strokeWidth_0="4" pathEffect_0="8_2" /> 
						<case maxzoom="13" strokeWidth="2.5" strokeWidth_0="5" pathEffect_0="8_2"/>
						<case maxzoom="14" strokeWidth="3" strokeWidth_0="5.5" pathEffect_0="17_5"/>
						<case maxzoom="15" strokeWidth="3.5" strokeWidth_0="6.5" pathEffect_0="15_4"/>
						<case maxzoom="16" strokeWidth="4" strokeWidth_0="7" pathEffect_0="17_5"/>
						<case maxzoom="17" strokeWidth="4.5" strokeWidth_0="7.5" pathEffect_0="20_6"/>
						<case maxzoom="18" strokeWidth="5" strokeWidth_0="8" pathEffect_0="25_7"/>
						<case maxzoom="19" strokeWidth="5.5" strokeWidth_0="8.5" pathEffect_0="30_8"/>
						<case maxzoom="20" strokeWidth="6" strokeWidth_0="9" pathEffect_0="35_9"/>
						<case minzoom="21" strokeWidth="6.5" strokeWidth_0="9.5" pathEffect_0="40_10"/>
						<apply_if noPolygons="true" maxzoom="12" strokeWidth="0" strokeWidth_0="0"/>
					</apply_if>
				</switch>

ici le bloc "facile" (très carrossable pour n'importe quel véhicule), ce sont les chemins marrons sur la carte (ou les doubles pointillés quand le mode "ign" est actif, leur épaisseur varie en fonction du zoom pour une meilleure lisibilité et ils sont aussi utilisés dans une variante du style "lessDetailled" avec une couleur différente.

Vous pouvez déplacer n'importe quel <case additional=... dans n'importe quel bloc (facile/carrossable/medium/hard/impassable) pour réorganiser votre propre échelle de "praticabilité" d'un chemin.
mettez les critères les plus restrictif en premier, sinon le critère le plus généraliste type "tractype" va l'emporter.

Balisages

ils sont regroupés en 3 catégories à partir de la ligne 4007 du bloc "line" du fichier

vélo

ils sont invisibles dans ma version à cause de la couleur invisible color="#00000000"et du strokeWidth="0.1 il suffit de les modifier pour les faire apparaitre ;)

		<!-- balisage vélo -->
		<switch minzoom="10" color="#00000000" >
			<case tag="route_bicycle" value=""/>
			<apply minzoom="10" strokeWidth="0.1" />
		</switch>

VTT

ils sont en surlignage violet sur la carte avec une icône de vélo blanc dans un cercle vert qui permet de les sélectionner pour obtenir la trace (sur Android).

vtt

		<!-- balisage VTT -->
		<switch balisage="false" >
			<case minzoom="14" tag="route_mtb" value="" color="#ddddff" shadowColor="#ddddff" strokeWidth="0.1:1" cap="ROUND"/>
			<case minzoom="14" tag="route" value="mtb" color="#ddddff" shadowColor="#ddddff" strokeWidth="0.1:1" cap="ROUND"/>
			<apply >
					<case maxzoom="13" shadowRadius="0" />
					<case maxzoom="14" shadowRadius="3.5:3.5" />
					<case maxzoom="15" shadowRadius="4:4" />
					<case maxzoom="16" shadowRadius="4.5:4.5" />
					<case maxzoom="17" shadowRadius="5:5" />
					<case maxzoom="18" shadowRadius="6.5:6.5" />
					<case maxzoom="19" shadowRadius="7:7" />
					<case maxzoom="20" shadowRadius="7.5:7.5" />
					<case minzoom="21" shadowRadius="8:8" />
				<apply_if noPolygons="true" color="#000000" strokeWidth="0.1:1" shadowColor="#50eeddff"/>
				<apply_if nightMode="true" color="#00000" strokeWidth="0.1:1" shadowRadius="0" shadowColor="#002060"/>
				<apply_if lessDetailed="true" strokeWidth="0" />
				<apply_if ign="true" shadowColor="#33ff00ff"/>
				<apply_if ign="true" noPolygons="true" shadowColor="#99ff00ff"/>
				<!-- enlève balisage sous tag mtb:scale -->
				<apply_if >
					<case additional="mtb:scale=0" strokeWidth="0"/>
					<case additional="mtb:scale=1" strokeWidth="0"/>
					<case additional="mtb:scale=2" strokeWidth="0"/>
					<case additional="mtb:scale=3" strokeWidth="0"/>
					<case additional="mtb:scale=4" strokeWidth="0"/>
					<case additional="mtb:scale=5" strokeWidth="0"/>
					<case additional="mtb:scale=6" strokeWidth="0"/>
				</apply_if>
			</apply>
		</switch>

j'ai ici utilisé les "shadowColor" à la place des "strokeWidth" pour résoudre des problèmes de chevauchement/opacité
pour modifier l'épaisseur vous devez augmenter les "shadowRadius" , pour changer les couleurs vous devez modifier les "shadowColor"

Pedestre

toutes les catégories sont représentées (même le simple tag "hiking" sur un chemin) en 3 symboliques habituelles en France, un surlignage orangé/rouge pour les GR, orangé pour les TR, jaune pour les PR

		<!-- balisages pedestre -->
		<switch  balisage="false" >
			<case minzoom="12" tag="network_iwn" value="" color="#ffddaa" shadowColor="#99ffddaa"  strokeWidth="0.1:1" />
			<case minzoom="12" tag="network_nwn" value="" color="#ffddaa" shadowColor="#99ffddaa" strokeWidth="0.1:1" />
			<case minzoom="13" tag="network_rwn" value="" color="#ffeeaa" shadowColor="#99ffeeaa" strokeWidth="0.1:1" />
			<case minzoom="15" tag="network_lwn" value="" color="#ffffcc" shadowColor="#99ffffcc"  strokeWidth="0.1:1" />
			<case minzoom="15" tag="route_hiking" value="" color="#ffffcc" shadowColor="#99ffffcc"  strokeWidth="0.1:1" />
			<case minzoom="15" tag="route" value="hiking" color="#ffffcc" shadowColor="#99ffffcc"  strokeWidth="0.1:1" />
			<case minzoom="15" tag="hiking" value="yes" color="#ffffcc" shadowColor="#99ffffcc"  strokeWidth="0.1:1" />
				<apply>
					<case maxzoom="13" shadowRadius="2:2" />
					<case maxzoom="14" shadowRadius="2.5:2.5" />
					<case maxzoom="15" shadowRadius="3:3" />
					<case maxzoom="16" shadowRadius="3.5:3.5" />
					<case maxzoom="17" shadowRadius="4:4" />
					<case maxzoom="18" shadowRadius="4.5:4.5" />
					<case maxzoom="19" shadowRadius="5:5" />
					<case maxzoom="20" shadowRadius="5.5:5.5" />
					<case minzoom="21" shadowRadius="6:6" />
				</apply>
			<apply_if noPolygons="true" color="#30ffff00" shadowColor="#30ffff00"/>
			<apply_if nightMode="true" color="#00ffff00" shadowColor="#22ffff66"  />
			<apply_if lessDetailed="true" strokeWidth="0:0" shadowRadius="0"/>
		</switch>

j'ai ici utilisé les "shadowColor" à la place des "strokeWidth" pour résoudre des problèmes de chevauchement/opacité
pour modifier l'épaisseur vous devez augmenter les "shadowRadius" , pour changer les couleurs vous devez modifier les "shadowColor"

symboles et noms des itinéraires pédestres

ils sont dans le bloc "text" du fichier à la ligne 942
3 blocs pour 3 symboles usuels (blanc/rouge pour GR), (jaune/orange pour TR), (jaune pour PR)

ici le niveau GR

		<switch minzoom="18" lessDetailed="false" textWrapWidth="20" >
			<case tag="network_iwn" value=""  nameTag="hiking_route_name"/>
			<case tag="network_nwn" value=""  nameTag="hiking_route_name"/>
			<case tag="network_rwn" value=""  nameTag="hiking_route_name"/>
			<case tag="network_lwn" value=""  nameTag="hiking_route_name"/>
			<case tag="route_hiking" value=""  nameTag="hiking_route_name"/>
			<case tag="route_bicycle" value="" nameTag="" />
			<apply   >
				<case textColor="#663300" textHaloColor="#ffffff" textHaloRadius="1" textOnPath="true" textSize="11" textOrder="80" textDy="" />
			</apply>
			<apply_if nightMode="true" textColor="#eecc00" textHaloColor="#000000" />
		</switch>
						
		<!-- hiking icon-->
		<switch moreDetailed="true" >
			<switch minzoom="12" textOnPath="false" textSize="10" textColor="#00ff0000" textOrder="70" >
				<case tag="network_nwn" value=""  nameTag="hiking_route_ref"/>
				<case tag="network_iwn" value=""  nameTag="hiking_ref"/>
				<apply >
					<case icon="osmc_red_lower" textShield="osmc_white_bg" />
					<apply_if maxzoom="13"  textMinDistance="10"/>
					<apply_if maxzoom="14"  textMinDistance="50"/>
					<apply_if maxzoom="15"  textMinDistance="90"/>
					<apply_if maxzoom="16"  textMinDistance="150"/>
					<apply_if minzoom="17"  textMinDistance="250"/>
				</apply>
				<apply_if nightMode="true" textShield="osmc_white_upper"/>
			</switch>
			<switch minzoom="13" textOnPath="false" textSize="10" textColor="#00ff0000" textOrder="71" >
				<case tag="network_rwn" value=""  nameTag="hiking_route_name"/>
				<apply textMinDistance="150">
					<case icon="osmc_red_lower" textShield="osmc_yellow_bg" />
				</apply>
				<apply_if nightMode="true" textShield="osmc_orange_upper"/>
			</switch>
			<switch minzoom="14" textOnPath="false" textSize="10" textColor="#00ffffff" textOrder="72" >
				<case minzoom="15" tag="network_lwn" value=""  nameTag="hiking_route_name"/>
				<apply textMinDistance="200">
					<case icon="osmc_yellow_lower" textShield="osmc_white_bg"/>
				</apply>
				<apply_if nightMode="true" textShield="osmc_white_upper"/>
			</switch>
		</switch>

premier bloc pour le nom des parcours
dernier bloc pour les icônes avec le texte invisible (sinon il vient par dessus le symbole)

symboles VTT

en suivant dans le bloc "line" du fichier

		<switch minzoom="18" lessDetailed="false" textWrapWidth="25" textOrder="80">
			<case tag="route_mtb" value="" nameTag="bicycle_ref" nameTag2="mtb:name" textDy="12" textColor="#ff0000"/>
			<case tag="route_mtb" value="" nameTag="bicycle_mtb:name"  textDy="-24" textColor="#00ff00"/>
			<case tag="route_mtb" value="" nameTag="" textDy="-12" textColor="#003366"/>
			<apply  >
				<case  textHaloColor="#ffffff" textHaloRadius="3" textOnPath="true" textSize="11"  />
				<apply_if nightMode="true" textHaloColor="#000000" textColor="#6699cc" />
			</apply>
		</switch> 

		<!-- MTB icon -->
		<switch moreDetailed="true" minzoom="14" textOnPath="false" textSize="10" textOrder="169"  >
				<case tag="route_mtb" value="" nameTag="bicycle_ref" nameTag2="mtb:name"/>
				<case tag="route_mtb" value="" nameTag="bicycle_mtb:name" />
				<case tag="route_mtb" value="" nameTag="" />
				<apply textColor="#00ffffff">
					<case icon="osmc_blue_bicycle" textShield="osmc_blue_circle_bg"  />
					<apply_if maxzoom="14"  textMinDistance="60"/>
					<apply_if maxzoom="15"  textMinDistance="90"/>
					<apply_if maxzoom="16"  textMinDistance="150"/>
					<apply_if minzoom="17"  textMinDistance="250"/>
				</apply>
				<apply_if nightMode="true" icon="osmc_blue_bicycle" textShield="osmc_blue_circle_bg" />
		</switch>