Google map report and filling the color at region/site dynamic

Hi,
 
How to create a Google map report using Birt and filling the red/blue/green colours based on threshold/KPI value in region/site.
 
Ex: 2G/3G network Cell Availability (6pm-10pm) in particular region. We have to highlight the colour based Cell Availability KPI in selected region. Please find the sample output map format in the attachments.
 
We are using Birt Design professional Version: 4.4.0 and Build id: v20150623.
 
Thanks,
Srinivas

Find more posts tagged with

Comments

Clement Wong

It's easy to use the <a data-ipb='nomediaparse' href='http://www.actuate.com/download/whitepapers/BIRT-iHub-3-1-TSNF.pdf#page=7'>Custom Visualization Report Item</a> available starting with iHub 3.1 to integrate Google Maps.
 
Here are some DevShare examples:
<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/files/file/1120-ihub-31-custom-visualization-examples/'>Custom Visualization Examples using Google Maps and Leaflet, and others</a>
<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/files/file/1129-ihub-31-custom-visualization-google-map-with-heatmap-layer/'>Custom Visualization Example using Google Map and a Heat Map Layer</a>
 
Now, the question for you is how are regions defined? What is that a map of? Can you provide sample data?

Srinivas Yarra

Hi Clement,
 
Thank you for your reply.
 
Previous attached map is Divisions of Bangladesh. We want to highlight the previous week data in one particular district of one division as highlighted as red colour.
 
Thanks,
Srinivas

Srinivas Yarra

Hi Clement,
 
We got one sample example geo location report from iHub server sample applications. Here, we are able to highlighted the division based on wealth value. But not the district and thana etc. It is in built functionality of Birt.
 
We added below district information in data file, but chart/map is not considered these data.
Natore 293070 Bogra 273070
 
Is it possible to highlight the district or thana of Bangladesh with help of birt in-built functionality?
 
Please find the sample data and report which is working as expected upto division not district or thana in the attachments.
 
Thanks,
Srinivas

Clement Wong

The HTML5 map for Bangladesh that is provided with commercial BIRT has only 7 divisions. It's missing Mymensingh (based on <a data-ipb='nomediaparse' href='https://en.wikipedia.org/wiki/Divisions_of_Bangladesh).'>https://en.wikipedia.org/wiki/Divisions_of_Bangladesh).</a>
 
It looks like the latest version of FusionMaps (which the HTML5 maps are based) have 8 divisions (reference @ <a data-ipb='nomediaparse' href='http://www.fusioncharts.com/dev/maps/spec-sheets/bangladesh.html). '>http://www.fusioncharts.com/dev/maps/spec-sheets/bangladesh.html). </a>Please open a Support ticket to have them file a ticket so that it can be considered to be addressed in the next release. 
 
Both Natore and Bogra are districts, which the HTML5 maps does not provide that level of detail. 
 
There are 64 districts and then 111 subdistricts (upazilas / thanas). Reference @ <a data-ipb='nomediaparse' href='https://en.wikipedia.org/wiki/Administrative_geography_of_Bangladesh'>https://en.wikipedia.org/wiki/Administrative_geography_of_Bangladesh</a>
 
If we can get a KML or geoJSON of the districts, we can plot them using the Custom Visualization Report Item with Google Maps, Leaflet, or Highmaps from Highcharts.

Srinivas Yarra

Thank you Clement for your valuable information.
 
Kindly help me how can we generate google map report with custom visualization using bangladesh.csv in the attachments.
 
Thanks,
Srinivas

Clement Wong

That CSV has missing KML tags data in the geometry column, and it doesn't contain all 463 subdistricts.
 
From the CSV you attached, it appears that you got it from here (<a data-ipb='nomediaparse' href='https://www.google.com/fusiontables/DataSource?docid=10LQaBHN-8GD2hIAbgYLnzbDb2n0umBujesJbDA8#rows:id=1)?'>https://www.google.com/fusiontables/DataSource?docid=10LQaBHN-8GD2hIAbgYLnzbDb2n0umBujesJbDA8#rows:id=1</a>) ?
So this will be a little tricky, but it's doable.
 
If you use google.maps.KmlLayer, you are not able to change the properties of the <Polygon>s. There are utilities that provides KML parsing and manipulation, such as <a data-ipb='nomediaparse' href='https://github.com/geocodezip/geoxml3'>geoxml3</a>. Then, we can add a <PolyStyle> to change the <color>.
 
The other alternative is to use Google Fusion Table for both the data and the KML.
 
Google's example @
<a data-ipb='nomediaparse' href='https://developers.google.com/maps/documentation/javascript/examples/layer-fusiontables-styling'>https://developers.google.com/maps/documentation/javascript/examples/layer-fusiontables-styling</a>
 
Bangladesh example @
<a data-ipb='nomediaparse' href='https://jsfiddle.net/nc1dbf70/1/'>https://jsfiddle.net/nc1dbf70/1/</a>
 
I'm tied up at the moment, so I'm not able to provide a sample yet. Probably early next week.

Srinivas Yarra

Thank you Clement for your great help

.

Clement Wong

Oh, I thought of another way with Highmaps (from Highsoft, makers of Highcharts).
 
Do you own that Google FusionTable? It needs some clean up if you are going to proceed either way.
 
The "name" column has all "ID 0:" values. These values should be unique and the "name4" column values should be in its place. Can you clean up the data, or make a copy to clean up the data?
 
For demo purposes, I took 4 rows and cleaned it up. Converted the KML to geoJSON (via <a>https://ogre.adc4gis.com).</a>
 
Here's what we can do with a Custom Visualization with HighCharts' maps:
<a data-ipb='nomediaparse' href='http://jsfiddle.net/satakqcg/'>http://jsfiddle.net/satakqcg/</a>
 
Please let me know which map you prefer before I create a sample. Each provider has their own pricing plan:
 
Google Maps (free for Standard): <a data-ipb='nomediaparse' href='https://developers.google.com/maps/pricing-and-plans/'>https://developers.google.com/maps/pricing-and-plans/</a>
Highmaps (not free): <a data-ipb='nomediaparse' href='https://shop.highsoft.com/highmaps'>https://shop.highsoft.com/highmaps</a>
Here Maps (free Basic Plan for commercial): <a data-ipb='nomediaparse' href='https://developer.here.com/plans/api/consumer-mapping'>https://developer.here.com/plans/api/consumer-mapping</a>

Srinivas Yarra

Hi Clement,
 
Thank you for your reply.
 
Kindly provide sample report using google maps.
 
I have tried one custom visualization report. Please find the sample report in the attachments.
 
 
Thanks,
Srinivas

Clement Wong

Your attached example uses the older BIRT Online (Google) Maps library. It does not export to PDF/Excel/etc... unlike the Custom Visualization Report Item which does.
 
I have attached a report design that uses a Custom Visualization Report Item based on your CSV data. Your data doesn't show any particular value for the region so it's just a protoype of showing you how the Google Map polygon shape is populated. If you were to join the data with an associated value, you can just populate a column and adjust the color of the polygon accordingly.

Srinivas Yarra

Thank you so much Clement. It is working as expected. Thank you for your valuable time.