2

Estou usando este mapa em um site http://vitroz.github.io/MapaInterativoJS/ gostaria de deixar os estados em que temos unidade com uma cor diferente, os colegas sabem como?

Tem esse trecho onde esta a cor de todos os estados:

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

Mas eu queria cores diferentes para alguns estados.

0

1 Resposta 1

1

EDIÇÃO

Dá uma olhada no JSFiddle e vê se é assim que você quer que funcione:

EXEMPLO NO JSFIDDLE

As diferenças são decorrentes apenas do CSS e do HTML, que eu alterei, então, não estranhe isso.

HTML

Tome cuidado com seu HTML. Use padrões que tenham significado. Preocupe-se com a semântica.

<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

Não tenha medo de usar JavaScript. Apesar de ser uma biblioteca muito boa, a Google Charts ainda é JavaScript. Tenha sempre isso em mente.

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 para cuidar do visual da página. Separe sempre que puder o CSS, HTML e JavaScript.

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

Arquivos externos

Este é o único arquivo necessário para renderizar os gráficos e mapas Google Charts.

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

Notas

Ainda dá pra melhorar muito o código JavaScript, você pode refatorar depois.

Adicione estilos com CSS, evite ao máximo CSS inline, mas se for necessário use (menos trabalhoso, inclusive para manter)


ORIGINAL

Você poderia colocar o código completo do mapa?

Talvez olhando a documentação, pudéssemos indicar os estados que têm unidades com o número 1 e os que não têm unidades com 0, ou não informados. Assim, você poderia adicionar cor aos estados com valor 1 e deixar os estados com valor 0 em branco.

Ou melhor, você poderia indicar o número de unidades em cadas estado, assim os estados com maior número de unidades apareceriam com cor diferente dos que têm menos unidades ou não têm unidades.

Você só precisaria criar uma lista do tipo:

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

Você pode ver isto aqui: JSFiddle

E a documentação.

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .