laem
Colorer les icônes des lieux
Ce marron indifférencié pour un magasin de fringues et pour la mairie, c'est dommage. On peut faire comme d'autres en donnant des couleurs à nos catégories, et changer ainsi la couleur du fond de l'icône.
Le système de sprites de maplibre est assez compliqué, c'est dommage qu'on puisse pas charger nos SVG. À investiguer.
CF ce que fait Apple par exemple. Sans tomber dans les travers de cette mise en avant outrancière des commerces.
Osm americana les a ! https://americanamap.org/#map=17.66/48.111473/-1.680766
Pas le plus beau des styles, austère, mais mieux. Je préfère le rond d'Apple. C'est pas compliqué.
Voir aussi les travaux de feu Qwant Maps https://github.com/Qwant/qwant-basic-gl-style/tree/master/icons et de osmapp https://github.com/zbycz/osmapp/commits/master/public/sprites.md
Encore un exemple de beaux icônes. Les plus beaux, je crois. Chez Mapbox https://labs.mapbox.com/labs-standard/
On a mis un premier lot en ligne sur le sujet :)
Reste maintenant à faire de même directement sur le fond de carte, c'est plus compliqué !
Ceci semble un bon outil. Le format --sdf nous permettra de colorer nos icônes dans le style https://github.com/flother/spreet
Les grosses étapes :
- manier spreet, ça devrait aller
- faire le mapping entre nos icônes SVG de catégories et les noms de lieux maplibre, ça c'est pas facile.
Plutôt spritezero pour pouvoir utiliser les icônes de categories.yaml https://github.com/elastic/spritezero?tab=readme-ov-file#usage
Dans https://cartes.app/sprite/sprite.json il y a 145 icônes. Pour 30 secondes par icône, ça donne 1h de travail. 2h sinon. Et la tête farcie haha.
Dans icons/ on a 101 icônes.
Peut-on faire une migration partielle ? Oui je crois, en chargeant deux sprites, le premier, originel, commencera à avoir des éléments non utilisés mais c'est pas grave.
Salut, J'ai une suggestion (mais qui complique le travail) :
- garder les icones rondes colorées avec symbole blanc pour les lieux qui ont été affichés par sélection d'une catégorie
- faire des symboles colorés (sans fond rond) pour les lieux du fond de carte
parce que si on utilise les même icones dans les 2 cas, je crains qu'on perde la mise en valeur des lieux sélectionnés qu'on a pour l'instant.
[EDIT] C'est bon, j'ai testé la PR #776 et j'ai vu qu'il y a une différence de taille d'icône, c'est cool, ça fait le job.
Le système de sprites de maplibre est assez compliqué, c'est dommage qu'on puisse pas charger nos SVG.
Je suis surpris que tu dises ça (j'ai probablement raté un détail de ce que tu cherches).
Sur PlayGuide, nos marqueurs sont des superpositions de plusieurs svg pour reconstituer l'image complète.
Je charge les svg dans la carte avec la fonction addImage :
map.addImage('playground', document.getElementById("playground"));
et je définis les paramètres d'affichage des images dans un style :
{
"id": "playguide-marker-background", // et idem pour "playguide-marker-icon"
"type": 'symbol',
"source": "playguide-source",
"source-layer" : "playguideDB",
"layout": {
"icon-image": "{background}-{status}", // avec "{icon}"
},
},
D'habitude j'ai des ID d'image qui sont spécifiques, mais ça n'était pas le cas pour playground, il y avait un conflit avec le sprite du même nom, je m'en suis aperçu parce que la carte utilisait mon image playground au lieu du sprite.
Peut-être tu pourrais faire pareil ?
[EDIT] j'ai vérifié, ça marche, à condition de :
- charger une image svg en lui donnant le même id que le sprite que tu veux remplacer
- dans le fichier .json de définition des sprites, supprimer la ligne définissant le sprite que tu ne veux plus utiliser
- probablement mettre à jour le style pour que l'image s'affiche correctement
Par exemple ici, j'ai remplacé le sprite des arrêts de bus par l'image shared.svg contenant un point rouge :
Ah oui intéressant, si je comprends bien tu remplaces complètement le besoin des sprites par la fonction addImage, que j'utilisais déjà dans useDrawQuickSearchFeatures.ts.
Ce qui m'aurait permis d'éviter de créer la fonction qui transforme les SVG en images ajoutables. La contrainte étant qu'il faut si je comprends bien ajouter tous les icônes en SVG au HTML de la page avec des ids. Ce que je fais plus ou moins déjà dans le jsx de QuickSearchFeatures.
Par contre, ça veut dire que toutes les icônes sont chargées sur le HTML et sur le canvas MapLibre au lancement de l'app, plutôt que de façon fainéante.
Par extension, cette technique pourrait en effet de se passer des sprites, mais potentiellement avec une contrainte similaire : toutes les icônes seraient ajoutées dès le départ.
En effet, pour PlayGuide je charge tout au départ : de <img> dans le HTML avec assignant un ID, puis dans maplibre lors de l'évènement onload avec plein de .addImage().
Mais je me rends compte qu'en réutilisant ton code buidSvgImage(), je n'ai pas passé un ID mais directement les data de l'image, c'est ça ?
Dans tous les cas, charger 1 fois l'icone au début suffit pour l'utiliser i) dans le fond de carte, puis ii) lors de l'affichage d'une catégorie, c'est un avantage. (tant qu'on garde la même icone 😅 )
Ce qui t'embêtait à tout charger au départ, c'est la taille cumulée de toutes les icones ? ou bien de devoir définir des choses dans l'html ?
Ce qui t'embêtait à tout charger au départ, c'est la taille cumulée de toutes les icones
Oui c'est ça. Faudrait vraiment faire un diff de taille entre tous les SVG au départ, et le sprite maplibre.
L'ensemble des icônes cumulés fait 180 ko, quand le sprite 1x fait 60 et le sprite 2x 106.
OK c'est pas déconnant. Surtout que certains icônes sont inutilement lourds, par exemple le "bubble-tea" fait 25 ko (!!), il est beaucoup trop détaillé et pourra être réduit.
Donc j'enlève la contrainte taille, on peut passer outre :)
certains icônes sont inutilement lourds
OK je regarderai comment les réduire. Et aussi comment ré-utiliser ces icônes déjà chargées lors de l'affichage des POI par catégorie.