Create a Brazil map with choropleth

App Building
1

Hello!

I need help creating a map with users in Brazil.

I'm creating a dashboard with users, and each user has a value in the STATE column in my database. With this data, I can do a sum and know how many users I have from each state.

Now, my DATA is

[{
          type: 'choropleth',
          locationmode: 'BRA-states',
    locations: ['SP','RJ','AM'],
    z: ['10','20','30'], // Coluna do conjunto de dados com os valores numéricos que você deseja plotar
    colorscale: 'Viridis', // Escolha uma escala de cores (pode ser alterada)
    colorbar: {
        title: 'Título da barra de cores',
        ticksuffix: 'Unidade', // Opcional - Sufixo para os valores da barra de cores
    },
    name: 'brasil data'
}]

And my layout is

{'showlegend': false,
  'geo': {
   'scope': 'south america',
            showland: true,
            landcolor: 'rgb(250,250,250)',
            subunitcolor: 'rgb(217,217,137)',
            countrycolor: 'rgb(217,217,217)',
            countrywidth: 0.5,
            subunitwidth: 1
    },
    "margin": {
    "l": 5,
    "r": 5,
    "t": 5,
    "b": 5,
    "pad": 2
  },
}

Where can I search to better understand how I show the map of Brazil as if it were an SVG, or something like that to display a color map with the users that are in my table?

Tks!

2

as state in

You maybe can't use it in this way like usa, because lack of data, you may try another way - using geojson

we are not planning on adding new built-in geographies to this library, but we have added the geojson attribute to all our geo traces so developers can provide their own geographies :)
3

Hey @AnsonHwang.

It's still a little complex for me. I'll do some research on this, and as soon as I have more I'll come back here to see if I can get more help.

Thanks for now!!

4

@AnsonHwang I was finally able to create and display the map

CleanShot 2023-08-25 at 18.49.35@2x
CleanShot 2023-08-25 at 18.49.35@2x1920×1128 139 KB

But I have a problem, I'm in doubt if I open a new topic or use this one.

I'm looking for data in a postgres query and needing to handle it via JS to display it in the format required by retool / choroplet, which is a specific array.

However, the query is taking something around 500ms and the js needs to run with a delay of 500ms.

And only after that the code that is in the iframe should run.

That is, the map is only displayed when I run it by hand, after all the queries have already loaded.

How do I get it to automatically display when it opens? How do I preload the data or create a trigger that only runs the component and the iframe after the data is loaded?

This is my code that transform postgres query:

function mapDataSource(){
    var data = [];

    for (var i = 0; i < groupState.data.state.length; i++) {
        data.push({
            id: 'BR.' + groupState.data.state[i],
            value: groupState.data.size[i]
        });
    }
    return { data: data };
}

return mapDataSource();

And this is my code that return um map:

<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-map.min.js"></script>
<script src="https://cdn.anychart.com/geodata/2.1.1/countries/brazil/brazil.js"></script>

<div id="container"></div>

<script>
anychart.onDocumentLoad(function () {
    var map = anychart.map();
       
window.Retool.subscribe(function(model) {
  
   map.geoData(anychart.maps.brazil);

    // set the series
    var series = map.choropleth(model.data);
  // set the colors and ranges for the scale
  series.colorScale(anychart.scales.ordinalColor([{less:125},{from:125, to:175},{from:175, to:225},{from:225, to:275},{from:275, to:315},{greater:315}]));

  // set the single hue progression
  var colors = anychart.color.blendedHueProgression('#FFE6AE', '#b71c1c', 6);
  
  // define the colors 
  series.colorScale().colors(colors);

  // enable the colorRange
  map.colorRange(true);        series.hovered().fill('#4a4a4a');
  series.labels(false);

   series.stroke("1 white 0");   
         
    map.container('container');
    map.draw();
             })

  });
</script>

Thanks!

1 Like
5

just remove onDocumentLoad and try

<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-map.min.js"></script>
<script src="https://cdn.anychart.com/geodata/2.1.1/countries/brazil/brazil.js"></script>

<div id="container"></div>

<script>

    var map = anychart.map();
       
window.Retool.subscribe(function(model) {
  
   map.geoData(anychart.maps.brazil);

    // set the series
    var series = map.choropleth(model.data);
  // set the colors and ranges for the scale
  series.colorScale(anychart.scales.ordinalColor([{less:125},{from:125, to:175},{from:175, to:225},{from:225, to:275},{from:275, to:315},{greater:315}]));

  // set the single hue progression
  var colors = anychart.color.blendedHueProgression('#FFE6AE', '#b71c1c', 6);
  
  // define the colors 
  series.colorScale().colors(colors);

  // enable the colorRange
  map.colorRange(true);        series.hovered().fill('#4a4a4a');
  series.labels(false);

   series.stroke("1 white 0");   
         
    map.container('container');
    map.draw();
             })

 
</script>