GeoChart in Android
GeoChart in android is used to identify a region in Google map. There are three ways to identify the region .
- The region mode colors whole regions, such as countries, provinces, or states.
- The markers mode uses circles to designate regions that are scaled according to a value that you specify.
- The text mode labels the regions with identifiers (e.g., "Russia" or "Asia").
Let's see how to implement in android . Follow the bellow steps.
Step 1: Create Project
a) Open Android Studio
b) Go to File >New> New Project > Project Name > Next > Next > Next > Finish
Step 2: Create a html file "map.html" and add the bellow code .
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var newData = [['Country', 'Popularity']];
// call java function from javascript
AndroidNativeCode.getValueJson();
// this function is used to send data from java class to html page using javascript
function setJson(Jsonobject)
{
for (var n =0; n < Jsonobject.length; n++)
{
// put the data in DataTable
newData.push([Jsonobject[n].Country , parseInt(Jsonobject[n].Popularity) , '<div class="map-shape-one" onclick="call (\''+Jsonobject[n].Country+'\')"><p>'+Jsonobject[n].Country+'</p><p>'+Jsonobject[n].Popularity+'</p><p>--------</p><p>'+Jsonobject[n].Temperature+'</p></div>']);
}
}
function call(abc) {
document.getElementById('msg_call').innerHTML = 'You clicked '+abc;
}
function drawRegionsMap() {
var data;
data = new google.visualization.DataTable();
// determine the number of rows and columns.
var numRows = newData.length;
var numCols = newData[0].length;
// in this case the first column is of type 'string'.
data.addColumn('string', newData[0][0]);
// all other columns are of type 'number'.
for (var i = 1; i < numCols; i++)
data.addColumn('number', newData[0][i]);
data.addColumn({
type: 'string',
role: 'tooltip',
'p': {'html': true}
});
// now add the rows.
for (var i = 1; i < numRows; i++)
data.addRow(newData[i]);
var options = {
colorAxis: {colors: ['#FCA33B','#F18C34','#E4761F','#D15F19']},
legend: 'none',
tooltip: {isHtml: true}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
google.charts.load('visualization', '1', {packages: ['geochart'], callback: drawRegionsMap});
</script>
<style>
.map-shape-one {
background-color: #e87603;
border-radius: 50px 50px 50px 0px;
display: inline-block;
height: auto;
margin: auto;
max-width: 100%;
min-height: 40px;
min-width: 70px;
padding: 8px 15px 8px 20px;
width: auto;
}
.map-shape-one p {
margin: 0px;
text-align: center;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.map-shape-one p:first-child {
font-weight: bold;
text-transform: uppercase;
}
</style>
</head>
<body >
<div id="regions_div" style="width: 400px; height: 500px;"></div>
<div id="msg_call" ></div>
</body>
</html>
Step 3 : Layout Design
open activity_main.xml file and add the bellow code
<WebView xmlns:android="http://schemas.android.com/apk/res /android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
Step 4 : Create a class "MainActivity.java" which extends Activity class and add the bellow code.
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
public class MainActivity extends Activity {
WebView view;
@SuppressLint("SetJavaScriptEnabled")
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
view = (WebView)findViewById(R.id.webview);
view.getSettings().setJavaScriptEnabled(true);
// this function is used to access javascript from html page
view.addJavascriptInterface(new JavaScriptInterface(this), "AndroidNativeCode");
// load file from assets folder
view.loadUrl("file:///android_asset/map.html");
}
public class JavaScriptInterface {
Context mContext;
JavaScriptInterface(Context c) {
mContext = c;
}
// method to send JsonArray to HTML
@JavascriptInterface
public void getValueJson() throws JSONException
{
final JSONArray jArray = new JSONArray();
JSONObject jObject = new JSONObject();
jObject.put("Country", "Germany");
jObject.put("Popularity","100");
jObject.put("Temperature","513");
jArray.put(jObject);
jObject = new JSONObject();
jObject.put("Country", "Brazil");
jObject.put("Popularity","200");
jObject.put("Temperature","112");
jArray.put(jObject);
jObject = new JSONObject();
jObject.put("Country", "India");
jObject.put("Popularity","300");
jObject.put("Temperature","417");
jArray.put(jObject);
jObject = new JSONObject();
jObject.put("Country", "Australia");
jObject.put("Popularity","400");
jObject.put("Temperature","819");
jArray.put(jObject);
System.out.println(jArray.toString());
// send value from java class to html javascript function
runOnUiThread(new Runnable() {
@Override
public void run() {
view.loadUrl("javascript:setJson(" + jArray + ")");
}
});
}
}
}
Output :
Comments
Post a Comment