I have a simple scatterplot with two datasets: active and passive:
const data = {
"datasets": [{
"label": "Active",
"sentences": [
"A1",
"A2",
"A3"
],
"data": [
[
"0.4340433805869016",
"0.12813240157479788"
],
[
"-0.39983629799199083",
"0.12125799115087213"
],
[
"-0.04289228113339527",
"0.10106119377169194"
]
],
"borderColor": "#43a047",
"backgroundColor": "#7cb342"
},
{
"label": "Passive",
"sentences": [
"P1",
"P2",
"P3"
],
"data": [
[
"0.4295487808020268",
"0.19271652809947026"
],
[
"-0.4438451670978469",
"-0.08848766134414247"
],
[
"-0.10789534989054622",
"0.08013654263956245"
]
],
"borderColor": "#1e88e5",
"backgroundColor": "#039be5"
}
],
"labels": []
};
new Chart(document.getElementById("sentences"), {
type: "scatter",
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: "top",
},
tooltip: {
callbacks: {
label: ctx => ctx.dataset.sentences[ctx.dataIndex]
}
}
}
}
});
(https://jsfiddle.net/br5dhpwx/)
Currently this renders fine as is:
However, I want to draw a line between the corresponding data points on mouseover. I.e. A1-P1, A2-P2, A3-P3, etc.
It should look something like this:
I tried to use the setHoverStyle event, but, so far, wasn't successful.
You can use a custom plugin for this:
const EXPANDO_KEY = 'customLinePlugin';
const data = {
"datasets": [{
"label": "Active",
"sentences": [
"A1",
"A2",
"A3"
],
"data": [
[
"0.4340433805869016",
"0.12813240157479788"
],
[
"-0.39983629799199083",
"0.12125799115087213"
],
[
"-0.04289228113339527",
"0.10106119377169194"
]
],
"borderColor": "#43a047",
"backgroundColor": "#7cb342"
},
{
"label": "Passive",
"sentences": [
"P1",
"P2",
"P3"
],
"data": [
[
"0.4295487808020268",
"0.19271652809947026"
],
[
"-0.4438451670978469",
"-0.08848766134414247"
],
[
"-0.10789534989054622",
"0.08013654263956245"
]
],
"borderColor": "#1e88e5",
"backgroundColor": "#039be5"
}
],
"labels": []
};
const plugin = {
id: "customLine",
afterInit: (chart) => {
chart[EXPANDO_KEY] = {
index: null
}
},
afterEvent: (chart, evt) => {
const activeEls = chart.getElementsAtEventForMode(evt.event, 'nearest', {
intersect: true
}, true)
if (activeEls.length === 0) {
chart[EXPANDO_KEY].index = null
return;
}
chart[EXPANDO_KEY].index = activeEls[0].index;
},
beforeDatasetsDraw: (chart, _, opts) => {
const {
ctx
} = chart;
const {
index
} = chart[EXPANDO_KEY];
if (index === null) {
return;
}
const dp0 = chart.getDatasetMeta(0).data[index]
const dp1 = chart.getDatasetMeta(1).data[index]
ctx.lineWidth = opts.width || 0;
ctx.setLineDash(opts.dash || []);
ctx.strokeStyle = opts.color || 'black'
ctx.save();
ctx.beginPath();
ctx.moveTo(dp0.x, dp0.y);
ctx.lineTo(dp1.x, dp1.y);
ctx.stroke();
ctx.restore();
}
}
new Chart(document.getElementById("sentences"), {
type: "scatter",
data: data,
options: {
responsive: true,
plugins: {
customLine: {
dash: [2, 2],
color: 'red',
width: 2
},
legend: {
position: "top",
},
tooltip: {
callbacks: {
label: ctx => ctx.dataset.sentences[ctx.dataIndex]
}
}
}
},
plugins: [plugin]
});
<body>
<canvas id="sentences"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.2/chart.js"></script>
</body>
EDIT:
For some reason stack snippet in creation works but doesnt like so itself, so here is a fiddle link: https://jsfiddle.net/Leelenaleee/btux41dz/
Related
I do have simple groupBy query in my prisma which looks like this:
const groupBy = await prisma.referral.groupBy({
by: ['recommenderId'],
_sum: {
points: true,
},
});
What I am looking for is the way to sort by this _sum value.
The current response is:
{
"groupBy": [
{
"_sum": {
"points": 20000
},
"recommenderId": 3
},
{
"_sum": {
"points": 19000
},
"recommenderId": 2
},
{
"_sum": {
"points": 34000
},
"recommenderId": 1
}
]
}
What I need is to get is:
{
"groupBy": [
{
"_sum": {
"points": 34000
},
"recommenderId": 1
},
{
"_sum": {
"points": 20000
},
"recommenderId": 3
},
{
"_sum": {
"points": 19000
},
"recommenderId": 2
},
]
}
Based on documentation (https://www.prisma.io/docs/concepts/components/prisma-client/filtering-and-sorting#sorting) I tried something like this:
const groupBy = await prisma.referral.groupBy({
by: ['recommenderId'],
_sum: {
points: true,
},
orderBy: [
{
_sum: 'desc',
},
],
});
But with code I'm getting error:
Argument _sum: Got invalid value 'desc' on prisma.groupByReferral.
Provided String, expected ReferralSumOrderByAggregateInput
You can use _sum on different fields at the same time, so you also need to provide field name that you want to sort on:
const groupBy = await prisma.referral.groupBy({
by: ['recommenderId'],
_sum: {
points: true,
},
orderBy: [
{
_sum: {
// Add `points` key here
points: 'desc'
}
},
],
});
I'm creating a spreadsheet in Node.js environment in shared folder using service account with Google Sheets API v.4 in few steps:
Create spreadsheet itself in shared folder with "Can Edit" permission for service account.
Inserting some data and performing some text formats using spreadsheet ID received as callback from previous step.
Inserting chart using as income data the data inserted in prevoius step.
As the result I have a spreadsheet with expected result (text data and horizontal bar chart on same sheet). But when I'm trying to send it on printer, or download as PDF-file - chart area becomes completely invisible. I didn't find any option in official documentation about possible chart visibility during printing or something like this. And when I'm replacing this created chart with manually created one - everything is ok, I can print it and export to PDF.
So, what is the problem? Am I missing something? Or it's some bug?
index.js
const fs = require('fs');
const { google } = require('googleapis');
const express = require('express');
const bodyParser = require("body-parser");
const app = express();
const PORT = 3000;
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.listen(PORT, () => {
console.log(`Server started at http://localhost:${PORT}`)
})
const SCOPES = ['https://www.googleapis.com/auth/drive', 'https://www.googleapis.com/auth/spreadsheets'];
const FOLDER_ID = '1xG3xHhrucB4AGLmnd8T2TmCyqhmPux5Q';
var timeStamp = new Date().getTime();
console.log(`timeStamp at startup = ${timeStamp}`);
const auth = new google.auth.GoogleAuth({
keyFile: 'credentials.json',
scopes: SCOPES
});
process.env.HTTPS_PROXY = 'http://10.5.0.20:3128';
const sheets = google.sheets({
version: 'v4',
auth: auth,
proxy: 'http://10.5.0.20:3128'
});
const drive = google.drive({
version: 'v3',
auth: auth,
proxy: 'http://10.5.0.20:3128'
});
function createFileName() {
const now = new Date();
let date = String(now.toISOString().slice(0, 10));
let hours = String(now.getHours()).padStart(2, "0");
let minutes = String(now.getMinutes()).padStart(2, "0");
let seconds = String(now.getSeconds()).padStart(2, "0");
let humanDate = date.replaceAll('-', '.');
humanDate = `${humanDate}_${hours}-${minutes}-${seconds}`;
return humanDate;
}
async function saveFileLocally(filePath, data) {
fs.writeFile(filePath, JSON.stringify(data), error => {
if (error) {
console.error(error);
return;
}
});
return true;
}
app.get("/check", (req, res) => {
res.send('server is online...');
});
app.post("/motivation", async (req, res) => {
if(!req.body) return res.sendStatus(400);
try {
const prizv = req.body.prizv;
const name = req.body.name;
const father = req.body.father;
const sex = req.body.sex;
const age = req.body.age;
const factors = req.body.factors;
const testName = 'motivation';
const clientData = { prizv: prizv, name: name, father: father, sex: sex, age: age, factors: factors, testName: testName };
const fileName = `${createFileName()}_${prizv}`;
const filePath = `files/${testName}/${fileName}.txt`;
const isSaved = await saveFileLocally(filePath, clientData);
if (isSaved) {
console.log(`file is saved locally....`);
const sheetID = await createSheetToGoogleDIsk(clientData, fileName);
res.send(sheetID);
}
} catch (error) {
console.log(error)
}
});
async function createSheetToGoogleDIsk(clientData, fileName) {
const file = fileName;
var sheetsMetadata = {
name: file,
mimeType: 'application/vnd.google-apps.spreadsheet',
parents: [FOLDER_ID]
};
const res2 = drive.files.create({
resource: sheetsMetadata,
fields: 'id'
}, function (err, file) {
if (err) {
console.error(err);
} else {
console.log('SheetID: ', file.data.id);
const gSheetID = file.data.id;
pasteDataToGoogleSheet(clientData, gSheetID);
insertChartToGoogleSheet(gSheetID);
return file.data.id;
}
});
}
async function insertChartToGoogleSheet(spreadsheetId) {
spreadsheetId = spreadsheetId;
let requests = [];
// set font size for whole Sheet as 14
requests.push({
"repeatCell": {
"range": {
"sheetId": 0,
"startRowIndex": 0,
"endRowIndex": 100,
},
"cell": {
"userEnteredFormat": {
"textFormat": {
"fontSize": 13,
},
},
},
"fields": "userEnteredFormat.textFormat.fontSize"
},
});
// set header text format as Bold and 18 pt
requests.push({
"repeatCell": {
"range": {
"sheetId": 0,
"startRowIndex": 0,
"endRowIndex": 2,
},
"cell": {
"userEnteredFormat": {
"textFormat": {
"fontSize": 18,
"bold": true
},
},
},
"fields": "userEnteredFormat(textFormat)"
},
});
// set subheader text format as Bold and 15 pt
requests.push({
"repeatCell": {
"range": {
"sheetId": 0,
"startRowIndex": 3,
"endRowIndex": 4,
},
"cell": {
"userEnteredFormat": {
"textFormat": {
"fontSize": 15,
"bold": true
},
},
},
"fields": "userEnteredFormat(textFormat)"
},
});
// set client data as Bold
requests.push({
"repeatCell": {
"range": {
"sheetId": 0,
"startRowIndex": 5,
"endRowIndex": 10,
"startColumnIndex": 3,
"endColumnIndex": 5
},
"cell": {
"userEnteredFormat": {
"textFormat": {
"fontSize": 13,
"bold": true
},
},
},
"fields": "userEnteredFormat(textFormat)"
},
});
// set 1st column width as 20px
requests.push({
"updateDimensionProperties": {
"range": {
"sheetId": 0,
"dimension": "COLUMNS",
"startIndex": 0,
"endIndex": 1
},
"properties": {
"pixelSize": 20
},
"fields": "pixelSize"
}
});
// set 4st column width as 150px
requests.push({
"updateDimensionProperties": {
"range": {
"sheetId": 0,
"dimension": "COLUMNS",
"startIndex": 3,
"endIndex": 4
},
"properties": {
"pixelSize": 150
},
"fields": "pixelSize"
}
});
// set bold factors Values
requests.push({
"repeatCell": {
"range": {
"sheetId": 0,
"startRowIndex": 33,
"endRowIndex": 45,
"startColumnIndex": 4,
"endColumnIndex": 5
},
"cell": {
"userEnteredFormat": {
"textFormat": {
"fontSize": 13,
"bold": true
},
},
},
"fields": "userEnteredFormat(textFormat)"
},
});
requests.push({
"addChart": {
"chart": {
"chartId": 1,
"spec": {
"titleTextFormat": {
},
"basicChart": {
"chartType": "BAR",
"axis": [
{
"position": "BOTTOM_AXIS",
},
{
"position": "LEFT_AXIS",
}
],
"domains": [
{
"domain": {
"sourceRange": {
"sources": [
{
"sheetId": 0,
"startRowIndex": 33,
"endRowIndex": 45,
"startColumnIndex": 1,
"endColumnIndex": 2
}
]
},
},
}
],
"series": [
{
"series": {
"sourceRange": {
"sources": [
{
"sheetId": 0,
"startRowIndex": 33,
"endRowIndex": 45,
"startColumnIndex": 4,
"endColumnIndex": 5
}
]
}
},
"targetAxis": "BOTTOM_AXIS"
}
],
},
},
"position": {
"overlayPosition": {
"anchorCell": {
"sheetId": 0,
"rowIndex": 11,
"columnIndex": 1
},
"offsetXPixels": 0,
"offsetYPixels": -7,
"widthPixels": 800,
"heightPixels": 450
},
},
"border": {
"color": {
"red": 1,
"green": 1,
"blue": 1,
"alpha": 0
},
}
}
}
});
const batchUpdateRequest = { requests };
sheets.spreadsheets.batchUpdate({
spreadsheetId,
resource: batchUpdateRequest,
}, (err, result) => {
if (err) {
// Handle error
console.log(err);
return false
} else {
console.log(`${result.updatedCells} chart inserted`);
return spreadsheetId
}
});
}
async function pasteDataToGoogleSheet(clientData, sheetId) {
ecxelID = sheetId;
let data1 = [
["Тест «Мотиваційний особистісний профіль»"], [""], ["Результати тестування"], [""], ["Прізвище"], ["Імя"], ["По-батькові"], ["Вік"], ["Стать"]
];
let data2 = [
[clientData.prizv], [clientData.name], [clientData.father], [clientData.age], [clientData.sex]
];
let factorsLabels1_6 = [
["1. Матеріальна винагорода:"], ["2. Комфортні умови:"], ["3. Структурованість роботи:"], ["4. Соціальні контакти:"], ["5. Довірливі стосунки:"], ["6. Визнання:"]
];
let factors1_6 = [
[clientData.factors.factor1], [clientData.factors.factor2], [clientData.factors.factor3], [clientData.factors.factor4], [clientData.factors.factor5], [clientData.factors.factor6]
];
let factorsLabels7_12 = [
["7. Досягнення мети:"], ["8. Влада і вплив:"], ["9. Відсутність рутини:"], ["10. Креативність:"], ["11. Самовдосконалення і розвиток:"], ["12. Цікава і корисна діяльність:"]
];
let factors7_12 = [
[clientData.factors.factor7], [clientData.factors.factor8], [clientData.factors.factor9], [clientData.factors.factor10], [clientData.factors.factor11], [clientData.factors.factor12]
];
const data = [{
range: "B2:B10",
values: data1,
},
{
range: "D6:D10",
values: data2,
},
{
range: "B34:B39",
values: factorsLabels1_6,
},
{
range: "E34:E39",
values: factors1_6,
},
{
range: "B40:B45",
values: factorsLabels7_12,
},
{
range: "E40:E45",
values: factors7_12,
}
];
const resource = {
data,
valueInputOption: 'RAW',
};
sheets.spreadsheets.values.batchUpdate({
spreadsheetId: ecxelID,
resource: resource,
}, (err, result) => {
if (err) {
// Handle error
console.log(err);
return false
} else {
console.log(`${result.updatedCells} cells data inserted`);
return spreadsheetId;
}
});
}
I could confirm your situation. In this case, how about the following modification?
From:
"offsetXPixels": 0,
"offsetYPixels": -7,
"widthPixels": 800,
"heightPixels": 450
To:
"offsetXPixels": 0,
"offsetYPixels": 0, // Modified
"widthPixels": 800,
"heightPixels": 450
or
"widthPixels": 800,
"heightPixels": 450
When the values of offsetXPixels and offsetYPixels are the negative values, it was found that such an issue occurs.
When the values of offsetXPixels and offsetYPixels are 0, these values are not required to be included because of the default value.
Note:
When I tested the above modification, I could confirm that your issue could be removed.
Reference:
EmbeddedObjectPosition
I'm trying to make an horizontal histogram with y labels on top of each bar with the really nice libray echarts. Here is an example:
Here is where I am with this jsfiddle https://jsfiddle.net/795f84o0/6/ :
Echarts documentation is really good but I did not found a way to put these labels (sankey, funnel, gauge....) on top on each bar :/
Do you have any idea how I can do it? Thank you for your help!
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var builderJson = {
"all": 10887,
"charts": {
"map": 3237,
"lines": 2164,
"bar": 7561,
"line": 7778,
"pie": 7355,
"scatter": 2405,
"candlestick": 1842,
"radar": 2090,
"heatmap": 1762,
"treemap": 1593,
"graph": 2060,
"boxplot": 1537,
"parallel": 1908,
"gauge": 2107,
"funnel": 1692,
"sankey": 1568
},
"components": {
"geo": 2788,
"title": 9575,
"legend": 9400,
"tooltip": 9466,
"grid": 9266,
"markPoint": 3419,
"markLine": 2984,
"timeline": 2739,
"dataZoom": 2744,
"visualMap": 2466,
"toolbox": 3034,
"polar": 1945
},
"ie": 9743
};
option = {
xAxis: [{
type: 'value',
max: builderJson.all,
}],
yAxis: [{
data: Object.keys(builderJson.charts),
axisLabel: {
show: false,
},
},
{
data: Object.keys(builderJson.charts),
axisLabel: {
show: true,
},
},
],
series: [{
type: 'bar',
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
}]
};
option && myChart.setOption(option);
All right, I got it after two hours...
Just posting a screenshot to show the result:
The fiddle and the code :
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var builderJson = {
"all": 100,
"charts": {
"pie": 1,
"scatter": 1,
"candlestick": 1,
"radar": 2,
"heatmap": 3,
"treemap": 6,
"graph": 7,
"boxplot": 7,
"parallel": 8,
"gauge": 9,
"funnel": 15,
"sankey": 30
},
};
option = {
xAxis: [{
type: 'value',
max: builderJson.all,
axisLabel: {
show: false,
},
splitLine: {
show: false
}
},
],
yAxis: [{
data: Object.keys(builderJson.charts),
axisLabel: {
show: false,
},
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false,
}
},
],
series: [{
type: 'bar',
stack: 'chart',
barCategoryGap: 30,
barWidth: 20,
label: {
position: [0, -14],
formatter: '{b}',
show: true
},
itemStyle: {
borderRadius: [0, 2, 2, 0],
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
},
{
type: 'bar',
stack: 'chart',
barCategoryGap: 30,
barWidth: 20,
itemStyle: {
color: 'whitesmoke'
},
label: {
position: 'insideRight',
formatter: function(params) { return 100 - params.value + '%'},
show: true
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.all - builderJson.charts[key];
})
}
]
};
option && myChart.setOption(option);
I wanted to know how to add rows of data to the master detail table but not using an external json file and just write the row records inline via the JS
Anyone have any idea on how to go about this
https://www.ag-grid.com/documentation/javascript/master-detail/
var gridOptions = {
columnDefs: [
// group cell renderer needed for expand / collapse icons
{ field: 'name', cellRenderer: 'agGroupCellRenderer' },
{ field: 'account' },
{ field: 'calls' },
{ field: 'minutes', valueFormatter: "x.toLocaleString() + 'm'" },
],
defaultColDef: {
flex: 1,
},
masterDetail: true,
detailCellRendererParams: {
detailGridOptions: {
columnDefs: [
{ field: 'callId' },
{ field: 'direction', minWidth: 150 },
{ field: 'number' },
{ field: 'duration', valueFormatter: "x.toLocaleString() + 's'" },
{ field: 'switchCode', minWidth: 150 },
],
defaultColDef: {
flex: 1,
},
},
getDetailRowData: function (params) {
// simulate delayed supply of data to the detail pane
setTimeout(function () {
params.successCallback(params.data.callRecords);
}, 1000);
},
},
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
// I dont want to use the external json file
agGrid
.simpleHttpRequest({
url: 'https://www.ag-grid.com/example-assets/master-detail-data.json',
})
.then(function (data) {
gridOptions.api.setRowData(data);
});
});
Set the rowData field on the gridOptions like so:
var gridOptions = {
columnDefs: [
// group cell renderer needed for expand / collapse icons
{ field: 'name', cellRenderer: 'agGroupCellRenderer' },
{ field: 'account' },
{ field: 'calls' },
{ field: 'minutes', valueFormatter: "x.toLocaleString() + 'm'" },
],
defaultColDef: {
flex: 1,
},
masterDetail: true,
detailCellRendererParams: {
detailGridOptions: {
columnDefs: [
{ field: 'callId' },
{ field: 'direction' },
{ field: 'number', minWidth: 150 },
{ field: 'duration', valueFormatter: "x.toLocaleString() + 's'" },
{ field: 'switchCode', minWidth: 150 },
],
defaultColDef: {
flex: 1,
},
},
getDetailRowData: function (params) {
params.successCallback(params.data.callRecords);
},
},
onFirstDataRendered: onFirstDataRendered,
rowData: myData
};
In this instance, myData would look like this:
var myData = [
{
name: 'Nora Thomas',
account: 177000,
calls: 24,
minutes: 25.65,
callRecords: [
{
name: 'susan',
callId: 555,
duration: 72,
switchCode: 'SW3',
direction: 'Out',
number: '(00) 88542069',
},
],
},
];
Demo.
I have a geoJSON objects and I want to route between waypoints on my geoJSON file.
{
"type":"FeatureCollection",
"generator":"JOSM",
"bbox":[
23.4668,
58.9198,
23.6412,
58.974
],
"features":[
{
"type":"Feature",
"properties":{
"wheelchair":"yes",
"smoothness":"bad",
"surface":"crushed stones"
},
"geometry":{
"type":"Point",
"coordinates":[
23.53359252,
58.95034587858
]
}
},
{
"type":"Feature",
"properties":{
"wheelchair":"yes",
"addr:housename":"Saue kohvik",
"amenity":"pub",
"name":"Saue kohvik"
},
"geometry":{
"type":"Point",
"coordinates":[
23.5361382,
58.9473236
]
}
},
{
"type":"Feature",
"properties":{
"wheelchair":"yes",
"smoothness":"intermediate",
"highway":"footway"
},
"geometry":{
"type":"LineString",
"coordinates":[
[
23.5410658,
58.9406213
],
[
23.5410936,
58.9408252
],
[
23.541092,
58.9408358
],
[
23.5410706,
58.9410896
],
[
23.5410448,
58.9412609
],
[
23.541028,
58.9413309
],
[
23.5409993,
58.9414512
],
[
23.5408984,
58.9416477
],
[
23.5408677,
58.9416962
],
[
23.5407571,
58.9418706
],
[
23.5405886,
58.9421204
],
[
23.5405302,
58.9422071
],
[
23.5403894,
58.9423888
],
[
23.5401636,
58.9426413
],
[
23.5400953,
58.9426593
],
[
23.5399336,
58.9428447
],
[
23.5399287,
58.9428504
],
[
23.5399434,
58.9428895
],
[
23.5394702,
58.9434341
],
[
23.5394296,
58.943468
],
[
23.5389324,
58.9439879
],
[
23.5384256,
58.9445103
],
[
23.5381597,
58.9447992
],
[
23.5377425,
58.9452314
],
[
23.5375449,
58.9454551
]
]
}
},
{
"type":"Feature",
"properties":{
"wheelchair":"yes",
"highway":"footway"
},
"geometry":{
"type":"LineString",
"coordinates":[
[
23.5408677,
58.9416962
],
[
23.541045,
58.9417267
],
[
23.5412157,
58.9417564
]
]
}
}
]
}
And my question is: Can I route between places inside my file "routing only on these LineStrings where properties are "wheelchair":"yes"and "highway":"footway". And routing cant use LineStrings where property is only "highway":"footway".
Is it possible when I'm using mapbox direction service?
I made my own openstreetmap with my custom properties, but know I'm stuck, I don't know how do route in that map, because routing can only call out on these ways (linestrings and points) where one property is wheelchair="yes".
You could use L.mapbox.FeatureLayer to render your featurecollection in combination with a filter:
var featureLayer = L.mapbox.featureLayer('data.geo.json').addTo(map);
var filter = function (feature) {
// Check if feature is a linestring
if (feature.geometry.type == 'Linestring') {
// Check if has property wheelchair and value is yes
if (feature.properties.hasOwnProperty('wheelchair') &&
feature.properties.wheelchair === 'yes') {
// Check if has property highway and value is footway
if (!feature.properties.hasOwnProperty('highway') ||
feature.properties.highway === 'footway') {
// highway absent or highway is footway
return true;
} else {
// highway found and value is not footway
return false;
}
} else {
// Wheelchair absent or value isn't yes
return false;
}
} else {
// Not a linestring
return true;
}
}
featureLayer.on('ready', function () {
featureLayer.setFilter(filter);
});
Reference for L.mapbox.featureLayer: https://www.mapbox.com/mapbox.js/api/v2.1.5/l-mapbox-featurelayer/