Change state color on interactive map

Question

I’m using this map on a website http://vitroz.github.io/MapaInterativoJS/ I would like to leave the states where we have unity with a different color, colleagues know how?

There’s this section where it’s the color of every state:

var options = {
      region: 'BR',
      resolution: 'provinces',
      datalessRegionColor: 'white',
      defaultColor: '#cdcdcd',
      enableRegionInteractivity: true,
     };

But I wanted different colors for some states.

Answer 1

EDITION

Take a look at Jsfiddle and see if this is how you want it to work:

EXAMPLE IN JSFIDDLE

The differences are only due to CSS and HTML, which I changed, so don’t be surprised.

HTML

Be careful with your HTML. Use meaningful patterns. Worry about semantics.

<section>
    <h1> Atualmente a nossa Matriz esta localizada em Minas Gerais e possuímos filiais nos Estados de São Paulo, Goiás, Ceará e Pará. Selecione o Estado abaixo e veja a localização de cada uma de nossas unidades.
    </h1>
    <!-- Renderiza o gráfico -->
    <div id="mapa-do-brasil" style="width: 750px; height: 500px;"></div>
    <div id="detalhes-das-lojas">
        <h2>
            <span id="estado"></span>
        </h2>
        <p>
            <span>Loja: </span><span id="loja"></span>
        </p>
        <p>
            <span>Fone: </span><span id="fone"></span>
        </p>
        <p>    
            <span>Endereço: </span><span id="endereco"></span>
        </p>
    </div>
</section>

Javascript

Don’t be afraid to use Javascript. Although it is a very good library, Google Charts is still Javascript. Always keep this in mind.

google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(distribuicaoDasLojasPorEstado);

function distribuicaoDasLojasPorEstado() {

    // Dados do mapa
    var data = google.visualization.arrayToDataTable([
        ['Estado', 'Lojas'],
        ['Minas Gerais', 1],
        ['São Paulo', 1],
        ['Goiás', 1],
        ['Ceará', 1],
        ['Pará', 1]
    ]),
    // Opções do mapa
    options = {
        region: 'BR',
        resolution: 'provinces',
        datalessRegionColor: '#C8F7C5',
        defaultColor: '#cdcdcd',
        enableRegionInteractivity: true,
        legend: 'none'
    },
    // Objeto mapa - SVG, renderizado na DIV de ID #mapa-do-brasil
    mapa = new google.visualization.GeoChart(document.getElementById('mapa-do-brasil'));

    // Objeto com as informações das unidades
    unidades = {
        "Minas Gerais" : {
            "Loja": "Matriz - São Sebastião do Paraíso",
            "Fone": "(35) 3539-8150",
            "Endereço" : "Av. Dárcio Cantieri, nº 1750 - Jardim São José - CEP: 37950-000"
        },
        "Ceará": {
            "Loja": "Filial - Fortaleza",
            "Fone": "(85) 3211-6666",
            "Endereço": "Av. Heraclito Graça, nº 395 - Centro - CEP: 60.140-061"
        },
        "São Paulo": {
            "Loja": "Filial - São Paulo",
            "Fone": "(11) 4083-2610",
            "Endereço": "EDIFÍCIO DENVER/Av. Fagundes Filho, nº 145 – CJ 48Vila Monte Alegre - CEP: 04.304-000"
        },
        "Pará": {
            "Loja": "Filial - Belém",
            "Fone": "(91) 3075-5500",
            "Endereço": "Av. Assis de Vasconcelos, nº 488 – Campina - CEP: 66.017-070"
        },
        "Goiás": {
            "Loja": "Filial - Goiânia",
            "Fone": "(62) 3291-5309",
            "Endereço": "Endereço: Rua 29, nº 62- Quadra L18, Lote 14 Setor Oeste - CEP: 74.140-060"
        }
    };

    // Função para mostrar as informações da loja ao clicar no mapa
    function mostrarDetalhes () {
        // Imprime no console a seguinte frase
        console.log('Executando a função "mostrarDetalhes()"');
        // Pega o evento click
        var estadoSelecionado = mapa.getSelection();
        // Mostra no console a seleção no mapa
        console.log(estadoSelecionado);
        // Pega o nome do Estado
        message = '';
        estadoSelecionado.forEach (function (part, index) {
            var item = estadoSelecionado[index];
            // Verifica o índice das linhas
            if ( item.row != null ) {
            var estado = "";
                switch(item.row) {
                    // Os cases devem estar 
                    case 0:
                        estado = "Minas Gerais";
                        break;
                    case 1:
                        estado = "São Paulo";
                        break;
                    case 2:
                        estado = "Goiás";
                        break;
                    case 3:
                        estado = "Ceará";
                        break;
                    case 4:
                        estado = "Pará";
                        break;
                }
                var loja = unidades[estado]["Loja"],
                    fone = unidades[estado]["Fone"],
                    endereco = unidades[estado]["Endereço"];

                console.log(loja + ' - ' + fone + ' - ' + endereco + ' - ' + estado);
                // Imprime os dados no HTML
                document.getElementById("estado").textContent = estado;
                document.getElementById("loja").textContent = loja;
                document.getElementById("fone").textContent = fone;
                document.getElementById("endereco").textContent = endereco;
            }
        });

    }

    // Monitora o evento click no mapa
    google.visualization.events.addListener(mapa, 'select', mostrarDetalhes);

    // Renderiza o mapa
    mapa.draw(data, options);
}

CSS

Use CSS to take care of the look of the page. Separate CSS, HTML and Javascript whenever you can.

h1 {
    font-family: "Calibri Light", sans-serif;
    color: #333;
}

External files

This is the only file required to render Google Charts and Maps.

https://www.gstatic.com/charts/loader.js

Notes

You can still improve the Javascript code a lot, you can refactor later.

Add styles with CSS, avoid as much inline CSS as possible, but if you need to use it (less work, even to maintain)

---

ORIGINAL

You could put the complete code of the map?

Perhaps looking at the documentation, we could point out the states that have units with the number 1 and those that do not have units with 0, or not informed. Thus, you could add color to the states with value 1 and leave the states with value 0 blank.

Or rather, you could indicate the number of units in cadas state, so states with higher number of units would appear with different color than those that have fewer units or have no units.

You just need to create a list of the kind:

var data = google.visualization.arrayToDataTable([
    ['Estado', 'Unidades'], 
    ['Acre', 3],
    ['Alagoas', 5],
    // ...
    ['Sergipe', 10],
    ['Tocantins', 7]
]);

You can see it here: Jsfiddle

And the documentation.