Develop Reference

Switching programmatically between layers in Leaflet on Angular

I have to display layers which do not support all zoom-levels in Leaflet on Angular. These are WMTS-Layers loaded from external servers.
See example below:
Zoom-Level 12
Zoom-Level 13
How can i switch programmatically to a Layer which supports the corresponding zoom-layer to keep a usage-flow?
It's not very easy for users to understand clearly that the layers are supportet not in every zoom-level.
The layer is use is configured as followed:
var baseMap = new L.TileLayer(
'https://wmts.url.tld/{z}/{x}/{y}.png',
{
maxZoom: 15,
attribution: '© source',
});

Listen on the zoomend event and add / remove the layer if zoom is greater / lower.
var MIN_LAYER_ZOOM_LEVEL = 14; // Zoom level until layer is visible
map.on('zoomend',(e)=>{
var currentZoom = map.getZoom();
if(currentZoom >= MIN_LAYER_ZOOM_LEVEL){
baseMap.addTo(map)
}else{
baseMap.removeFrom(map)
}
});

Display distance on x-axis of google maps elevation chart

Does any of you know of a simple way to add distance on the X-axis of the Google maps elevation chart example (https://developers.google.com/maps/documentation/javascript/examples/elevation-paths)?
I have seen several entries here on SO about this but none has a working answer referring to a JSFiddle or similar.
Thanks in advance for any input!
Regards
/Peter

I created a simplified solution that uses the code provided by Google accompanied with some minor modifications that assign distance to each column based on the total distance divided by the amount of columns. See modified excerpt from the sample code below;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Distance');
data.addColumn('number', 'Height');
for (var i = 0; i < elevations.length; i++) {
data.addRow([Math.round(((totalDistance/amountOfColumns)*i)) + " m",elevations[i].elevation]);
}
// Draw the chart using the data within its DIV.
chart.draw(data, {
height: 150,
legend: 'Height profile',
titleY: 'Height (m)',
titleX: 'Distance (m)',
hAxis: {
title: 'Distance (m)',
},
vAxis: {
title: 'Height (m)'
},
colors: ['#000000']
});
}

Google Visualization Animation when chart loads for the first time

I would like to know if I can apply an animation to the charts on the first time it draws?
And not only when a change of data happens?
THanks!

UPDATED ANSWER
Google has updated chart options and added the option to animate the chart on the first time it draws.
So the only thing you have to do is psecify it in the options like that:
var options = {
animation: {
duration: 1500,
startup: true //This is the new option
}
};
So you dont have to load an empty chart on the beggining or to do any other hack.
DEMO

The Chart should be rendered before you can apply your animation which is showing transition from one state to another. You can either change the data or change the chart options to create the transition and its animation.
To be able to show animation on the first time, you can simply create an empty (no data) chart, and then add your data to the chart, to show the data animation.
var options = {
animation:{
duration: 1000,
easing: 'out',
}
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
var chart = new google.visualization.ColumnChart...
chart.draw(data, options);
// Adding data
data.addRow(['V', 200]);

Try something like this http://jsfiddle.net/h7mSQ/163/. The way to do this is to render chart with zero values and then set values as required and draw chart again. Don't forget to set minimal and maximal value for (in this example) vertical axis.
function drawChart() {
var option = {title:"Yearly Coffee Consumption in our company",
width:600, height:400,
animation: {duration: 1000, easing: 'out',},
vAxis: {title: "Cups of coffee", minValue:0, maxValue:500},
hAxis: {title: "Year"}};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
data.addRow(['2003', 0]);
data.addRow(['2004', 0]);
data.addRow(['2005', 0]);
// Create and draw the visualization.
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, option);
data.setValue(0, 1, 400);
data.setValue(1, 1, 300);
data.setValue(2, 1, 400);
chart.draw(data, option);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

Google charts not showing axis labels

This is not for the image charts. I have the following code that generates the right chart but the labels don't show. The chart div is in an other div that is used as a tab on my page. When I run the function when the tab containing the chart is not selected, the chart appears with no labels. When I run the function with the tab selected, the labels appear.
drawChart()
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Weeks');
data.addColumn('number', 'Indice');
data.addRows(arrIndice1);
var options = {
width:"900",
height:"500",
legend: "none",
title: 'Indice 1',
chartArea:{left:20,top:50,width:"85%",height:"75%"}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

chartArea options seem to cover the axis labels when they increase the chart size. Try removing the chartArea:{left:20,top:50,width:"85%",height:"75%"} part.

Updating Google Visualization API with <div> button

Fellow Coders,
I'm trying to update a Google Visualization API that has already been populated with data. Here's the background:
The user get's to choose several options from drop down menu's. After which, the user may select to update the Google API from a button.
Do I need a QueryWrapper function, initiated through the button onlick, to update the Google API?
HTML code:
<div class="css_button_example" value="UpdateGraph" onclick="showUser()"><span>Update Graph</span></div>
In the above button code, showUser() is a JavaScript function that pulls an MySQL query through PHP - the result is json_encoded back into the Google API JavaScript code. Do I need another JavaScript function to update the Google API?
Here's the Google API code:
google.load("visualization", "1", {packages:["columnchart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Cluster');
data.addColumn('number', 'Loans');
data.addColumn('number', 'Lines');
/* create for loops to add as many columns as necessary */
var len = (encoded_cluster_name.length)-27; // encoded_line_volume.length;
data.addRows(len);
for(i=0; i<len; i++) {
var lines = (encoded_line_volume[i])/100000;
var loans = (encoded_loan_volume[i])/100000;
data.setValue(i, 0, ' '+encoded_cluster_name[i]+' ');
data.setValue(i, 1, loans);
data.setValue(i, 2, lines);
}
/*********************************end of loops***************************************/
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 600, height: 300, is3D: true, title: 'Prospect Population', legend: 'right'});
}
Any suggestions on how I can augment the Google API code to update the graph? Maybe a QueryWrapper?