I'm using azure map.
What's happening is that I have 2 layers. A layer that have Circles and a layer with polygons.
I have a functionality in which a popup appear when I click on a specific circle.
The issue occur when I add the polygon layer after the circle layer.
It's like the polygon layer is being drawn on top of the circle layer. In which it prevent the popup from appearing when clicking on the circle.
Here's how I'm adding the polygon layer:
showFetchedResultOnMap(facilities) {
const self = this;
if (facilities && facilities.length > 0) {
self.cleanRestrictionLayer();
//Create a data source and add it to the map.
self.datasource = new atlas.source.DataSource();
self.map.sources.add(self.datasource);
//Add a data set to the data source.
self.CleanMap();
//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
self.map.sources.add(datasource);
self.map.imageSprite.add(self.chosenCategory, 'assets/svg/' + self.chosenCategory + '.svg')
.then(function () {
facilities.forEach(cat => {
datasource.add(new atlas.data.Feature(new atlas.data.Point([cat.longitude, cat.latitude])));
});
//Add a layer for rendering point data as symbols.
self.map.layers.add(new atlas.layer.SymbolLayer(datasource, self.chosenCategory, {
iconOptions: {
//Pass in the id of the custom icon that was loaded into the map resources.
image: self.chosenCategory,
//Optionally scale the size of the icon.
size: 0.1
}
}));
});
}
}
Anyone have an Idea about how I can fix this??
I'm not seeing a polygon layer in the code you provided. That said, when you add layers to the map, the order in which you add them is the z-index by default. Last one added goes on top. That said, when adding the layer using the map.layers.add function, there is a second parameter you can add in which can be another layer or layer id. When this is specified the layer you are adding will be inserted below that second specified layer. Here is the doc on this: https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.layermanager?view=azure-maps-typescript-latest#add-layer---layer----string---layer-
Here is a short example:
map.layers.add(new atlas.layers.BubbleLayer(datasource, 'myBubbles'));
map.layers.add(new atlas.layers.PolygonLayer(datasource, 'myPolygons'), 'myBubbles');
How to set infinite scroll/Pagination in the details grid. I'm using server side model for master and want to use infinite model for details. How to setup details grid detailCellRendererParams with infinite scroll row Data
Define in detailGridOptions infinite row model type & its properties:
detailGridOptions: {
...
rowModelType: 'infinite',
// enable pagination
pagination: true,
// fetch 15 rows per at a time
cacheBlockSize: 15,
// display 10 lines per page
paginationPageSize: 10,
// how many rows to seek ahead when unknown data size.
cacheOverflowSize: 2,
// how many concurrent data requests are allowed.
// default is 2, so server is only ever hit with 2 concurrent requests.
maxConcurrentDatasourceRequests: 2,
// how many rows to initially allow scrolling to in the grid.
infiniteInitialRowCount: 1,
// how many pages to hold in the cache.
maxBlocksInCache: 2
}
The infiniteDatasource presents the way you can retrieve the data for detail part:
getDetailRowData: (params) => {
//Get grid api regarding current row
var detailGrid = gridOptions.api.getDetailGridInfo(params.node.id);
//Simulation of server
var server = new FakeServer(params.data.callRecords);
//Preparation of data
var datasource = new infiniteDatasource(server, params);
detailGrid.api.setDatasource(datasource);
}
Please note that regarding the documantation:
If you are an enterprise user you should consider using the Server-side row model instead of the infinite row model. It offers the same functionality with many more features.
Setting of Server-side row model should be similar to Infinite one.
Working example
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);
}
I'm not if the title explains what I need to achieve or not but I can change it later if some has a better suggestion.
I'm using KO to manage a whole bunch of data on the client side.
Here's the basic.
I have a list of training sessions
Each has a list of training session parts
Each training session parts are referencing items kept in other lists. For example, I have a list of activities (ex: biking, running, swimming, etc.)
Each activity is identified by an ID which is used in the training session parts to identify which activity was used for a particular session.
Now, all these list are stored as observable arrays, and each member of the lists are observables (I use KO.Mapping to map the JSON coming from the server)
When I display a training session in my UI, I want to display various information coming from various lists
Duration: 1h30
Activity: Biking
Process: Intervals
The only information I have in order to link the training session to its component is an ID which is fine. What I'm not sure is how to data-bind the name (text) of my activity to a <p> or <div> so that the name will change if I edit the activity (by using some functionality of the application).
The training session only has the ID to identify the activity, so I don’t know how to bind the name of the activity based on its ID.
Hopefully this makes senses and someone can help me figure it out. I found lots of info on how to bind to observable array but nothing addressing ID and linked information.
The easiest way would probably be to make your own constructors and link the data by hand. You can use mapping if you really want to, but you'll basically have to do the same manual linking, only in a more verbose format.
This is the fiddle with the example implementation: http://jsfiddle.net/aKpS9/3/
The most important part of the code is the linking, you have to take care to create the activity objects only once, and use the same objects everywhere, as opposed to creating new activity objects for the parts.
var TrainingSession = function(rawData, actualActivities){
var self = this;
self.name = ko.observable(rawData.name);
self.parts = ko.observableArray(ko.utils.arrayMap(rawData.parts, function(rawPart){
return ko.utils.arrayFirst(actualActivities(), function(ac){
return ac.ID() == rawPart.ID;
})
}));
}
var Activity = function(rawData){
var self = this;
self.ID = ko.observable(rawData.ID);
self.name = ko.observable(rawData.name);
}
var MainVM = function(rawData){
var self = this;
//first create an array of all activities
self.activities = ko.observableArray(ko.utils.arrayMap(rawData.activities, function(rawAc){
return new Activity(rawAc);
}));
self.trainingSessions = ko.observableArray(ko.utils.arrayMap(rawData.trainingSessions, function(session){
return new TrainingSession(session, self.activities);
}));
}
I have a an "Asset" backbone model that has a custom attribute called "selected". Its custom in the sense that it is not part of the object on the server side. I use to represent which of the list of assets the user has currently selected.
var Asset = Backbone.Model.extend({
defaults: {
selected: false
},
idAttribute: "AssetId"
});
This model is part of a backbone collection that I fetch periodically to get any changes from the server.
The problem I have is that every time I fetch the collection, the collection is doing a reset (I can tell by the listening for the reset event) and hence the value of the selected attribute is wiped out by the data coming in from the ajax request.
The backbone.js documentation seems to suggest that there is a intelligent merge that will solve this problem. I believe I'm doing this in my fetch methods
allAssets.fetch({ update: true ,cache: false});
And I have also set the "idAttribute" field in the model so that the ids of the object coming in can be compared with the objects in the collection.
The way I have solved this is by writing my own Parse method in my collection object
parse: function (response) {
// ensure that the value of the "selected" for any of the models
// is persisted into the model in the new collection
this.each(function(ass) {
if (ass.get("selected")) {
var newSelectedAsset = _.find(response, function(num) { return num.AssetId == ass.get("AssetId"); });
newSelectedAsset.selected = true;
}
});
return response;
}
Is there a better way to do this?
Collection.update (introduced in Backbone 0.9.9) does indeed try to merge existing models, but does so by merging all set attributes in the new model into the old model. If you check Backbone source code, you'll see
if (existing || this._byCid[model.cid]) {
if (options && options.merge && existing) {
existing.set(model.attributes, options);
needsSort = sort;
}
models.splice(i, 1);
continue;
}
All attributes, including defaults, are set, that's why your selected attribute is reset to false. Removing the default value for selected will work as intended: compare http://jsfiddle.net/nikoshr/s5ZXN/ to http://jsfiddle.net/nikoshr/s5ZXN/3/
That said, I wouldn't rely on a model property to store my app state, I would rather move it to a controller somewhere else.