I am using Google's Street View Static Image API. It works great, but I am wondering if it is possible to get meta data for the images I am saving, specifically the date. Is there anyway to know the date of the static image?
Thanks,
Lee
Yes, you can get the image date using the Google Maps Street View Service in JavaScript.
Briefly, you would need to go through the usual setup steps to get Google Maps working on your page, then you would do something akin to:
var sv = new google.maps.StreetViewService();
var berkeley = new google.maps.LatLng(37.869085,-122.254775);
sv.getPanoramaByLocation(berkeley, 50, function(data) {
console.log(data.imageDate);
});
data.imageDate will contain the date in YYYY-MM format.
You can use StreetViewService's both getPanoramaById and getPanoramaByLocation methods to obtain this data. Please see here.
var panoramaOptions = {
position: streetViewLocation,
pov: {
heading: 0,
pitch: 5,
zoom: 1
},
visible: true,
addressControl: false,
imageDateControl:true
};
Related
I have a chart that displays people's predictions on events from a scale of 0-100. To accompany their submissions, I ask for a comment explaining why they said what they said. This is a crowdsourcing project so it would benefit other users if they could see what other users are thinking. Their predictions are stored in objects, like:
forecast: {
certainty: 0.6,
comments: "I said 60% because I think that this is pretty likely",
date: "Tue Feb 22 2022"
}
And these forecasts are displayed like this:
But I would love it if when hovering over the data in the chart, you could also see the comment:
In the picture above, that data is stored in the following format:
let allData = {
label: "AllData",
data: [],
showLine: false,
borderWidth: 0,
pointRadius: 4
}
and then the actual elements inside that data array is stored like:
let myForecast = {
x: dateOfForecast (date variable),
y: myActualForecast (double variable)
}
My thinking was that there would be a way to add a "Description" variable to that myForecast object to accompany the x and the y values, like this:
let myForecast = {
x: dateOfForecast (date variable),
y: myActualForecast (double variable),
description: "I said 60% because I think that this is pretty likely"
}
but as far as I can tell there is nothing in the APIs allowing this. I would love to be wrong!
Thank you in advance, I hope my question makes sense and is clear.
Thanks to some wider reading, I found this answer from another post: https://stackoverflow.com/a/70387861/12464559
Where the accepted answer suggests using the callback provided by ChartJS (the options object for your chart > plugins > tooltip > callback).
I console.log()'d the context object that it passes into the callback, thus allowing me to find where in that context object the x, y and description values for each datapoint were stored (they were in the context variable > raw). I then appended the description like this:
tooltip: {
console.log(context);
let label = context.database.label || '';
if (label) {
label += context.raw.description;
}
return label;
}
Hope this helps anyone in the future! Full credit to toki in the post shared above!
I know that checkbox is a relatively new feature in Google Sheets, so I'm trying to find a way to automatically create checkboxes in cells.
So far, I haven't found a reference regarding this in Google Apps Script documentation.
Currently I'm doing it manually, but any suggestion using script will be much appreciated.
UPDATE(April 2019)
You can now directly insertCheckboxes(or removeCheckboxes) on a Range or RangeList without any workarounds. You can also change the checked value/unchecked value using alternate method signatures found in the documentation.
Snippet:
SpreadsheetApp.getActive()
.getRange('Sheet2!A2:A10')
.insertCheckboxes();
I'm not sure when they did it, but they've added this now.
Use class DataValidationBuilder's requireCheckbox() method. Example:
function setCheckboxes() {
// Assumes there's only one sheet
var sheet = SpreadsheetApp.getActiveSheet();
// This represents ALL the data
var dataRange = sheet.getDataRange();
/* Get checkbox range from sheet data range. Assumes checkboxes are on the
left-most column
*/
var dataRangeRow = dataRange.getRow();
var dataRangeColumn = dataRange.getColumn();
var dataRangeLastRow = dataRange.getLastRow();
var checkboxRange = sheet.getRange(
dataRangeRow,
dataRangeColumn,
dataRangeLastRow
);
var enforceCheckbox = SpreadsheetApp.newDataValidation();
enforceCheckbox.requireCheckbox();
enforceCheckbox.setAllowInvalid(false);
enforceCheckbox.build();
checkboxRange.setDataValidation(enforceCheckbox);
}
You want to create the checkbox in the cells of spreadsheet using the scripts. If my understanding is correct, how about this workaround? Unfortunately, the Class SpreadsheetApp has no methods for creating the checkbox yet. (When such methods are tried to be used, the error occurs.) So I would like to propose to create it using Sheets API.
When I saw ConditionType of dataValidation, the document of BOOLEAN says
The cell's value must be TRUE/FALSE or in the list of condition values. Supported by data validation. Renders as a cell checkbox. ...
From this, I could understand how to create the checkbox using Sheets API. The following script is a sample script. This creates 6 checkboxes to "A1:C3". When you use this script, please enable Sheets API at Advanced Google Services and API console as follows.
Enable Sheets API v4 at Advanced Google Services
On script editor
Resources -> Advanced Google Services
Turn on Google Sheets API v4
Enable Sheets API v4 at API console
On script editor
Resources -> Cloud Platform project
View API console
At Getting started, click Enable APIs and get credentials like keys.
At left side, click Library.
At Search for APIs & services, input "sheets". And click Google Sheets API.
Click Enable button.
If API has already been enabled, please don't turn off.
If now you are opening the script editor with the script for using Sheets API, you can enable Sheets API for the project by accessing this URL https://console.cloud.google.com/apis/library/sheets.googleapis.com/
Sample script :
In this sample script, the checkboxes are created to "A1:C3" of Sheet1. Please use this script as the container-bound script.
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheetId = ss.getSheetByName("Sheet1").getSheetId();
var resource = {"requests": [
{
"repeatCell": {
"cell": {"dataValidation": {"condition": {"type": "BOOLEAN"}}},
"range": {"sheetId": sheetId, "startRowIndex": 0, "endRowIndex": 3, "startColumnIndex": 0, "endColumnIndex": 3},
"fields": "dataValidation"
}
},
{
"updateCells": {
"rows": [
{"values": [{"userEnteredValue": {"boolValue": true}}, {"userEnteredValue": {"boolValue": false}}, {"userEnteredValue": {"boolValue": false}}]},
{"values": [{"userEnteredValue": {"boolValue": true}}, {"userEnteredValue": {"boolValue": true}}, {"userEnteredValue": {"boolValue": false}}]},
{"values": [{"userEnteredValue": {"boolValue": true}}, {"userEnteredValue": {"boolValue": true}}, {"userEnteredValue": {"boolValue": true}}]}
],
"start": {"rowIndex": 0, "columnIndex": 0, "sheetId": sheetId},
"fields": "userEnteredValue"
}
}
]};
Sheets.Spreadsheets.batchUpdate(resource, ss.getId());
Flow :
dataValidation is set using repeatCell.
boolValue is set using updateCells.
Result :
Note :
This is a simple sample script. So please modify this for your environment.
When the methods of the Class SpreadsheetApp for creating the checkbox can be used, I think that the following sample script might be able to be used.
Script for Class SpreadsheetApp
At June 22, 2018, this script returns an error of the server error yet.
var rule = SpreadsheetApp.newDataValidation().withCriteria(SpreadsheetApp.DataValidationCriteria.CHECKBOX, ["TRUE", "FALSE"]).build();
SpreadsheetApp.getActiveSheet().getRange("A1").setDataValidation(rule);
References :
ConditionType
Advanced Google Services
Sheets API v4
If I misunderstand your question, I'm sorry.
The checkbox is the recently added Data Validation criterion. Interestingly enough, when I attempt to call the 'getDataValidation()' method on the range that contains checkboxes, the following error is thrown:
var rule = range.getDataValidation();
We're sorry, a server error occurred. Please wait a bit and try again.
In the meantime, you can work around this by placing a single checkbox somewhere in your sheet and copying its Data Validation to the new range. For example, if "A1" is the cell containing the checkbox and the target range consists of a single column with 3 rows:
var range = sheet.getRange("A1"); //checkbox template cell
var targetRange = sheet.getRange(rowIdex, colIndex, numOfRows, numOfCols);
range.copyTo(col, SpreadsheetApp.CopyPasteType.PASTE_DATA_VALIDATION);
var values = [["true"], ["false"], ["false"]];
targetRange.setValues(values);
Short answer
Add the checkbox from the Google Sheets UI, then use one of the copyTo
methods of Class Range.
Explanation
The Google Apps Script Spreadsheet service doesn't include a methods for everything that could be done through the Google Sheets user interface. This is the case of the Insert > Checkbox which is a pretty new feature.
Even the Record macro feature can't do this. The following was recorded one momento ago
/** #OnlyCurrentDoc */
function InsertCheckbox() {
var spreadsheet = SpreadsheetApp.getActive();
spreadsheet.getRange('A1').activate();
/*
* Added to show the missing Insert > Checkbox step
*/
spreadsheet.getRange('B1').activate();
spreadsheet.getRange('A1').copyTo(spreadsheet.getActiveRange(), SpreadsheetApp.CopyPasteType.PASTE_NORMAL, false);
};
NOTE: If you don't want to pass all the cell properties (borders, formulas, background, etc. instead of SpreadsheetApp.CopyPasteType.PASTE_NORMAL use SpreadsheetApp.CopyPasteType.PASTE_DATA_VALIDATION.
Related Q on Stack Overflow
Google Sheets: Add a CheckBox with a script
function onEdit() {
var cell = SpreadsheetApp.getActive().getRange('A1');
var array =['☐','☑'];
// var rule = SpreadsheetApp.newDataValidation().requireValueInList(['☐','☑']).build();
var rule = SpreadsheetApp.newDataValidation().requireValueInList(array, false).build()
cell.setDataValidation(rule);
var valor = array[1];
// Logger.log(valor);
if(cell.getValue() == valor){
cell.offset(0, 1).setValue("Aprobado");
} else{
cell.offset(0, 1).setValue("Reprobado");
}
}
Easy:
//There are two ways, using Range or using current cell or sheet or similar
//First is using current cell
function VoF() {
var spreadsheet = SpreadsheetApp.getActive();
spreadsheet.getCurrentCell().offset(1, 0, 499, 1).setDataValidation(SpreadsheetApp.newDataValidation()
.setAllowInvalid(true)
.setHelpText('TRUE or FALSE')
.requireCheckbox() //if you customize this is possible that you dont get the boxes and the verification data could fail,so keep them standar with TRUE and FALSE
.build());
};
//Second is using Spreedsheet ranges
function myFunction() {
var spreadsheet = SpreadsheetApp.getActive();
spreadsheet.getRange('G1:G11').activate();
spreadsheet.getRange('G1:G11').setDataValidation(SpreadsheetApp.newDataValidation()
.setAllowInvalid(false)
.requireCheckbox()
.build());
};
I agree that you have to workaround to create a checkbox. Another way maybe is to create a dropdown list.
function myFunction() {
var cell = SpreadsheetApp.getActive().getRange('A1');
var rule = SpreadsheetApp.newDataValidation().requireValueInList(['☐','☑']).build();
cell.setDataValidation(rule);
}
Am new to angularjs/googlecharts and learning on the job. I've the following code in my controller which renders the piechart initially and has no issues.
There is a slider directive, which when changed (basically a date range slider), should update the columnchart with new data. But I don't know how to update the piechart data. I do get the new data from the backend without any problems though.
Here is the initialization code in controller:
$scope.piechart = {};
$scope.piechart.type ='PieChart';
piechartData = response.data.piechart;
var piechartoptions = {
'min-width':800,
'max-width':320,
'is3D':true,
'pieSliceText': 'label',
'pieSliceTextStyle': {fontSize: 10},
'chartArea' : { left: 30, top: 60 },
'backgroundColor': {fill:'transparent'},
'legend': {'textStyle':{'color': 'white',
'fontSize': 12},
'position': "top",
'maxLines':10,
'alignment':"start"},
'height':500
};
$scope.piechart.data = new google.visualization.DataTable(piechartData);
$scope.piechart.options = piechartoptions;
$scope.piechart.formatters = {};
In the directive (which is used in the html that the above controller's scope resides in), I've access to the chart like the following:
scope.$parent.piechart
So in a very naive way i did this but to no avail:
scope.$parent.piechart.data = new google.visualization.DataTable(response.data.piechart)
TIA for all the help.
I bumped into this issue today. An easy quick fix is to simply write
this.chartData = Object.assign([], this.chartData) to reassign to the exposed dataset property into your component so it triggers change detection.
More information from this issue in a different library:
valor-software/ng2-charts#959 (comment)
Hope this helps weary travellers :)
To achieve this you need to create watch on your slider model so when it gets change you need to update your pie chart model so it'll automatically update.
Watch
$scope.$watch('sliderModel',function(n,o) {
// update your new pie chart data here, I think you need to update below model only
$scope.piechart.data = new google.visualization.DataTable(piechartData);
}
It just an example. You have to update it with new data for pie chart.
Proper Angular way to use google chart
You should use google-chart directives to plot pie chart so this kind of problems will be solved automatically.
Have a look here - Angular-google-chart
I'm trying to find a map solution that is possible to highlight and click on various regions, one region would be Africa. I'm also looking for a solution that will work well with Angularjs.
I thought the Google Visualization Chart might be suitable. This allows the selection of regions using the region codes listed on the site.
I've tried adding a few regions, the only one I could get working was Australia (AU), the following don't work for me:
['Europe', 150],
['Western Asia', 145],
['Asia', 142],
['Africa', 002]
Here's the jsfiddle I'm using to test this.
Am I doing something wrong or is there an issue with the chart itself?
Thank you.
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Region Code', 'Continent', 'Popularity'],
['142', 'Asia', 200],
['150', 'Europe', 300],
['019', 'Americas', 400],
['009', 'Oceania', 600],
['002', 'Africa', 700]
]);
var options = {
resolution: 'continents'
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
This jsfiddle shows how to do it:
I have a problem with WMS overlays in OpenLayers. Basically I just want to add data from a WMS server as an overlay and not as a base layer. This appears to be a very simple problem but I am unable to find a solution. If I set singleTile to true, the overlays appears over the whole map but you cannot zoom in. If it is set to false, only one tile is displayed at every zoom level. If I set it as a base layer, it works just fine but I really want the overlay solution so I can make it transparent and see the map behind it.
Demonstration of the problem, with a different dataset but the issue is the same:
http://jsfiddle.net/adbnC/2/
I think it might be related to some coordinate system issues but I am no expert so any help is appreciated.
Thanks a lot!
Here is the relevant section of the code that does not work as expected:
var pop_layer = new OpenLayers.Layer.WMS("Population Density in 2000",
"http://sedac.ciesin.columbia.edu/geoserver/ows", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
transparent: true
}, {
opacity: 0.5,
isBaseLayer: false,
// Setting single tile to true will kind of work but than one
// cannot zoom in any more.
singleTile: false
}
);
I can't quite get what exactly is wrong here, but I think it has something to do with messed up reference systems. Here is a workaround:
Modified Jsfiddle.net
I changed the map projection to spherical mercator and now it seems to work fine for me:
var mapOptions = {
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
units: "m"
};
map = new OpenLayers.Map('map', mapOptions);
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var pop_layer = new OpenLayers.Layer.WMS("Population Density in 2000", "http://sedac.ciesin.columbia.edu/geoserver/ows", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
transparent: true
}, {
opacity: 0.5,
isBaseLayer: false
});
map.addLayer(osm);
map.addLayer(pop_layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
Let me know if that helped!