Garmin Edge Change colour of navigation line using map themes

Hi,

I've spent the last few hours going through forums from 5 or so years ago talking about using the Map Themes to change the colour of the magenta navigation line. I have some experience with coding and troubleshooting but alas I cannot seem to change the colour. I have tried all combinations of switching from default themes and restarting the device to no avail. I'm very sure the XML is all good but here it is anyway (the last field is what should actually change the colour).

<?xml version="1.0" encoding="UTF-8"?>
<garmin_map_theme>
	<metadata>
		<title>Classic Red course</title>
		<description>Red navigation line</description>
        <category>0</category>
	</metadata>
	<stylelist>
		<style field="MPM_MDB_TRK_BLACK_CLR">
			<color>
				<primary day="#ff000000" night="#ff000000"/>
				<secondary day="#ff000000" night="#ff000000"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_DK_RED_CLR">
			<color>
				<primary day="#ff880000" night="#ff880000"/>
				<secondary day="#ff880000" night="#ff880000"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_DK_GREEN_CLR">
			<color>
				<primary day="#ff008000" night="#ff008000"/>
				<secondary day="#ff008000" night="#ff008000"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_DK_YELLOW_CLR">
			<color>
				<primary day="#ffb07800" night="#ffb07800"/>
				<secondary day="#ffb07800" night="#ffb07800"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_DK_BLUE_CLR">
			<color>
				<primary day="#ff000080" night="#ff000080"/>
				<secondary day="#ff000080" night="#ff000080"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_DK_MAGENTA_CLR">
			<color>
				<primary day="#ff800080" night="#ff800080"/>
				<secondary day="#ff800080" night="#ff800080"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_DK_CYAN_CLR">
			<color>
				<primary day="#ff008080" night="#ff008080"/>
				<secondary day="#ff008080" night="#ff008080"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_LT_GRAY_CLR">
			<color>
				<primary day="#ffc0c0c0" night="#ffc0c0c0"/>
				<secondary day="#ffc0c0c0" night="#ffc0c0c0"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_DK_GRAY_CLR">
			<color>
				<primary day="#ff808080" night="#ff808080"/>
				<secondary day="#ff808080" night="#ff808080"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_RED_CLR">
			<color>
				<primary day="#ffb00000" night="#ffb00000"/>
				<secondary day="#ffb00000" night="#ffb00000"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_GREEN_CLR">
			<color>
				<primary day="#ff00b800" night="#ff00b800"/>
				<secondary day="#ff00b800" night="#ff00b800"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_YELLOW_CLR">
			<color>
				<primary day="#ff989800" night="#ff989800"/>
				<secondary day="#ff989800" night="#ff989800"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_BLUE_CLR">
			<color>
				<primary day="#ff0000f8" night="#ff0000f8"/>
				<secondary day="#ff0000f8" night="#ff0000f8"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_MAGENTA_CLR">
			<color>
				<primary day="#fff800f8" night="#fff800f8"/>
				<secondary day="#fff800f8" night="#fff800f8"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_CYAN_CLR">
			<color>
				<primary day="#ff00fcf8" night="#ff00fcf8"/>
				<secondary day="#ff00fcf8" night="#ff00fcf8"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_WHITE_CLR">
			<color>
				<primary day="#fff8f8f8" night="#fff8f8f8"/>
				<secondary day="#fff8f8f8" night="#fff8f8f8"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_LT_BLUE">
			<color>
				<primary day="#ff20a8e0" night="#ff20a8e0"/>
				<secondary day="#ff20a8e0" night="#ff20a8e0"/>
			</color>
		</style>
		<style field="MPM_MDB_TRK_TRANSPRNT_CLR">
			<color>
				<primary day="#00f8fcf8" night="#00f8fcf8"/>
				<secondary day="#00f8fcf8" night="#00f8fcf8"/>
			</color>
		</style>
		<style field="MPM_POPULARITY_1_CLR">
			<color>
				<primary day="#ffa8a8f8" night="#ffa8a8f8"/>
				<secondary day="#ffa8a8f8" night="#ffa8a8f8"/>
			</color>
		</style>
		<style field="MPM_POPULARITY_2_CLR">
			<color>
				<primary day="#ffa854f8" night="#ffa854f8"/>
				<secondary day="#ffa854f8" night="#ffa854f8"/>
			</color>
		</style>
		<style field="MPM_POPULARITY_3_CLR">
			<color>
				<primary day="#ffa854f8" night="#ffa854f8"/>
				<secondary day="#ffa854f8" night="#ffa854f8"/>
			</color>
		</style>
		<style field="MPM_POPULARITY_4_CLR">
			<color>
				<primary day="#ffa800f8" night="#ffa800f8"/>
				<secondary day="#ffa800f8" night="#ffa800f8"/>
			</color>
		</style>
		<style field="MPM_POPULARITY_5_CLR">
			<color>
				<primary day="#ffa800f8" night="#ffa800f8"/>
				<secondary day="#ffa800f8" night="#ffa800f8"/>
			</color>
		</style>
		<style field="MPM_POPULARITY_6_CLR">
			<color>
				<primary day="#ff500050" night="#ff500050"/>
				<secondary day="#ff500050" night="#ff500050"/>
			</color>
		</style>
		<style field="MPM_POPULARITY_7_CLR">
			<color>
				<primary day="#ff500050" night="#ff500050"/>
				<secondary day="#ff500050" night="#ff500050"/>
			</color>
		</style>
		<style field="MPM_ACTV_CRS_CLR">
			<color>
				<primary day="#ff005ac8" night="#ff005ac8"/>
				<secondary day="#ff024eab" night="#ff024eab"/>
			</color>
		</style>
	</stylelist>
</garmin_map_theme>

I apprectiate nothing in this area has been touched upon for a while but if anyone knows anything it'd be a great help Smiley

Best,

Andrew

  • Hey, Andrew!

    There you go - left some comments in the file for better understanding:

    <?xml version="1.0" encoding="UTF-8"?>
    <garmin_map_theme>
        <metadata>
            <title>Gravel Theme</title>
            <description>Tom's Gravel Theme</description>
            <category>0</category>
        </metadata>
        <stylelist>
            <!-- MPM_ACTV_CRS_CLR is 'active course color' -->
            <!-- 'ff' first 2 digits define tranparency -->
            <!-- the rest is color in HEX notation -->
            <!-- primary is inner color, Secondary is outline color-->
            <style field="MPM_ACTV_CRS_CLR">
                <color>
                    <primary day="#fff800a8" night="#fff800a8"/>
                    <secondary day="#ff880088" night="#ff880088"/>
                </color>
            </style>
            <!-- MPM_VEHICLE seems to be onw position cursor -->
            <style field="MPM_VEHICLE_BRDR_CLR">
                <color>
                    <primary day="#ff000000" night="#ff000000"/>
                    <secondary day="#ff000000" night="#ff000000"/>
                </color>
            </style>
            <style field="MPM_VEHICLE_CLR">
                <color>
                    <primary day="#ff000000" night="#ff000000"/>
                    <secondary day="#ff000000" night="#ff000000"/>
                </color>
            </style>
            <style field="MPM_VEHICLE_LEFT_CLR">
                <color>
                    <primary day="#ff00a8f8" night="#ff00a8f8"/>
                    <secondary day="#ff00a8f8" night="#ff00a8f8"/>
                </color>
            </style>
            <style field="MPM_VEHICLE_RGHT_CLR">
                <color>
                    <primary day="#ff00a8f8" night="#ff00a8f8"/>
                    <secondary day="#ff00a8f8" night="#ff00a8f8"/>
                </color>
            </style>
            <style field="MPM_VEHICLE_BACK_CLR">
                <color>
                    <primary day="#ff00a8f8" night="#ff00a8f8"/>
                    <secondary day="#ff00a8f8" night="#ff00a8f8"/>
                </color>
            </style>
            <style field="MPM_VHCL_HGLT_CLR">
                <color>
                    <primary day="#ff000000" night="#ff000000"/>
                    <secondary day="#ff000000" night="#ff000000"/>
                </color>
            </style>
        </stylelist>
    </garmin_map_theme>

    This will also increase the size of the own position and change the color of it - just drop what you don't want/need.

    Tom

    BTW - if you experience display issues testing it with a already rendered route then drop its cache in the settings of the route!

  • Hi Tom

    Thanks for the help! I added your file to my device to find the same thing - that it doesn't change the route colour except for while using komoot (which i discovered last night). However even when using komoot there is still a pink route line foating around. I've attached some screenshots:

    Using Komoot:

    Using Garmin navigation:


    I usuallly use garmin for longer rides so that's all fine however I really do want to get rid of this silly pink line. Not really sure what I'm missing as clearly people have gotten it to work before

  • TomHH's theme uses a pink course line. For a plain red course line, the colour code should be #ffff0000. FYI, here is a handy guide for colour codes. https://www.farb-tabelle.de/en/table-of-color.htm

  • Thanks Peter, I did change it to not be pink (which is the blue in the screenshot of komoot nav). 

  • As Peter wrote - mine is pink as well but a little darker with even darker outlines. You need to adjust colors as you like!

    Also using Komoot navigation might be different as they push even more stuff to the Edge when you use their map theme!

    From my theme only 'MPM_ACTV_CRS_CLR' is dealing with the active navigation route. The rest is dealing with the position cursor (or vehicle as it's named in the theme).

    Also when changing color be aware that the Edge display is only capable of using 64 color (AFAIK)! And colors may also change again when switching modes (day/night), so you have to take care of both!

    NOTE: colors might appear different on laptop/PC than on the Edge due to the display of the Edge!

  • As Peter wrote - mine is pink as well but a little darker with even darker outlines. You need to adjust colors as you like

    Yup I already have done this. 

    Also using Komoot navigation might be different as they push even more stuff to the Edge when you use their map theme!

    Well if Komoot are pushing more stuff to the map, surely that means there is another setting needing to be changed to change the course colour on Garmin navigation. The presence of both a blue and pink line on the map further implies this.

    Also when changing color be aware that the Edge display is only capable of using 64 color (AFAIK)! And colors may also change again when switching modes (day/night), so you have to take care of both

    The colour does show up - it is in the kommot screenshot. I have tried both day and night modes.

    I am sure my XML is inline with what you have said so far. I did see somewhere else that the xx30s don't support the map themes as fully as the xx40s. Could this just be the issue?

  • I know nothing of Komoot so can't help but do you mean you are using the Komoot CIQ App for your map, do you know if the Komoot App even uses the MapTheme framework or something of their own making.

    For the Garmin Map I assume you are using "Turn Guidance" . The loaded course line is the the one changed by the 'MPM_ACTV_CRS_CLR' customised definition, the Turn Guidance generated route can separate from the loaded course and I don't know of any MapTheme element definition that controls that line color, always pink and usually slightly wider than the course line.

    I have found a few elements that work on 1040 and not x30, mostly to do with the Virtual Partner and the outline color of the route chevrons 

    I would like to do more with the MapTheme but it is a bit of a dead end as the Maptheme is NOT supported on the 1050 and might disappear on x40 in some future release, (x30s are probably safe from future releases!)

    PS I assume you are customising a copy of a standard MapTheme (with a new name) as the 4 standard ones get recreated every restart / powercycle

  • For the Garmin Map I assume you are using "Turn Guidance" . The loaded course line is the the one changed by the 'MPM_ACTV_CRS_CLR' customised definition, the Turn Guidance generated route can separate from the loaded course and I don't know of any MapTheme element definition that controls that line color, always pink and usually slightly wider than the course line.

    Ahhh okay. Are you saying that the pink line is actually the turn guidance? Having disabled that I am left with just a blue line for komoot (which I think only differs from the garmin navigation in the route setup, its still uses the garmin map for naviagtion). Now with the normal garmin course navigation (presaved ride), the line is blue, however when I just click on a location and navigate to it, it appears pink. Are you saying that there is no way to change this? Thanks for all the help

    Garmin Navigation Loaded course vs turn guidance (i think that's what it is) (generated by loading a course then clicking elsewhere and selecting ride to that location)

  • Unfortunately all this is trail and error as there is no guide or documentation for customizing a theme and therefore it's quite time consuming to do it right.

    In general the look of a map is defined by a TYP file and on the Edge you can overwrite some of the definitions. What can and what can't be adjusted - no clue!

    Thought about trying to extract the TYP definitions of a Garmin IMG file to see what it looks like and maybe get some more hints about definitions.

  • Alright, it works much better as it is now then it was anyway! BTW, I am using a custom map file from bbbike, not sure if that has anything to do with it behaving as it is. I might have a look into that typ thing but probably wont get too far.