View regions with Google Geochart

Asked

Viewed 693 times

13

Is it possible to display the states grouped according to their regions and a tooltip according to the region rather than the state? For example:

  • Northern Region -> Acre, Amapá, Amazonas, Pará, Rondônia, Roraima, Tocantins
  • South region -> Paraná, Rio Grande do Sul, Santa Catarina
  • ...

The northern region when selected would address all listed states and a single description.

I use this code for states, however, I could not remove from the api something related to my doubt.

google.load('visualization', '1', {
        'packages': ['geochart']
    });

    google.charts.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
            ['Region','Views'],
            ['Acre', 0],
            ['Alagoas', 1],
            ['Amapá', 2],
            ['Amazonas', 3],
            ['Bahia', 4],
            ['Ceará', 1],
            ['Distrito Federal', 2],
            ['Espírito Santo', 3],
            ['Goiás', 0],
            ['Maranhão', 5],
            ['Mato Grosso', 0],
            ['Mato Grosso do Sul', 1],
            ['Minas Gerais', 2],
            ['Pará', 3],
            ['Paraíba', 4],
            ['Paraná', 3],
            ['Pernambuco', 2],
            ['Piauí', 4],
            ['Rio de Janeiro', 1],
            ['Rio Grande do Norte', 0],
            ['Rio Grande do Sul', 1],
            ['Rondônia', 5],
            ['Roraima', 2],
            ['Santa Catarina', 4],
            ['São Paulo', 3],
            ['Sergipe', 2],
            ['Tocantins', 0]
        ]);

        var options = {
            region: 'BR',
            resolution: 'provinces',
            colorAxis: {
                values: [0, 1, 2, 3, 4, 5],
                colors: ['red', 'black', 'purple', 'yellow', 'green', 'blue']
            },
            datalessRegionColor: 'transparent',
            legend: 'none'
        };

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));

        chart.draw(data, options);
    }
  • Maybe it is, you should do a search, for something that seeks south / northeast region for example: \"geometry" : {
 "bounds" : {
 "northeast" : {
 "lat" : -26.1965843,
 "lng" : -52.6890572
 },
 "southwest" : {
 "lat" : -26.1966978,
 "lng" : -52.6892667
 }: https://developers.google.com/maps/documentation/geocoding/start?hl=pt

  • Google has a query model that picks up through the radius, something similar to this in a query of your data or units that have coordinates: SELECT * , ( 3959 * acos( cos( radians('$latitude') ) * cos( radians( nr_lat ) ) * cos( radians( nr_long ) - radians('$longitude') ) + sin( radians('$latitude') ) * sin( radians( nr_lat ) ) ) ) AS distance FROM tabela_unidades WHERE status = 1 HAVING distance < 50

  • I believe what you want to do is "draw" the regions on the map. Google alone, as far as I know is not able to do this, but you can draw the region you want with polygons on the map. Google will have a map by region, separated, for example: https://www.google.com/maps/place/Regi%C3%A3o+Nordeste+do+Brasil/data=! 4m2! 3m1! 1s0x71604fcb37bd619:0x7d035aee7f1710c6? sa=x&ved=2ahUKEwiM2_XI3L_wAhVuI7kGHaMaC4MQ8gEwAHoECAYQAQ Working with polygons https://developers.google.com/maps/documentation/javascript/#Polygon You would have to have all points in a Matrix, and then generate

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.