I am trying to make my map zoom in to a cluster when the user clicks the cluster. The map is built with mapbox gl and Vue-Mapbox. I understand I can use the getClusterExpansionZoom() method to do so, but the first step is detecting which cluster the user clicked on. My #click handler does not detect clicks. Why not? What must I change? Cheers
<template>
<div>
<MglMap>
<MglGeojsonLayer
class="mgl-clusters-layer"
layerId="clustersLayerId"
:layer="clustersLayer"
:source="clustersSource"
sourceId="clustersSourceId"
#click="clickedCluster()"
/>
</div>
</template>
These variations also do not work...
#click="clickedCluster"
#map-click="clickedCluster()"
#click.prevent="clickedCluster"
Here is my event handler...
methods: {
clickedCluster() {
console.log("clicked cluster");
}
}
Here is the definition of the clustersSource object
clustersSource: {
type: "geojson",
cluster: true,
clusterRadius: 25,
clusterProperties: { sum: ["+", ["get", "docCount"]] },
data: {
type: "FeatureCollection",
features: []
}
},
data.features array of simple geojson points
Here is the definition of clustersLayer...
clustersLayer: {
id: util.getRandomValue(),
type: "circle",
filter: ["has", "point_count"],
paint: {
"circle-color": "#6a0dad",
"circle-opacity": 0.4,
"circle-stroke-color": "#6a0dad",
"circle-stroke-width": 1,
"circle-radius": [
"step",
["get", "sum"],
8,
100,
10,
1000,
12,
10000,
14,
100000,
16,
1000000,
18
]
}
},
This works...
//Make map zoom to a districts cluster when user clicks the cluster
this.map.on("click", "clustersLayerId", function(e) {
var features = $this.map.queryRenderedFeatures(e.point, {
layers: ["clustersLayerId"]
});
$this.map.easeTo({
center: features[0].geometry.coordinates,
zoom: $this.map.getZoom() + 1
});
});
You also have to specify the id in the clustersLayer object...
clustersLayer: {
id: "clustersLayerId",
type: "circle",
filter: ["has", "point_count"],
paint: {
"circle-color": "#6a0dad",
"circle-opacity": 0.4,
"circle-stroke-color": "#6a0dad",
"circle-stroke-width": 1,
"circle-radius": [
"step",
["get", "sum"],
8,
100,
10,
1000,
12,
10000,
14,
100000,
16,
1000000,
18
]
}
},
Related
I am trying to use multiple ramda functions on this example:
const data = {
"tableItems": [
{
"id": 1,
"name": "1",
"startingPoint": true,
"pageNumber": 15,
"nodes": [
100,
200
]
},
{
"id": 2,
"name": "2",
"startingPoint": true,
"pageNumber": 14,
"nodes": [
300,
400
]
}
],
"nodes": [
{
"id": 100,
"tableItemId": 1,
"content": "test"
},
{
"id": 200,
"tableItemId": 1,
"content": "test"
},
{
"id": 300,
"tableItemId": 2,
"content": "test"
},
{
"id": 400,
"tableItemId": 2,
"content": "test"
}
]
}
I am trying to create new JSON which should look like this where nodes array should be filled with another ramda function:
const newJSON = [
{
"id": "chapter-1",
"name": "2",
"nodes": []
},
{
"id": "chapter-2",
"name": "1",
"nodes": []
}
]
I started with:
let chapters = [];
let chapter;
const getChapters = R.pipe(
R.path(['tableItems']),
R.sortBy(R.prop('pageNumber')),
R.map((tableItem) => {
if(tableItem.startingPoint) {
chapter = {
id: `chapter-${chapters.length+1}`,
name: tableItem.name,
nodes: []
}
chapters.push(chapter);
}
return tableItem
})
)
But how to combine getNodes which needs access to the whole scope of data?
I tried pipe but something is not working.
Example:
const getNodes = R.pipe(
R.path(['nodes']),
R.map((node) => {
console.log(node)
})
)
R.pipe(
getChapters,
getNodes
)(data)
Any help would be appreciated.
We could write something like this, using Ramda:
const {pipe, sortBy, prop, filter, map, applySpec, identity, propEq, find, __, addIndex, assoc} = R
const transform = ({tableItems, nodes}) => pipe (
filter (prop ('startingPoint')),
sortBy (prop ('pageNumber')),
map (applySpec ({
name: prop('name'),
nodes: pipe (prop('nodes'), map (pipe (propEq ('id'), find (__, nodes))), filter (Boolean))
})),
addIndex (map) ((o, i) => assoc ('id', `chapter-${i + 1}`, o))
) (tableItems)
const data = {tableItems: [{id: 1, name: "1", startingPoint: true, pageNumber: 15, nodes: [100, 200]}, {id: 2, name: "2", startingPoint: true, pageNumber: 14, nodes: [300, 400]}], nodes: [{id: 100, tableItemId: 1, content: "test"}, {id: 200, tableItemId: 1, content: "test"}, {id: 300, tableItemId: 2, content: "test"}, {id: 400, tableItemId: 2, content: "test"}]}
console .log (transform (data))
.as-console-wrapper {max-height: 100% !important; top: 0}
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.min.js"></script>
First we filter the tableItems to include only those with startingPoint of true, then we sort the result by pageNumber. Then for each, we create name and nodes elements, based on the original data and on a function that maps the node values to the element in the initial nodes property. Finally, for each one, we add the chapter-# id element using addIndex (map).
This works, and is not horrible. It would take a fair bit of work to make this entirely point-free, I believe. And I don't find it worthwhile... especially because this Ramda version doesn't add anything to a simpler vanilla implementation:
const transform = ({tableItems, nodes}) =>
tableItems
.filter (x => x .startingPoint)
.sort (({pageNumber: a}, {pageNumber: b}) => a - b)
.map (({name, nodes: ns}, i) => ({
id: `chapter-${i + 1}`,
name,
nodes: ns .map (n => nodes .find (node => node .id == n)) .filter (Boolean)
}))
const data = {tableItems: [{id: 1, name: "1", startingPoint: true, pageNumber: 15, nodes: [100, 200]}, {id: 2, name: "2", startingPoint: true, pageNumber: 14, nodes: [300, 400]}], nodes: [{id: 100, tableItemId: 1, content: "test"}, {id: 200, tableItemId: 1, content: "test"}, {id: 300, tableItemId: 2, content: "test"}, {id: 400, tableItemId: 2, content: "test"}]}
console .log (transform (data))
.as-console-wrapper {max-height: 100% !important; top: 0}
This works similarly to the above except that it assigns the id at the same time as name and nodes.
I'm a founder of Ramda and remain a big fan. But it doesn't always add anything to vanilla modern JS.
You can use a curried function. Because the pipe will always pipe the result of the previous function call into the next function. You can use R.tap if you want to step over.
However, I guess you want to have the data object and the output of the previous function call both in your getNodes function. In that case you can use a curried function, where you pass the response of the previous function as last parameter.
const getNodes = R.curryN(2, function(data, tableItemList){
console.log(tableItemList) // result of previous function call
return R.pipe(
R.path(['nodes']),
R.map((node) => {
console.log('node:', node);
})
)(data)
})
And use it like:
R.pipe(
getChapters,
getNodes(data)
)(data)
I would split the solution into two steps:
Prepare the tableItems and nodes to the required end state using R.evolve - filter, sort, and then use R.toPairs the tableItems to get an array that includes the index and the object. Group the nodes by id so you can pick the relevant nodes by id in the combine step.
Combine both properties to create the end result by mapping the new tableItems, and using R.applySpec to create the properties.
const {pipe, evolve, filter, prop, sortBy, toPairs, groupBy, map, applySpec, path, flip, pick} = R
const transform = pipe(
evolve({ // prepare
tableItems: pipe(
filter(prop('startingPoint')),
sortBy(prop('pageNumber')),
toPairs
),
nodes: groupBy(prop('id'))
}),
({ tableItems, nodes }) => // combine
map(applySpec({
id: ([i]) => `chapter-${+i + 1}`,
name: path([1, 'name']),
nodes: pipe(path([1, 'nodes']), flip(pick)(nodes)),
}))(tableItems)
)
const data = {tableItems: [{id: 1, name: "1", startingPoint: true, pageNumber: 15, nodes: [100, 200]}, {id: 2, name: "2", startingPoint: true, pageNumber: 14, nodes: [300, 400]}], nodes: [{id: 100, tableItemId: 1, content: "test"}, {id: 200, tableItemId: 1, content: "test"}, {id: 300, tableItemId: 2, content: "test"}, {id: 400, tableItemId: 2, content: "test"}]}
console.log(transform(data))
.as-console-wrapper {max-height: 100% !important; top: 0}
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.min.js"></script>
So I'm setting a default query in my React Native app. Essentially I'm trying to set a sortOrder based on the elementOrder values. My partner used this same piece of code in his web app and it works for him. It doesn't seem to work on my end. The score exists if I remove the custom sort, which is normal due to what I've read in the docs. When I'm using a custom sort, then I should add track_scores: true. My score is still coming up as null.
I am not sure how to debug this situation. Can someone point me in the right direction? Thanks! Here's my code and let me know if you need to see anything. Unfortunately I don't have access to Kibana. I'm just console logging the list item and it's properties.
const defaultQueryConfig = {
track_scores: true,
sort: {
_script: {
type: 'number',
script: {
lang: 'painless',
source: `
int sortOrder = 0;
if (doc['elementOrder'].value == 1) {sortOrder = 3}
else if (doc['elementOrder'].value == 3) {sortOrder = 2}
else if (doc['elementOrder'].value == 2) {sortOrder = 1}
sortOrder;
`,
},
order: 'desc',
},
},
query: {
function_score: {
query: {
match_all: {},
},
functions: [
{
filter: {
match: {
categoryType: 'earth',
},
},
weight: 100,
},
{
filter: {
match: {
categoryType: 'water',
},
},
weight: 90,
},
{
filter: {
match: {
categoryType: 'fire',
},
},
weight: 80,
},
{
filter: {
match: {
thingExists: false,
},
},
weight: 2,
},
],
score_mode: 'multiply',
},
},
};
I am trying to customize the label of Chartist Pie Chart so that it will show both the label and value.
So in the example below, I would want the label to show "Bananas - 20", "Apples - 15", "Grapes - 40". I know I can just change the labels:, but is there a way to do that with the labelInterpolationFnc?
https://jsfiddle.net/ckmz7L1p/
var data = {
labels: ['Bananas', 'Apples', 'Grapes'],
series: [20, 15, 40]
};
var options = {
labelInterpolationFnc: function(value) {
return value[0]
}
};
var responsiveOptions = [
['screen and (min-width: 640px)', {
chartPadding: 30,
labelOffset: 100,
labelDirection: 'explode',
labelInterpolationFnc: function(value) {
return value;
}
}],
['screen and (min-width: 1024px)', {
labelOffset: 80,
chartPadding: 20
}]
];
new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
Got it figured out. Didn't realize labelInterpolationFnc can take function with both value and index parameters.
var data = {
labels: ['Bananas', 'Apples', 'Grapes'],
series: [20, 15, 40]
};
var options = {
width: "400px",
height: "400px",
labelInterpolationFnc: function(value, idx) {
return value + " - " + data.series[idx];
}
};
var responsiveOptions = [
['screen and (min-width: 640px)', {
chartPadding: 0,
labelOffset: 0,
labelDirection: 'explode',
labelInterpolationFnc: function(value, idx) {
return value + " - " + data.series[idx];
}
}],
['screen and (min-width: 1024px)', {
labelOffset: 30,
chartPadding: 0
}]
];
new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
I am struggling to use callout line with client-side graphics.
I followed the "Point styles for cities" example which uses a feature layer from the "LyonPointsOfInterest (FeatureServer)".
But it doesn't work with a feature layer which creates client-side graphics based on data returned from a web service.
Is there a limitation on 3d callout line?
Here's my code snippet:
Create a feature layer based on layer definition:
featureLayer = new FeatureLayer({
fields: this.layerDefinition.fields,
objectIdField: this.layerDefinition.objectIdField,
geometryType: this.layerDefinition.geometryType,
id: this.layerId
});
Set elevation and feature reduction and renderer:
featureLayer.elevationInfo = {
// elevation mode that will place points on top of the buildings or other SceneLayer 3D objects
mode: "relative-to-scene"
};
// feature reduction is set to selection because our scene contains too many points and they overlap
featureLayer.featureReduction = {
type: "selection"
};
featureLayer.renderer = this._getUniqueValueRenderer() as any as Renderer// callout render
Here the renderer code:
_getUniqueValueRenderer() {
let verticalOffset = { // verticalOffset shifts the symbol vertically
screenLength: 150, // callout line length
maxWorldLength: 200,
minWorldLength: 35
},
uniqueValueRenderer = {
type: "unique-value", // autocasts as new UniqueValueRenderer()
field: "AQHI",
uniqueValueInfos: [{
value: 1,
symbol: this._get3DCallOutSymbol(verticalOffset, "Museum.png", "#D13470")
}, {
value: 2,
symbol: this._get3DCallOutSymbol(verticalOffset, "Restaurant.png", "#F97C5A")
}, {
value: 3,
symbol: this._get3DCallOutSymbol(verticalOffset, "Church.png", "#884614")
}, {
value: 4,
symbol: this._get3DCallOutSymbol(verticalOffset, "Hotel.png", "#56B2D6")
}, {
value: 5,
symbol: this._get3DCallOutSymbol(verticalOffset, "Park.png", "#40C2B4")
}, {
value: 6,
symbol: this._get3DCallOutSymbol(verticalOffset, "Museum.png", "#D13470")
}, {
value: 7,
symbol: this._get3DCallOutSymbol(verticalOffset, "beer.png", "#F97C5A")
}, {
value: 8,
symbol: this._get3DCallOutSymbol(verticalOffset, "senate.png", "#884614")
}, {
value: 9,
symbol: this._get3DCallOutSymbol(verticalOffset, "Hotel.png", "#56B2D6")
}, {
value: 10,
symbol: this._get3DCallOutSymbol(verticalOffset, "Park.png", "#40C2B4")
}
]};
return uniqueValueRenderer;
}
_get3DCallOutSymbol(verticalOffset: any, iconName: string, color: string) {
return {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [{
type: "icon", // autocasts as new IconSymbol3DLayer()
resource: {
href: this.iconPath + iconName
},
size: 20,
outline: {
color: "white",
size: 2
}
}],
verticalOffset: verticalOffset,
callout: {
type: "line", // autocasts as new LineCallout3D()
color: "white",
size: 2,
border: {
color: color
}
}
};
}
Set source to an array of graphics, generated based web service data
featureLayer.source = graphics;
You should not use this.layerDefinition in the instanciation a your new FeatureLayer, but put it in a new var. Idem for this.layerId :
var layerDef = this.layerDefinition;
var lyrId = this.layerId;
featureLayer = new FeatureLayer({
fields: layerDef.fields,
objectIdField: layerDef.objectIdField,
geometryType: layerDef.geometryType,
id: lyrId
});
because this. at this place, is in the scope of new Feature()
I am just learning ExtJs-4.
I am stuck to create chart bar on the panel.
It's just same code from official Ext website.
This is my panel that has the code to create the chart, model, and store.
Ext.define("park.view.mainPanel",{
extend:'Ext.panel.Panel',
alias: 'widget.mainPanel',
title: 'edit User',
initComponent: function(){
Ext.define('WeatherPoint', {
extend: 'Ext.data.Model',
fields: ['temperature', 'date']
});
var store = Ext.create('Ext.data.Store', {
model: 'WeatherPoint',
data: [
{ temperature: 58, date: new Date(2011, 1, 1, 8) },
{ temperature: 63, date: new Date(2011, 1, 1, 9) },
{ temperature: 73, date: new Date(2011, 1, 1, 10) },
{ temperature: 78, date: new Date(2011, 1, 1, 11) },
{ temperature: 81, date: new Date(2011, 1, 1, 12) }
]
});
var chart = Ext.create('Ext.chart.Chart', {
store: store,
theme: 'Category1',
});
this.callParent(arguments);
}
});
It should be really easy if someone knows it.
But hard to fix it to noobie like me.
You should add chart as your panel child. Try adding this.items = [chart]; before this.callParent(arguments);
You are missing chart axes and series in your chart definition.