SylvainAirCarnet - Mot-clé - Google Maps2013-12-07T15:08:00+01:00Sylvain Comteurn:md5:86be464dd873dc6d00f25cb262ea7ce0DotclearDe belles icônes pour afficher proprement son kml dans Google Mapsurn:md5:8e11bc7f8e47111984994604b990d90a2007-12-06T20:50:00+01:002011-05-04T21:17:40+02:00SycartographieGoogle Mapskml <p>Si tu utilises n'importe quelle icône dans un fichier kml que tu souhaites afficher dans <a href="http://maps.google.com/">Google Maps</a>, le
résultat risque d'être assez moche : tu auras droit à de magnifiques affichages pixelisés et déformés de la très jolie icône que tu avais amoureusement fabriquée. Deux solutions te sont proposées :
</p>
<ul><li>Si tu tiens absolument à ton icône, arrange toi pour qu'elle soit carrée (quitte à l'élargir et à la doter d'un fond transparent) et suffisamment grande. 32x32px est un minimum. Utilises bien les paramètres du tag <code><icon></code> dans la rédaction de ton kml</li>
<li>Si tu es un peu plus souple, choisi parmi les icônes fournies par Google dans les répertoires <code>http://maps.google.com/mapfiles/kml/</code> , elles sont retraitées par Google Maps qui en fait des images en SVG propres (et ombrées). Pour t'aider un peu, dans cette solution, voici quelques trucs pour trouver l'icône de tes rêves... </li>
</ul>
<h2>Les grandes icônes de paddle & shapes </h2>
<p>Démarrons simple, les grosses icônes (64x64 px) des répertoires <strong style="font-family:courier new,monospace">paddle</strong> et <strong><code>shapes</code></strong>. Elles sont rendues telle quelle par Google Maps. </p>
<h3>Les icones de base</h3>
<p><a style="border:0 none;background-color:transparent;clear:left;margin-bottom:1em;float:left;margin-right:1em" href="http://maps.google.com/mapfiles/kml/paddle/red-blank.png"><img src="http://maps.google.com/mapfiles/kml/paddle/red-blank.png" style="border:0 none" /></a>l'url est de la forme <code>http://maps.google.com/mapfiles/kml/paddle/<span style="background-color:rgb(255, 102, 102)">codecouleur</span>-blank.png</code>, avec les codes couleurs suivants : <code><strong>red</strong></code> (rouge), <code><strong>orange</strong></code>, <code><strong>ylw</strong></code> (jaune), <strong><code>grn</code></strong> (vert), <strong><code>ltblu</code></strong> (cyan), <strong><code>blu</code></strong> (bleu), <strong><code>purple</code></strong> (violet), <strong><code>pink</code></strong> (rose), <strong><code>wht</code></strong> (blanc).</p>
<p><a style="border:0 none;background-color:transparent;clear:left;margin-bottom:1em;float:left;margin-right:1em" href="http://maps.google.com/mapfiles/kml/pushpin/purple-pushpin.png"><img src="http://maps.google.com/mapfiles/kml/pushpin/purple-pushpin.png" style="border:0 none" /></a>Pour ceux qui préfèrent, des punaises sont disponibles en utilisant des url de la forme <code>http://maps.google.com/mapfiles/kml/<strong>pushpin</strong>/<span style="background-color:rgb(255, 153, 255)">codecouleur</span>.png </code> avec les mêmes codes couleurs.</p>
<h3 style="clear:both">Les dérivés avec symboles</h3>
<p><a style="border:0 none;background-color:transparent;clear:right;margin-bottom:1em;float:right;margin-left:1em" href="http://maps.google.com/mapfiles/kml/paddle/go.png"><img src="http://maps.google.com/mapfiles/kml/paddle/go.png" style="border:0 none" /></a><a style="border:0 none;background-color:transparent;clear:left;margin-bottom:1em;float:left;margin-right:1em" href="http://maps.google.com/mapfiles/kml/paddle/orange-circle.png"><img src="http://maps.google.com/mapfiles/kml/paddle/orange-circle.png" style="border:0 none" /></a><a style="border:0 none;background-color:transparent;margin-bottom:1em;float:left;margin-right:1em" href="http://maps.google.com/mapfiles/kml/paddle/ylw-square.png"><img src="http://maps.google.com/mapfiles/kml/paddle/ylw-square.png" style="border:0 none" /></a><a style="border:0 none;background-color:transparent;margin-bottom:1em;clear:left;float:left;margin-right:1em" href="http://maps.google.com/mapfiles/kml/paddle/grn-diamond.png"><img src="http://maps.google.com/mapfiles/kml/paddle/grn-diamond.png" style="border:0 none" /></a><a style="border:0 none;background-color:transparent;margin-bottom:1em;float:left;margin-right:1em" href="http://maps.google.com/mapfiles/kml/paddle/ltblu-stars.png"><img src="http://maps.google.com/mapfiles/kml/paddle/ltblu-stars.png" style="border:0 none" /></a>Avec un cercle (<strong><code>circle</code></strong>), un carré (<strong><code>square</code></strong>), un losange (<strong><code>diamond</code></strong>), une étoile (<strong><code>stars</code></strong>) au milieu <code>http://maps.google.com/mapfiles/kml/paddle/<span style="background-color:rgb(255, 204, 51)">codecouleur</span>-codeforme.png</code></p>
<p><a style="border:0 none;background-color:transparent;clear:right;margin-bottom:1em;float:right;margin-left:1em" href="http://maps.google.com/mapfiles/kml/paddle/pause.png"><img src="http://maps.google.com/mapfiles/kml/paddle/pause.png" style="border:0 none" /></a>Ne pas oublier également les deux symboles utilisés pour les itinéraires : <code><strong>go</strong>.png</code> et <code><strong>pause</strong>.png</code> (stop étant obtenu par <code><strong>red-square</strong></code>). Il ne sont disponible que dans leur couleur de base (vert pour go et jaune pour pause).</p>
<h3 style="clear:both">Des chiffres et des lettres</h3>
<p><a style="border:0 none;background-color:transparent;clear:left;margin-bottom:1em;float:left;margin-right:1em" href="http://maps.google.com/mapfiles/kml/paddle/S.png"><img src="http://maps.google.com/mapfiles/kml/paddle/S.png" style="border:0 none" /></a><a style="border:0 none;background-color:transparent;margin-bottom:1em;float:left;margin-right:1em" href="http://maps.google.com/mapfiles/kml/paddle/6-ugc.png"><img src="http://maps.google.com/mapfiles/kml/paddle/6-ugc.png" style="border:0 none" /></a>Ceux-là
ne sont malheureusement disponibles qu'en deux couleurs : rouge en
couleur de base et bleu si on veut. Le code "lettre" va évidemment de <strong>A à Z</strong> et de <strong>0 à 10</strong>. L'ajout de <code><strong>-ugc</strong></code> permet d'obtenir la couleur bleue.</p>
<p>L'url est de la forme : <code>http://maps.google.com/mapfiles/kml/paddle/<strong>codelettre</strong>(<strong>-ugc</strong>).png</code></p>
<h3 style="clear:both">Divers et variés</h3>
<p>Enfin, il existe des tas d'autres formes que je ne prétends pas lister ici. Elles se trouvent en général dans le répertoire <code>shapes</code> : <code>http://maps.google.com/mapfiles/kml/shapes/<strong>codeforme</strong>.png</code><br />Ci-dessous, les formes <strong><code>target</code></strong>, <strong><code>golf</code></strong>, <strong><code>info-i</code></strong>, <code><strong>info</strong></code>, <code><strong>star</strong></code>, <code><strong>trail</strong></code>, <code><strong>polygon</strong></code></p>
<p style="text-align: center; clear: both;"><a style="border:0 none;background-color:transparent;margin-left:1em;margin-right:1em" href="http://maps.google.com/mapfiles/kml/shapes/target.png"><img src="http://maps.google.com/mapfiles/kml/shapes/target.png" style="border:0 none" /></a><a style="border:0 none;background-color:transparent;margin-left:1em;margin-right:1em" href="http://maps.google.com/mapfiles/kml/shapes/golf.png"><img src="http://maps.google.com/mapfiles/kml/shapes/golf.png" style="border:0 none" /></a><a style="border:0 none;background-color:transparent;margin-left:1em;margin-right:1em" href="http://maps.google.com/mapfiles/kml/shapes/info-i.png"><img src="http://maps.google.com/mapfiles/kml/shapes/info-i.png" style="border:0 none" /></a><a style="border:0 none;background-color:transparent;margin-left:1em;margin-right:1em" href="http://maps.google.com/mapfiles/kml/shapes/info.png"><img src="http://maps.google.com/mapfiles/kml/shapes/info.png" style="border:0 none" /></a><a style="border:0 none;background-color:transparent;margin-left:1em;margin-right:1em" href="http://maps.google.com/mapfiles/kml/shapes/star.png"><img src="http://maps.google.com/mapfiles/kml/shapes/star.png" style="border:0 none" /></a><a style="border:0 none;background-color:transparent;margin-left:1em;margin-right:1em" href="http://maps.google.com/mapfiles/kml/shapes/trail.png"><img src="http://maps.google.com/mapfiles/kml/shapes/trail.png" style="border:0 none" /></a><a style="border:0 none;background-color:transparent;margin-left:1em;margin-right:1em" href="http://maps.google.com/mapfiles/kml/shapes/polygon.png"><img src="http://maps.google.com/mapfiles/kml/shapes/polygon.png" style="border:0 none" /></a></p>
<h2>Les autres icônes dans pal 2, 3, 4 et 5</h2>
<p>Soit que les équipes n'aient pas eu le temps de créer les svg équivalents, soit que ça ne fasse pas partie des objectifs, les icônes des répertoires <code><strong>pal2</strong></code>, <code><strong>pal3</strong></code>, <code><strong>pal4</strong></code> et <code><strong>pal5</strong></code> n'apparaitront pas dans Google Maps sous leur forme originale.<br />Par exemple, l'utilisation dans ton kml de n'importe laquelle des deux icônes suivantes :</p>
<p style="text-align:center;clear:both"><a style="border:0 none;background-color:transparent;margin-left:1em;margin-right:1em" href="http://maps.google.com/mapfiles/kml/pal3/icon23.png"><img src="http://maps.google.com/mapfiles/kml/pal3/icon23.png" style="border:0 none" /></a><img src="http://maps.google.com/mapfiles/kml/pal3/icon31.png" style="border:0 none" /></p>
<p style="text-align:center"> donnera quoi qu'il arrive</p>
<p style="text-align:center;clear:both"><a style="border:0 none;background-color:transparent;margin-left:1em;margin-right:1em" href="http://maps.google.com/mapfiles/kml/shapes/schools_maps.png"><img src="http://maps.google.com/mapfiles/kml/shapes/schools_maps.png" style="border:0 none" /></a></p>
<p>Du coup, celles-ci sont un peu plus délicates à utiliser. Pour t'y aider, j'ai fait une carte kml / Google Maps spéciale qui les fait apparaitre toutes :
</p>
<div style="text-align:center"><a href="http://maps.google.com/maps?f=q&hl=en&geocode=&time=&date=&ttype=&q=http:%2F%2Fspreadsheets.google.com%2Fpub%3Fkey%3DprFDaOdNcrX4JuaOxej2pKQ%26output%3Dtxt%26gid%3D2%26range%3Dkml&ie=UTF8&om=0&ll=1.988126,17.281494&spn=5.575497,7.910156&z=7">icônes Google Maps pour kml</a></div>
<p>Ca reste quand même une bonne méthode pour découvrir les icônes disponibles dans <code><strong>shapes</strong></code>...</p>