I am displaying a GeoChart the state level. When configuring with the Brazil region works, as you can see below, but not with the state code, for example: BR-SP
google.load('visualization', '1', { 'packages': ['geochart', 'table'] }); google.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['State', 'Views'], ['BR-AL', 300], ['BR-SP', 300], ['BR-RJ', 400] ]); var geochart = new google.visualization.GeoChart(document.getElementById('chart_div')); var options = { region: 'BR', resolution: 'provinces', width: 800, height: 600, colorAxis: { colors: ['#acb2b9', '#2f3f4f'] } }; geochart.draw(data, options); }<script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://www.google.com/jsapi"></script> <div id="chart_div"></div>A nível de estado:
google.load('visualization', '1', { 'packages': ['geochart', 'table'] }); google.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['State', 'Views'], ['Sao Paulo', 300], ['Campinas', 300], ]); var geochart = new google.visualization.GeoChart(document.getElementById('chart_div')); var options = { region: 'BR-SP', width: 800, height: 600, colorAxis: { colors: ['#acb2b9', '#2f3f4f'] } }; geochart.draw(data, options); }<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chart_div"></div>2 Answers
Answers 1
It seems that you can't divide a country region (e.g. São Paulo) in subregions (e.g. Campinas) using options.displayMode: 'regions' but you can show them as markers with options.displayMode: 'markers'
google.load('visualization', '1', { 'packages': ['geochart', 'table'] }); google.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['State', 'Views'], ['São Paulo', 300], ['Campinas', 200], ['Araras', 400], ['Buri', 100], ]); var geochart = new google.visualization.GeoChart(document.getElementById('chart_div')); var options = { region: 'BR', displayMode: 'markers', resolution: 'provinces', width: 800, height: 600, colorAxis: { colors: ['#acb2b9', '#2f3f4f'] } }; geochart.draw(data, options); }<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chart_div"></div>Answers 2
The problem comes from your options.region
var options = { region: 'BR-SP', width: 800, height: 600, colorAxis: { colors: ['#acb2b9', '#2f3f4f'] } } Region subcodes don't seem to be allowed. According to the Configuration Options, the region code can only be
The area to display on the map. (Surrounding areas will be displayed as well.) Can be either a country code (in uppercase ISO-3166 format), or a one of the following strings: ...
If you look at the Wikipedia Article List of Country Codes, BR-SP is not included as it's a subdivision and doesn't have a numerical code attached (https://en.wikipedia.org/wiki/ISO_3166-2:BR).
If you change the region to BR it'll work, but unfortunately It doesn't look like you can zoom in any further.
Check out Leaflet Maps (an open sourced alternative). You can use GeoJSON to set the regions and then do your own zoom level.
0 comments:
Post a Comment