group.control radio not working with basemaps and issues with special characters (german Umlaute = mutated vowels: ä,ü,ö)

[buehlesa]

I am trying to create some interactive tmaps. I wanted to take advantage of the radio buttons in TMAP v4, to display different data inside the same .html-file.

My first question is around using group.control = "radio". While this works, it puts the layer data in the same level with the basemaps. In reality users want to have a basemap PLUS one custom layer. Take this example:

library(tmap)
data(World)

# Create interactive map with group control set to radio
tmap_mode("view")
map <- tm_shape(World) +
  tm_polygons("pop_est", group = "Population", group.control = "radio") +
  tm_polygons("gdp_cap_est", group = "GDP", group.control = "radio") +
  tm_basemap(c("Esri.WorldGrayCanvas", "CartoDB.Voyager"))
map

How can I achieve it? I have also tried tm_group(...,control = "radio"), but that doesn't seem to work.

Moreover, if one of the layer names has special characters (in my case Umlaut ä) as the group name, the layer doesn't work as expected. Take this example:

library(tmap)
data(World)

# Create interactive map with group control set to radio

tmap_mode("view")
map <- tm_shape(World) +
  tm_polygons("pop_est", group = "Populätion", group.control = "radio", 
              fill.legend = tm_legend(title = "Populätion Estimate")) +
  tm_polygons("gdp_cap_est", group = "GDP per Capita", group.control = "radio", 
              fill.legend = tm_legend(title = "GDP per Capita")) +
  tm_basemap(c("Esri.WorldGrayCanvas", "CartoDB.Voyager"))
map

The legend for layers with Umlaut is always shown. This indicates a character mismatch between the name of the legend (including Umlaut) and the Layer Control window. This unexpected behavious is also passed on, when converting tmap to leaflet. I tried to use baseGroups and overlayGroups to resolve the first issue, however, the legends of layers with Umlaut are always visible, no matter what.

See attached photos for both issues
Originally posted on stackoverflow to ask for advice, pasted in here as it is potentially a bug.

[mtennekes]

The first one is easy: you need to add group.control = "none" to tm_basemap. This makes sure that the basemap is not part of the radio group, but (instead) always on.

The second one, the umlaut: I suspect this is a bug in leaflet(?) You'll probably know this @tim-salabim :-)

[tim-salabim]

Not sure really. Would need to investigate...

[buehlesa]

Thank you @mtennekes
However, group.contol = "none" inside tm_basemap() probably leads to not being able to switch between different basemaps. This is needed in my case (e.g. sometimes map views are better, sometimes satellite view is needed). Is there a way to accommodate this entirely within tmap?
(I don't have access to a computer right now, please correct me if my assumption is wrong).

Thank you @tim-salabim for looking into this. If the Umlaut / Special Character issue is solved, I can convert tmap to leaflet and play with baseGroups / overlayGroups as described. Then the first issue is solved as well.

[mtennekes]

As far as I know (correct me if I'm wrong @tim-salabim ) you can only have one radio-button-group. Therefore, you can not switch basemaps and also switch between data-layers separately.

[buehlesa]

Thank you very much.

I have managed to tweak the tmap-Output using leaflet and JavaScript.

Now basemaps and overlays can be selected separately. This is very neat, exactly what my users want. It allows to show different data in one sharable (.html) map and comparing different layers. In my use case, we zoom in to a specific area and show different data there - without this tweak, they would need to zoom in on many separate maps.

Here is my complete code, based on the previous example:

library(tmap)
library(dplyr)
data(World)

#Define Layer names
#Change here ä --> a to test how it works with / without special characters
LayName = c("Populätion Estimate", "GDP per Capita")

#Create interactive map with group control set to radio
tmap_mode("view")
map <- tm_shape(World) +
  tm_polygons("pop_est", group = LayName[1], 
              fill.legend = tm_legend(title = LayName[1])) +
  tm_polygons("gdp_cap_est", group = LayName[2], 
              fill.legend = tm_legend(title = LayName[2])) +
  tm_basemap(c("Esri.WorldGrayCanvas", "CartoDB.Voyager"))
map

#Conversion of tmap to Leaflet and changes within leaflet
	# Convert to leaflet and replace default layers control
	leaf <- tmap_leaflet(map)

	# Remove the default layers control added by tmap
	leaf$x$calls <- Filter(function(c) c$method != "addLayersControl", leaf$x$calls)

	# Define base and overlay groups (must match the 'group' names used in tm_lines)
	baseGroups = c("Esri.WorldGrayCanvas", "CartoDB.Voyager")
	overlayGroups = LayName

	# Choose the default overlay to show on load
	defaultGroup = LayName[1]

	leaf = leaf %>%
	  leaflet::addLayersControl(
		baseGroups = baseGroups,
		overlayGroups = overlayGroups,
		options = leaflet::layersControlOptions(
		  collapsed = FALSE,
		  position = "topright"
		)
	  ) %>%
	  # Hide all overlay groups except the default before rendering
	  { m <- .; for (g in setdiff(overlayGroups, defaultGroup)) m <- leaflet::hideGroup(m, g); m } %>%
	  leaflet::showGroup(defaultGroup) %>%
	  htmlwidgets::onRender(sprintf("
		function(el, x) {
		  var map = this;

		  // Overlay groups we manage exclusively
		  var groups = %s;

		  var list = el.querySelector('.leaflet-control-layers-list');
		  var baseDiv = el.querySelector('.leaflet-control-layers-base');
		  var overlayDiv = el.querySelector('.leaflet-control-layers-overlays');
		  if (!list || !baseDiv || !overlayDiv) return;

		  // 1) Move overlays above base layers (Overlay-Daten first)
		  if (overlayDiv.nextSibling !== baseDiv) {
			list.insertBefore(overlayDiv, baseDiv);
		  }

		  // 2) Insert section titles
		  var overlayTitle = document.createElement('div');
		  overlayTitle.textContent = 'Selection Overlay-Data';
		  overlayTitle.style.fontWeight = 'bold';
		  overlayTitle.style.margin = '4px 0';
		  list.insertBefore(overlayTitle, overlayDiv);

		  var baseTitle = document.createElement('div');
		  baseTitle.textContent = 'Selection Basemap';
		  baseTitle.style.fontWeight = 'bold';
		  baseTitle.style.margin = '8px 0 4px 0';
		  list.insertBefore(baseTitle, baseDiv);

		  // 3) Convert overlay checkboxes to radios and enforce exclusivity
		  var labels = Array.from(overlayDiv.querySelectorAll('label')).filter(function(lbl) {
			var span = lbl.querySelector('span');
			return span && groups.indexOf(span.textContent.trim()) >= 0;
		  });
		  labels.forEach(function(lbl) {
			var inp = lbl.querySelector('.leaflet-control-layers-selector');
			if (!inp) return;
			inp.type = 'radio';
			inp.name = 'overlayExclusive_Overl';
		  });

		  function setExclusive(name) {
			// Show only the selected group; hide all others
			groups.forEach(function(g) {
			  if (g === name) {
				if (map.showGroup) map.showGroup(g);
			  } else {
				if (map.hideGroup) map.hideGroup(g);
			  }
			});

			// Sync radio state
			labels.forEach(function(lbl) {
			  var span = lbl.querySelector('span');
			  var inp = lbl.querySelector('.leaflet-control-layers-selector');
			  if (!span || !inp) return;
			  inp.checked = (span.textContent.trim() === name);
			});
		  }

		  // Initial selection (match defaultGroup set in R)
		  setExclusive('%s');

		  // Attach change handlers
		  labels.forEach(function(lbl) {
			var inp = lbl.querySelector('.leaflet-control-layers-selector');
			var name = lbl.querySelector('span').textContent.trim();
			inp.addEventListener('change', function() {
			  if (inp.checked) setExclusive(name);
			});
		  });
		}
	  ", jsonlite::toJSON(overlayGroups, auto_unbox = TRUE, encoding = "UTF-8"), defaultGroup)
	)
	
#Plot Leaflet map
leaf

Using the variable LayName in line 7 you can verify, that this issue exists only with special characters, such as Umlaut. I appreciate any help with making Umlaut and (French speical characters such as é, è, à, ô,...) work. Thank you so much!

[tim-salabim]

Regarding the Umlauts, I think you need to match and replace using some sort of variant of the following regular expression

[[:punct:]À-ÿ ]

which will match special characters, white space and all sorts of Umlauts or accented letters. Not sure if that covers all possible problematic letters, but it should get you quite far.

You can play around with it here:

https://regex101.com/

I should update mapview and leafem to use this as well btw.

[buehlesa]

Thank you very much @tim-salabim
I am struggling to understand your response. Are you suggesting to change my input names to something like @auml; in case of ä? Is that what I should find out in https://regex101.com/?
Would it be possible for you to paste the entire code that works as expected containing the changes? Or will we see a permanent solution soon? Thank you for adding it to the leafem issues!

[tim-salabim]

What I mean is something like this:

x = "{[]}ÄäÖ Ööökd slǸéỳ°§  ò $Üü"

y = gsub(
  "[[:punct:]À-ỳ ]", 
  "_",
  x
)

y
#> [1] "___________kd_sl____________"

^{Created on 2025-11-04 with reprex v2.1.1}

regex101 is just meant as an online playground to evaluate and refine things... A comprehensive list of special characters can be found on Wikipedia

https://en.wikipedia.org/wiki/List_of_Unicode_characters

[Nowosad]

I am closing for now. @buehlesa -- please let me know if there is something that still needs to be fixed on the tmap side, and then I will reopen this issue.