Search code examples
mapsamcharts

AMCharts 4 - Map stroke uneven when applied to single countries

enter image description here

As you can see in the above image. I've applied a stroke to the USA. However the top of the mainland stroke is clearly thinner than the rest of the stroke. My config is below:

  polygonTemplate.stroke = am4core.color('#2c2626')
  polygonTemplate.strokeWidth = 0
  polygonTemplate.nonScalingStroke = true

And then I have an adaptor to stroke the active country,

polygonTemplate.adapter.add('strokeWidth', (stroke, target) => {
    if (target.dataItem && target.dataItem.dataContext && this.selectedCountry) {
      if (target.dataItem.dataContext.id === this.selectedCountry.id) {
        return 2
      }
    }
    return stroke
  })

From what I can find from examples online, this is the right way to apply a stroke. Is there a way I can make this stroke even all around the country? It happens on most countries but there are a few where it's not as bad..

EDIT: Thanks to Sam for his help, I now have an even stroke. But it seems I've got to press on a new country twice for it to take the active state - once to toggle the old country to inactive, then once again to add the active state. GIF below

enter image description here

Solution

  • The Problem is, that the bordering countries are overlapping the stroke of your selected country. I increased the strokeWidth to 10 and set the fillOpacity to 0.6. You can clearly see that in the following picture or in that code pen.

    example image

    Also setting the zIndex in an adapter doesn't change anything for me.

    But you can use states:

    Create an active (or a custom) state with the properties you want to use. You can also use zIndex there. Now set that state to every country you want to highlight.

    var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fillOpacity = 0.6;
polygonTemplate.stroke = am4core.color('#2c2626');
polygonTemplate.strokeWidth = 0;
polygonTemplate.zIndex = 0;
polygonTemplate.nonScalingStroke = true;

// Create active state
var activeState = polygonTemplate.states.create("active");
activeState.properties.strokeWidth = 10;
activeState.properties.zIndex = 1;

// Create an event to toggle "active" statestate
polygonTemplate.events.on("hit", function(ev) {
  ev.target.isActive = !ev.target.isActive;
  console.log(ev.target.dataItem.dataContext.id);
});

chart.events.once('inited', event => {
  polygonSeries.mapPolygons.values.find(i => i.dataItem.dataContext.id === 'US').isActive = true;
});

    Here is the result:

    example image

    This code pen shows the states example. Hope that helps.

    EDIT:

    To use double click to toggle the active state you can just replace the hit event with the doublehit event (docs). But you maybe want to disable zoom on double click now. That's possible with the following lines (docs):

    chart.seriesContainer.events.disableType("doublehit");
chart.chartContainer.background.events.disableType("doublehit");

    I created this code pen to show you an example.