Adding hyperlinks to maps was already addressed here :
amcharts drill-down map countries clickable
But I am wondering what I would need to change if I were to instead add clickable hyperlinks to the states or provinces within the countries in the 'drill down to countries' example?
https://www.amcharts.com/demos/drill-down-to-countries/
For instance, if I were to click on China and view the provinces, how would I assign a URL to its most southern province, Guangxi Zhuang, by using both the methods that you mentioned above?
The ID for that territory is "CN-GX", and can be found in this file :
https://github.com/amcharts/amcharts4-geodata/blob/master/dist/es2015/chinaHigh.js
Thanks for your help!
As indicated in the linked answer, you can set a url propertyField for the PolygonSeries so that it can apply the URL from the data provided to the series. You can combine this with the done event handler in the countrySeries (the drilled down map) to populate the series' data with the desired information based on the loaded geodata url. For example:
countrySeries.mapPolygons.template.propertyFields.url = "url";
countrySeries.geodataSource.events.on("done", function(ev) {
worldSeries.hide();
countrySeries.show();
if (ev.target.url.indexOf('china') != -1) {
countrySeries.data = [{
id: "CN-GX",
url: "https://en.wikipedia.org/wiki/Guangxi"
}];
}
});
Obviously you'll want to make this more robust in your application, but you get the idea.
Demo of your Guangxi scenario
Related
I am struggling with Javascript and Leaflet tryind to realize a dashboard.
I am trying to realize a choropleth map following this tutorial.
I need to change dynamically data display on map according to two select menu.
Selects:
<select class="c-select" id="methodSelected" name="methodSelected" required>
</select>
<select class="c-select" id="yearSelected" name="yearSelected" required>
</select>
I am holding changing on selects with
$("#methodSelected").change()
$("#yearSelected").change()
both are declared inside a
$(document).ready(function() {}
In this block I also declare the required variables and functions
var choroplethMap;
var q = d3_queue.queue();
q.defer(d3.json, "final2.geojson");
function ready(GeoJSON) {
...
makePlaceHolderChoroplethMap();
}
makePlaceHolderChoroplethMap is like that
function makePlaceHolderChoroplethMap() {
choroplethMap = L.map('choroplethContainer').setView([51.505, -0.09], 2);
L.tileLayer("url",
{
id: id,
attribution: attribution,
accessToken: accessToken
}
).addTo(choroplethMap);
Now when I will change values with the two select menu I want update map, so I put into $("#yearSelected").change() a call to makeChoroplethMap().
function makeChoroplethMap() {}
Inside this function I put code following tutorial previously linked.
The problem is that when I changed the values with that code I will re-add new layers over others previously added (Geojson, legend and control, as you can see)
So I tryed to leave only binding with data into makeChoroplethMap(),
geojson = L.geoJson(data,
{
style: style,
onEachFeature: onEachFeature
}
).addTo(choroplethMap);
but I recieve an error in info.addTo(choroplethMap); as t is undefined. I think because choroplethMap is not initialized. Map and select work, but controls are not displayed 'cause of error.
For now (I think I breaked something because yesteday worked) also geojson layer overstay over country also if I change values with select (the previously one putted does not go off also I change values).
So my question is: how can re-bind data without re-adding also legend and other control?
Add the legend and the GeoJSON layer once, when you're initializing the map. If you add them in makeChoroplethMap, you'll be re- adding them.
Then, use L.GeoJSON.clearLayers() and the
currently undocumented L.GeoJSON.addData() method to clear/add polygons.
I would like to visualise a number of variables per country on a world map. With Google Fusion Tables I set up the map. Now I would like to flip between the variables/layers (Var_A and Var_B) I would like to visualise with a dropdown menu. I followed the code the Guardian used in this article.
In this example the formatting of the info window in the FusionTable itself seems to simply show up but that doesn't work for me.
This is the fusion table: https://www.google.com/fusiontables/embedviz?viz=GVIZ&t=TABLE&q=select+col0%2C+col1%2C+col2%2C+col3%2C+col4%2C+col5%2C+col6%2C+col7+from+19I14XgRDOk7697iWA8XSukbYBBelNRymFOqjw_ru&containerId=googft-gviz-canvas
Clicking on the respective country I would like to display an info window, which shows a chart (bar chart for example) showing the values Var_A and Var_A1 when Layer 'Var_A' is selected and Var_B and Var_B1 when Layer 'Var_B' is selected.
I tried with the code example in Add a google chart to a infowindow using google maps api ....
function drawChart(marker) {
var node = document.createElement('div'),
infoWindow = new google.maps.InfoWindow(),
chart = new google.visualization.PieChart(node);
chart.draw(data, options);
infoWindow.setContent(node);
infoWindow.open(marker.getMap(),marker);
}
... but not even the static google chart worked for me.
So I really have three problems here:
1) show ANY chart in the info window
2) show a chart using data from the respective data row (country)
3) show a chart using data from the respective data row (country) and depending on the selected layer
I tried for a couple of days now with many unsuccessful ways and I am stuck - ready to leave google maps if I can not get it to work. This is the fiddle of the last thing that did at least show a map - I had to remove all event listeners again...
fiddle: http://jsfiddle.net/sytpp/ovfauhwb/
Any help greatly apprechiated!!
observe the click-event of the FusionTablesLayer, you will get there the values for the particular row:
google.maps.event.addListener(layer,'click',function(e){
//which values need to be drawn in the chart, A or B ?
var prefix=document.getElementById('selector').value,
//collect the data
row={title:e.row.Country.value,rows:[]};
//Var_A or Var_B
row.rows.push([prefix,Number(e.row[prefix].value)]);
//Var_A or Var_B1
row.rows.push([prefix+'1',Number(e.row[prefix+'1'].value)]);
//call drawChart by passing the collected data and clicked position as arguments
drawChart(row,e.latLng);
});
Now use the data(Note: you may initially set the content of the infoWindow to an empty div-element, there is no need to create a new node each time)
function drawChart(row,position) {
// Create the data table.
var data = new google.visualization.DataTable();
//set the scheme
data.addColumn('string', 'label');
data.addColumn('number', 'amount');
//add the data
data.addRows(row.rows);
// Set chart options
var options = {'title':row.title,
'width':300,
'height':200,
legend:'none'};
//assuming the infoWindow already has the content set to a DOMNode, e.g. a div
var chart = new google.visualization.BarChart(infoWindow.getContent());
chart.draw(data, options);
infoWindow.setOptions({map:map,position:position});
}
Note: you must set the suppressInfoWindows-option of the FusionTablesLayer to true, otherwise 2 InfoWindows will open, the built-in and the custom where the chart will be drawn.
Demo: http://jsfiddle.net/doktormolle/o1fyarnf/
I am using amCharts pie chart (v3) and I want to customize the pop up balloon that comes on mouseover on a slice: in addition to routine text like [[value]] [[percent]],
(a) a text that depends on the data item, and
(b) provide different click options to the user depending on data item. Every data row might not have these possibilities in which case the options should not appear.
For example, the pie chart might show wine consumption by country. On hover, I want to provide the user two different click options - one to see consumption by season if available, plus another to see consumption by age group if available.
Is it possible to do so in amCharts? I saw an exit for event clickSlice() here http://docs.amcharts.com/3/javascriptcharts/AmPieChart but nothing on how to modify the balloon text on the fly and add behavior to the balloon that comes on hover.
Will greatly appreciate your help.
For writing dynamic text in the balloon you can also do the folowing:
"graphs": [{
"balloonFunction": function(graphDataItem, graph) {
var value = graphDataItem.values.value;
if (value < 500) {
return value + "<br>(Little)";
} else {
return value + "<br>(A Lot)";
}
}
}],
You can use the following tags: [[title]], [[description]], [[value]] and [[percent]]. says the documentation.
I have used description for a custom field, it works fine.
You can add any custom field to your data provider and then display it in your balloon in the same way as value:
{value:15, title:"slice title", someCustomField:"some custom data"}
and then:
chart.balloonText = "[[someCustomField]]";
This is proving to be surprisingly difficult.
Suppose I have a grid that displays the name and size of files.
Information is loaded from a JSON file into an instance of dojo/store/Memory and then key attributes presented in the grid. How would I include a button on each row of the grid, that when clicked, displays more attributes about the file? These attributes are stored in the dojo/store/memory.
Right now I have a row like this in the grid:
{name:"More", field:"id", formatter: buttonFormatter, datatype:"string", noresize: true, width: "120px"}
And I attempted to pass the ID to a button using the formatter:
var buttonFormatter = function(inValue){
var newButton = new Button({
label: "Details",
onClick: function(inValue){
alert("More information about " + inValue + " goes here");
}
});
return newButton;
}
This doesn't work however.
The difficulties, as far as I can tell, are:
1) Associating each specific button with a specific file from the store
2) Giving the onClick javascript access to data from the store
Thanks for your help!
Tristan
You can use dojo-data-type-event attach point to do the operation. The corresponding method in the grid widget instance will show your more attributes in different style like tooltip,append,dialog and etc as you need
Not sure if this might helps you, but have a look at it.
In this example there's an onclick-Event on a button to zoom to the clicked row.
https://developers.arcgis.com/en/javascript/jssamples/fl_zoomgrid.html
Regards
I know from reading the assoc. Google group that there is not currently an event for clicking a specific point when using the marker map (only regionClick is implemented).
But was reading the docs and noticed the event Select which says:
select Fired when the user clicks a visual entity. To learn what has
been selected, call getSelection(). None
and
setSelection() none Selects the specified chart entities. Cancels any
previous selection. Selectable entities are regions with an assigned
value. A region correlates to a row in the data table (column index is
null). For this chart, only one entity can be selected at a time.
Extended description.
Would I be able to use this to get the entry that was clicked?
Example:
data.addRows([
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76],
['Naples', 959574, 117.27],
['Turin', 907563, 130.17],
['Palermo', 655875, 158.9],
['Genoa', 607906, 243.60],
['Bologna', 380181, 140.7],
['Florence', 371282, 102.41]
]);
Somehow get that Milan was clicked? How would I do this? Or am I reading this wrong?
Google API for Geomaps: http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html
Google Group stating there is no click event in Marker mode:
https://groups.google.com/forum/?fromgroups#!topic/google-visualization-api/K8uJoes8ZH0
You need call getSelection function when the select event is called. This function returns an array of objects. Each object have row and column attributes (if any). Use the row and the first column (0) to retrieve the label name (Rome, Milan, ...).
Example (http://jsfiddle.net/VtZQh/):
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection()[0];
var label = data.getValue(selection.row, 0);
alert(label);
});
Please refer to documentation to know more about getSelection.