{"id":2358,"date":"2026-04-30T11:35:53","date_gmt":"2026-04-30T10:35:53","guid":{"rendered":"https:\/\/coding4phone.com\/?p=2358"},"modified":"2026-04-30T11:37:16","modified_gmt":"2026-04-30T10:37:16","slug":"mapsui-5-afficher-des-icones-personnalisees-sur-la-carte-avec-pintype-imagesource","status":"publish","type":"post","link":"https:\/\/coding4phone.com\/?p=2358","title":{"rendered":"Mapsui 5 \u2014 Afficher des ic\u00f4nes personnalis\u00e9es sur la carte avec PinType.ImageSource"},"content":{"rendered":"\n

Mapsui 5<\/a> introduit une rupture importante dans la fa\u00e7on dont les images sont g\u00e9r\u00e9es. Si tu migres depuis la version 4, tu as s\u00fbrement rencontr\u00e9 des erreurs li\u00e9es \u00e0 BitmapId<\/code>, BitmapRegistry<\/code> ou SymbolStyle<\/code>, des APIs d\u00e9sormais obsol\u00e8tes ou supprim\u00e9es. Cet article fait le point sur le nouveau syst\u00e8me, et montre comment l’utiliser concr\u00e8tement pour afficher des pins personnalis\u00e9s sur une carte .NET MAUI.<\/p>\n\n\n\n

Le nouveau syst\u00e8me d’images dans Mapsui 5<\/h2>\n\n\n\n

Avant la version 5, afficher une image personnalis\u00e9e sur la carte n\u00e9cessitait de charger manuellement le bitmap, de l’enregistrer dans un BitmapRegistry<\/code>, de r\u00e9cup\u00e9rer un BitmapId<\/code> entier, et de l’affecter \u00e0 un SymbolStyle<\/code>. C’\u00e9tait fonctionnel, mais verbeux et peu intuitif.<\/p>\n\n\n\n

Mapsui 5 simplifie tout \u00e7a avec un syst\u00e8me bas\u00e9 sur des URI de type cha\u00eene<\/strong>. Tu sp\u00e9cifies l’image via une simple propri\u00e9t\u00e9 string<\/code>, et Mapsui s’occupe du chargement, du cache et du rendu. Plus besoin de g\u00e9rer le cycle de vie des bitmaps manuellement.<\/p>\n\n\n\n

Ce syst\u00e8me est unifi\u00e9 : il s’applique aussi bien aux Pin<\/code>, aux ImageStyle<\/code>, aux ButtonWidget<\/code>, etc.<\/p>\n\n\n\n

Les cinq sch\u00e9mas d’URI support\u00e9s<\/h2>\n\n\n\n

Mapsui 5 supporte cinq fa\u00e7ons de r\u00e9f\u00e9rencer une image.<\/p>\n\n\n\n

1. https:\/\/<\/code> ou http:\/\/<\/code> image distante<\/h3>\n\n\n\n

L’image est t\u00e9l\u00e9charg\u00e9e depuis un serveur distant. Pratique pour des ic\u00f4nes dynamiques ou h\u00e9berg\u00e9es, mais d\u00e9pend de la connectivit\u00e9 r\u00e9seau.<\/p>\n\n\n

\npin.ImageSource = "<a href="https:\/\/example.com\/icons\/mymarker.png&quot;">https:\/\/example.com\/icons\/mymarker.png"<\/a>;\n<\/pre>\n\n\n\n
2. file:\/\/<\/code> fichier local<\/h3>\n\n\n\n
Pointe vers un fichier pr\u00e9sent sur le syst\u00e8me de fichiers de l’appareil. Utile pour des images t\u00e9l\u00e9charg\u00e9es ou g\u00e9n\u00e9r\u00e9es \u00e0 l’ex\u00e9cution.<\/p>\n\n\n
\nvar localPath = Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData);\npin.ImageSource = $"file:\/\/{localPath}\/icons\/mymarker.png";\n<\/pre>\n\n\n\n
3. embedded:\/\/<\/code> ressource embarqu\u00e9e dans l’assembly<\/h3>\n\n\n\n
C’est le sch\u00e9ma le plus courant pour des images packag\u00e9es avec l’application. L’image doit \u00eatre une ressource embarqu\u00e9e .NET classique (voir la section sur le pi\u00e8ge MAUI plus bas).<\/p>\n\n\n
\npin.ImageSource = "embedded:\/\/MonApp.Resources.Images.mymarker.svg";\n<\/pre>\n\n\n\n
Le format du chemin suit la convention .NET pour les ressources embarqu\u00e9es : NomAssembly.Dossier.SousDossier.fichier.ext<\/code>, avec des points comme s\u00e9parateurs.<\/p>\n\n\n\n
4. svg-content:\/\/<\/code> SVG inline<\/h3>\n\n\n\n
Permet de passer directement le contenu XML d’un SVG sous forme de cha\u00eene. Tr\u00e8s utile pour des ic\u00f4nes g\u00e9n\u00e9r\u00e9es dynamiquement ou pour \u00e9viter de g\u00e9rer des fichiers s\u00e9par\u00e9s.<\/p>\n\n\n
\nvar svgContent = """\n    <svg xmlns="http:\/\/www.w3.org\/2000\/svg" width="36" height="36">\n        <circle cx="18" cy="18" r="16" fill="#E63946"\/>\n    <\/svg>\n    """;\npin.ImageSource = $"svg-content:\/\/{svgContent}";\n<\/pre>\n\n\n\n
5. base64-content:\/\/<\/code> image encod\u00e9e en base64<\/h3>\n\n\n\n
Permet d’int\u00e9grer n’importe quelle image (PNG, JPEG, SVG\u2026) directement dans la cha\u00eene, sans fichier externe. Id\u00e9al quand l’image provient d’une API, d’une base de donn\u00e9es, ou quand tu veux \u00e9viter tout probl\u00e8me de chemin.<\/p>\n\n\n
\nbyte[] imageBytes = File.ReadAllBytes("mymarker.png");\nstring base64 = Convert.ToBase64String(imageBytes);\npin.ImageSource = $"base64-content:\/\/{base64}";\n<\/pre>\n\n\n\n
Utiliser PinType.ImageSource<\/code> en pratique<\/h2>\n\n\n\n
L’objet Pin<\/code> de Mapsui.UI.Maui<\/code> expose une propri\u00e9t\u00e9 Type<\/code> de type PinType<\/code>. Quand cette valeur est PinType.ImageSource<\/code>, Mapsui utilise directement la propri\u00e9t\u00e9 ImageSource<\/code> pour rendre l’ic\u00f4ne. Si ImageSource<\/code> est null<\/code> ou vide, une InvalidOperationException<\/code> est lev\u00e9e au moment du rendu.<\/p>\n\n\n\n
Voici un exemple complet :<\/p>\n\n\n
\nvar pin = new Pin\n{\nLabel = "Mon point d'int\u00e9r\u00eat",\nPosition = new Position(45.188, 5.724),\nType = PinType.ImageSource,\nImageSource = "embedded:\/\/MonApp.Resources.Images.mymarker.svg",\nScale = 1.0f,\nIsVisible = true\n};\n\nmapView.Pins.Add(pin);\n<\/pre>\n\n\n\n
Si tu veux utiliser une couleur de teinte (blending<\/code>) sur l’ic\u00f4ne, note que cela n’est disponible qu’avec PinType.Pin<\/code> (le pin SVG int\u00e9gr\u00e9 de Mapsui). Avec PinType.ImageSource<\/code>, l’image est rendue telle quelle.<\/p>\n\n\n\n
\n\n\n\n
\u26a0\ufe0f Le pi\u00e8ge MAUI : EmbeddedResource<\/code> vs MauiImage<\/code><\/h2>\n\n\n\n
C’est le point qui fait perdre le plus de temps lors d’une migration vers Mapsui 5 sur .NET MAUI.<\/p>\n\n\n\n
Dans un projet MAUI, les images plac\u00e9es dans Resources\/Images<\/code> ont par d\u00e9faut la Build Action<\/em> MauiImage<\/code><\/strong>. Cette action de compilation les transforme et les int\u00e8gre dans les ressources natives de chaque plateforme (Android drawable, iOS asset catalog, etc.). Elles ne sont pas<\/strong> accessibles comme ressources embarqu\u00e9es .NET.<\/p>\n\n\n\n
Le sch\u00e9ma embedded:\/\/<\/code> de Mapsui attend des ressources embarqu\u00e9es .NET classiques<\/strong>, c’est-\u00e0-dire des fichiers compil\u00e9s avec la Build Action<\/em> EmbeddedResource<\/code><\/strong>.<\/p>\n\n\n\n
Ce qu’il faut faire :<\/strong><\/p>\n\n\n\n
    \n
  1. Ajouter l’image \u00e0 ton projet (par exemple dans un dossier Assets\/Icons\/<\/code>)<\/li>\n\n\n\n
  2. Dans les propri\u00e9t\u00e9s du fichier, changer la Build Action<\/em> de MauiImage<\/code> \u00e0 EmbeddedResource<\/code><\/strong><\/li>\n\n\n\n
  3. Utiliser le chemin complet avec le nom de l’assembly<\/li>\n<\/ol>\n\n\n\n
    Comment trouver le nom exact de la ressource ?<\/strong><\/p>\n\n\n\n
    Le nom g\u00e9n\u00e9r\u00e9 peut varier selon la structure de ton projet. Pour le trouver avec certitude, utilise ce snippet au d\u00e9marrage de l’application :<\/p>\n\n\n
    \nvar names = System.Reflection.Assembly\n.GetExecutingAssembly()\n.GetManifestResourceNames();\n\nforeach (var name in names)\nSystem.Diagnostics.Debug.WriteLine(name);\n<\/pre>\n\n\n\n
    Tu verras dans la console de d\u00e9bogage des noms du type :<\/p>\n\n\n
    \n\t
    \n\t\t
    \n\t\t\t\n
    \n
    MonApp.Assets.Icons.mymarker.svg<\/div>
    MonApp.Assets.Icons.otherpoi.png<\/div><\/code><\/pre>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n
    C’est exactement ce que tu dois passer \u00e0 embedded:\/\/<\/code>.<\/p>\n\n\n\n
    Quelle alternative si embedded:\/\/<\/code> pose probl\u00e8me ?<\/h2>\n\n\n\n
    Si tu ne veux pas te soucier des Build Actions<\/em> ou de la structure de ressources, le sch\u00e9ma base64-content:\/\/<\/code><\/strong> est une excellente alternative. Tu charges l’image une seule fois (depuis un stream, une ressource MauiImage via ImageSource<\/code>, une API\u2026), tu l’encodes en base64, et tu passes la cha\u00eene directement.<\/p>\n\n\n\n
    C’est l\u00e9g\u00e8rement moins \u00e9l\u00e9gant mais totalement fiable, quelle que soit la configuration du projet.<\/p>\n\n\n
    \n\/\/ Exemple : image lue depuis un stream quelconque\nusing var stream = await FileSystem.OpenAppPackageFileAsync("mymarker.png");\nusing var ms = new MemoryStream();\nawait stream.CopyToAsync(ms);\nstring base64 = Convert.ToBase64String(ms.ToArray());\npin.ImageSource = $"base64-content:\/\/{base64}";\n<\/pre>\n\n\n\n
    \n\n\n\n
    R\u00e9sum\u00e9<\/h2>\n\n\n\n
    Sch\u00e9ma<\/th>Usage typique<\/th><\/tr><\/thead>
    https:\/\/<\/code><\/td>Ic\u00f4ne h\u00e9berg\u00e9e en ligne<\/td><\/tr>
    file:\/\/<\/code><\/td>Fichier local g\u00e9n\u00e9r\u00e9\/t\u00e9l\u00e9charg\u00e9<\/td><\/tr>
    embedded:\/\/<\/code><\/td>Ressource embarqu\u00e9e .NET (EmbeddedResource<\/code>)<\/td><\/tr>
    svg-content:\/\/<\/code><\/td>SVG g\u00e9n\u00e9r\u00e9 dynamiquement<\/td><\/tr>
    base64-content:\/\/<\/code><\/td>Image de toute provenance, z\u00e9ro probl\u00e8me de chemin<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Le nouveau syst\u00e8me d’images de Mapsui 5 est beaucoup plus simple \u00e0 utiliser que l’ancien BitmapRegistry<\/code>, \u00e0 condition de comprendre les subtilit\u00e9s li\u00e9es aux ressources .NET MAUI. Une fois ce point ma\u00eetris\u00e9, afficher des ic\u00f4nes personnalis\u00e9es sur une carte devient v\u00e9ritablement trivial.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Mapsui 5 introduit une rupture importante dans la fa\u00e7on dont les images sont g\u00e9r\u00e9es. Si tu migres depuis la version 4, tu as s\u00fbrement rencontr\u00e9 des erreurs li\u00e9es \u00e0 BitmapId, BitmapRegistry ou SymbolStyle, des APIs d\u00e9sormais obsol\u00e8tes ou supprim\u00e9es. Cet article fait le point sur le nouveau syst\u00e8me, et montre comment l’utiliser concr\u00e8tement pour afficher … Lire la suite<\/a><\/p>\n","protected":false},"author":1,"featured_media":2370,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"D\u00e9couvrez le nouveau syst\u00e8me d'images dans Mapsui 5 pour g\u00e9rer facilement vos ic\u00f4nes personnalis\u00e9es sur .NET MAUI. Simplifiez votre migration !","jetpack_seo_html_title":"Nouveau syst\u00e8me d'images dans Mapsui 5 : Guide complet","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_wpcom_ai_launchpad_first_post":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[8],"tags":[],"class_list":["post-2358","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnet"],"jetpack_publicize_connections":[],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pfoe4s-C2","jetpack-related-posts":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/coding4phone.com\/wp-content\/uploads\/2026\/04\/coding-4-phone-69f32fe8213e3.png?fit=1024%2C1024&ssl=1","_links":{"self":[{"href":"https:\/\/coding4phone.com\/index.php?rest_route=\/wp\/v2\/posts\/2358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coding4phone.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coding4phone.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coding4phone.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coding4phone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2358"}],"version-history":[{"count":15,"href":"https:\/\/coding4phone.com\/index.php?rest_route=\/wp\/v2\/posts\/2358\/revisions"}],"predecessor-version":[{"id":2375,"href":"https:\/\/coding4phone.com\/index.php?rest_route=\/wp\/v2\/posts\/2358\/revisions\/2375"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coding4phone.com\/index.php?rest_route=\/wp\/v2\/media\/2370"}],"wp:attachment":[{"href":"https:\/\/coding4phone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coding4phone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coding4phone.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}