Overlaying an Image on Geochart by Google
Question
I'm currently working on a little map using the Geochart by Google:
https://developers.google.com/chart/interactive/docs/gallery/geochart
I use the Markers version to place dots on the map which will later be relative to user data. I would also like to place a small image overlay next to the marker. And for this I tried to use the Overlay doc for the google charts.
https://developers.google.com/chart/interactive/docs/overlays
However the picture does not line up at all with my marker. Is it that I'm missing something? for now the code is just on one page as it is just to test the concept.
<!DOCTYPE html>
<html>
<head>
<title>First Impression</title>
<style>
.chartWithMarkerOverlay {
position: relative;
width: 700px;
}
.overlay-text {
width: 200px;
height: 200px;
position: absolute;
top: 50px; /* chartArea top */
left: 200px; /* chartArea left */
}
.overlay-marker {
width: 50px;
height: 50px;
position: absolute;
top: 53px; /* chartArea top */
left: 528px; /* chartArea left */
}
</style>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['geochart']});
google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'City');
data.addColumn('date', 'Date');
data.addColumn('number', 'Marker Color');
data.addColumn('number', 'Marker Size');
// dates are added in the format "new Date(year, month, day)"
// month is zero-index (so January is 0, February is 1, etc
data.addRows([
['Berlin, Germany', new Date(2017, 4, 2), 1, 1],
['London, UK', new Date(2016, 3, 25), 2, 1],
['Moscow, Russia', new Date(2016, 4, 10), 3, 1],
['Ottawa, Canada', new Date(2015, 3, 20), 4, 1],
['Beijing, China', new Date(2012, 4, 22), 5, 1],
['Sao Paulo, Brazil', new Date(2012, 4, 7), 6, 1]
]);
// format the dates as "MMM dd, yyyy", eg. "Apr 20, 1865"
var dateFormatter = new google.visualization.DateFormat({pattern: 'MMM dd, yyyy'});
dateFormatter.format(data, 1);
// use a DataView to join city and date in the tooltips
var view = new google.visualization.DataView(data);
view.setColumns([0, 2, {
type: 'number',
label: 'Date',
calc: function (dt, row) {
return {
v: dt.getValue(row, 3),
f: dt.getFormattedValue(row, 1)
};
}
}]);
function placeMarker(dataTable) {
var cli = this.getChartLayoutInterface();
var chartArea = layoutInterface.getChartAreaBoundingBox();
// "Zombies" is element #5.
document.querySelector('.overlay-marker').style.top = Math.floor(layoutInterface.getYLocation(dataTable.getValue(5, 1))) - 50 + "px";
document.querySelector('.overlay-marker').style.left = Math.floor(layoutInterface.getXLocation(5)) - 10 + "px";
};
var chart = new google.visualization.GeoChart(document.querySelector('#chart_div'));
//var layoutInterface = chart.getChartLayoutInterface();
//google.visualization.events.addListener(chart, 'ready',placeMarker.bind(chart, data));
chart.draw(view, {
width: 600,
displayMode: 'markers',
colorAxis: {
colors: ['#ff2352', '#23ff52']
},
sizeAxis: {
maxSize: 4 // maximum marker radius in pixels
}
});
};
</script>
</head>
<body>
<div class="chartWithMarkerOverlay">
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div class="overlay-marker"> <img src="https://developers.google.com/chart/interactive/images/zombie_150.png" height="50"> </div>
</div>
</body>
</html>
1 answers
solution1
0 2017-09-11 18:18:40
GeoCharts are their own world, with their own rules. The other elements of the Google Visualization API only apply by sheer coincidence.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.