We can now cluster markers in gl-js:
https://www.mapbox.com/mapbox-gl-js/example/cluster/
Is there an equivalent way of marker filters in clustering in mapbox-gl-js as in leaflet like this example:
https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering-marker-clusters/
I have also run into this issue and believe there should be a way of further filtering cluster layers based on a property of the features in the collection. But from my understanding (and I sincerely hope there is a better way that I just haven't figured out yet), there isn't a way to distinguish the clustered features since you declare on the source that it is to be clustered. A workaround that I have come up with is to dynamically add a source and layer as your filter changes.
For example: if you're filtering by subcategory ID's, you can pare down your original FeatureCollection that match that subcategory ID and create a new source with that FeatureCollection with cluster set to true, add your layer for the markers, and then add your cluster layers like they have laid out in their example. And anytime that filter changes, you can either toggle the visibility of that marker layer (haven't tested that part) or just remove it and add the new one repeating those previous steps. Some of the many downsides to this approach is the inability to use your regular filters on the whole dataset (if you had any) and it isn't as performant as if you were using filters.
If you use the earthquakes data from mapbox, the code might look like:
var data = "https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson";
var filterID = 1.87; // Arbitrary number
var paredData = _.filter(data.features, function(feature){
if (feature["Primary ID"] === filterID) {
return feature;
}
})
// Remove all of the layers and source associated
// with a previous filter if needed
if (map.getSource("earthquake-filter") {
map.removeLayer("earthquake-filter");
map.removeLayer("earthquake-filter-cluster");
map.removeLayer("earthquake-filter-cluster-count");
map.removeSource("earthquake-filter");
}
map.addSource("earthquake-filter", {
type: "geojson",
data: {
type: "FeatureCollection",
features: paredData
},
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 50
});
And continue as they do in the example.
Not my favorite solution but it's the only one that works so far that I've found. Hope this helps.
Related
I am using the Bootleaf IAG framework.
I can not figure out how to get the bounding coordinates of a filtered layer.
I am modifying the bootleaf code to query points with a polygon layer. The Query Widget already allows users to draw a polygon, but I want to select a polygon from a layer hosted on my arcgis server. I modified the filter widget by removing the text field and allowing my users to select polygon layers and values from a dropdown menu. This works fine.
Now I need to take the result of the layer.setWhere(where, handleError); code and merry it with the query below. I need selectedPolygon to equal the result of layer.setWhere(where, handleError); and use the bounding coordinates in the .within section of the query.
I have tried a number of things, L.latLngBounds, getBounds(), and toGeoJSON().features[0].geometry.coordinates to name a few, but but I can not figure out how to pull out the bounds. What is the correct code?
const query = L.esri.query({ url: pointInPolygonUrl })
.token(pointInPolygonData.token)
.within(selectedPolygon)
query.run(function (error, data, response) {
if (error) {
console.log(error);
return;
}
6/8/2021 Edit (based on Seth Lutske's comment:
I did not provide a code sandbox for two reasons: 1 - bootleaf has a lot of files, 2 - all of my layers require secure sign in to arcgis. Hopefully I can provide enough information to get assistance without it.
Is selectedPolygon changing the way I am expecting? Currently there
is no variable called selectedPolygon because I can not figure out
the correct way to format it. selectedPolygon is what I want to
call the filter result layer.setWhere(where, handleError);. I set
the polygon layer up to filter on the map as the value changes. I
can verify it is filtering as expected.
selectedPolygon format - This is where my problem lies. I can not
seem to find the correct format based on how bootleaf layers are
configured. I started with var selectedPolygon =
layer.features.geometry.coordinates; and got a geometry undefined
error. I proceeded to try every other code I could think of to get
the bounds.
Bounding coordinates may not be the proper terminology. I want to
run a query to find all of the points within the filtered polygon.
To achieve this, it is my understanding that I need to use the
bounds of the filtered polygon in the within section of the query.
6/8/2021 Edit #2
This link may be most beneficial to show how the layer is constructed. I modified this code to remove the text input and add a dropdown, but the basic definition should be the same.
Line 1605 is function addFilter()
Line 1804 is function applyFilter()
Line 1927 is layer.setWhere(where, handleFilterError);
Photo 1: console.log("polygon layer", layer)
Photo 1
Photo 2: Expanded _layers
Photo 2
Photo 3: Expanded _rings (I did not find ToGetJSON, but I found ToGeoJSON in this section.
Photo 3
It looks like if I can get to _rings then I should be fine, but that is where my knowledge is lacking.
I don't know much about bootleaf, but here are some tips to get you started. Based on your question and comments, this will hopefully clear things up and instruct you on how to apply what you need in your scenario.
Hook UI to setWhere
When the user selects an option from the UI, you can call setWhere on the layer you're providing from the arcgis server. Let's say there's a polygon layer, in my example, called statesFeatureLayer, which is an L.esri.featureLayer
// Create polygon layer of states
const statesFeatureLayer = EL.featureLayer({
url: "polygon_featurelayer_url_from_arcgis_server"
}).addTo(map);
And there's a point layer:
// Create points layer
const pointsFeatureLayer = EL.featureLayer({
url: "points_featurelayer_url"
}).addTo(map);
Now there is some UI, which has to trigger setWhere to be called on this layer. So anywhere in the UI where you want to run this functionality of setting the filter on the layer, and then querying the other layer based on the results, we'll run a function call runQuery:
function runQuery(){
statesFeatureLayer.setWhere(querystring, callback)
}
Run callback after setWhere fires
It sounds like you've already got this part figured out, and that your setWhere function is running properly. However, setWhere also takes an optional callback function as its second argument, which runs after the where has been set and the layer refreshed. Let's dig into that. In the callback, we're going to want to get all the features that are currently active on the map:
function runQuery(){
statesFeatureLayer.setWhere(querystring, () => {
statesFeatureLayer.eachActiveFeature(feature => {
// do something with features
})
})
}
Run query to test points layer against active features of polygon layer
Within eachActiveFeature, we can run a query on the pointsFeatureLayer:
function runQuery(){
statesFeatureLayer.setWhere(querystring, () => {
statesFeatureLayer.eachActiveFeature(feature => {
pointsFeatureLayer
.query()
.within(feature.toGeoJSON())
.run((error, data) => {
console.log(data);
});
})
})
}
So now were are running a query which asks for any points in the pointsFeatureLayer that are in the geometry of each active feature of the statesFeatureLayer.
The downside of this is that we can't run a query against all the active features as a group. The within query method (along with most of the other query methods) can accept singular features, whether in the form of an L.Polygon, L.Polyline, or an L.GeoJSON. While I had tried creating an L.featureGroup and calling .toGeoJSON on that, within seems to require a GeoJSON that describes only a single shape. So if you have multiple features, you'll have to conglomerate them. For example, you may have some variable results = [] at the global scope level, then within the callback of run, you can push the results to results, which will give you all results in one variable. This may take some massaging in js to get it right.
Working Codesandbox
Here you have 2 UI elements which cause runQuery to run. Either the dropdown, or the checkbox. You'll see that on every UI change, setWhere is called with a querystring constructed from the UI (setWhere for a state, and setwhere for that state and california if the checkbox is checked). When setWhere is called, its callback then runs a query against the point layer just for the currently active features, and then returns whatever points from the pointlayer are within each of the active features.
According to https://www.ag-grid.com/javascript-grid-filter-set/, "The grid does not update the filters for you as there are too many use cases...", #agreed.
I am using a Server Side data source with Infinite Paging querying a large set of data. Although, at initial load time, I may be confident the filter is listing all available "choices", I am hoping to find a solution to "reload" the filter at some frequency/event to be certain.
I am attempting to use the resetFilterValues() method of the object returned by a call to gridOptions.api.getFilterInstance(id).
When using a Server Side data source I am receiving the following console.error output:
ag-Grid: Set Filter cannot initialise because you are using a row model that does not contain all rows in the browser. Either use a different filter type, or configure Set Filter such that you provide it with values (Source ag-grid-enterprise.min.js:555
Note: The values method with async value load works splendidly and is written in accordance with recommendation e.g. callback to params.success with values.
I load the filter choices in the Column Header using the following approach:
{
headerName: 'Something',
field: 'SOMETHING',
width: 200,
suppressMenu: false,
suppressFilter: false,
filter: 'agSetColumnFilter',
filterParams: {
values: function (params) {
someAsyncMethodReturningAPIResultsAsArray();
}
newRowsAction: 'keep'
},
menuTabs: ['filterMenuTab']
}
I then attempt to reload the filters at a later time (like when a button is pressed outside the grid) using the following code:
var filter = gridOptions.api.getFilterInstance(id);
filter.resetFilterValues();
This code results in the error expressed above.
Q: Does anyone know how to configure Set Model to return rows as described in the error message? Is there a better way to approach this problem anyone has experience with?
Thanks
This code below can be executed in the postProcessPopup callback and it will call the values() function defined in filterParams every time the popup is opened
var filter = gridOptions.api.getFilterInstance(id);
filter.refreshFilterValues();
Note: The refreshFilterValues function is doing the trick here. It is available in v24 and above. Not too sure about older versions.
I have an Ionic/Angular app using ag-grid. I would like certain grids to have a filter automatically applied when the grid is loaded - without the user having to do anything.
I tried the following:
onGridReady(params) {
params.api.sizeColumnsToFit();
// get filter instance
var filterComponent = params.api.getFilterInstance("isActive");
// OR set filter model and update
filterComponent.setModel({
type: "greaterThan",
filter: 0
});
filterComponent.onFilterChanged();
}
but it did nothing. Any ideas?
Edit: AgGrid included a onFirstDataRendered callback in version 24.0, as stated in later comments. The original answer below is now only relevant for versions which pre-date this functionality.
onFirstDataRendered(params) {
var filterComponent = params.api.getFilterInstance("isActive");
filterComponent.setModel({
type: "greaterThan",
filter: 0
});
filterComponent.onFilterChanged();
}
Reproduced your problem in a couple of their example older plunks, seemed to be alleviated by adding a small delay. Just venturing a guess that maybe the DOM isn't completely ready yet, although the grid is.
Pre-onFirstDataRendered versions:
onGridReady(params) {
params.api.sizeColumnsToFit();
setTimeout(() => {
var filterComponent = params.api.getFilterInstance("isActive");
filterComponent.setModel({
type: "greaterThan",
filter: 0
});
filterComponent.onFilterChanged();
},150)
}
I ended up doing this.
var FilterComponent = gridOptions.api.getFilterInstance('Status');
FilterComponent.selectNothing(); //Cleared all options
FilterComponent.selectValue('Approved') //added the option i wanted
FilterComponent.onFilterChanged();
I think the problem is, that the grid resets the filter when new rows are loaded. There are multiple ways to approach this:
The predefined filter types have a filter parameter called newRowsAction
https://www.ag-grid.com/javascript-grid-filter-text/#params
newRowsAction: What to do when new rows are loaded. The default is to reset the filter. If you want to keep the filter status between row loads, then set this value to 'keep'.
This answer suggests to set the gridOptions property deltaRowDataMode=true
You can also listen to one of the grid events that are emitted when the grid date changes and then apply the filter
https://www.ag-grid.com/javascript-grid-events/#miscellaneous: rowDataChanged, rowDataUpdated
These should all keep the filter when the data changes but I think you still need a bit of extra logic (setting a flag) if you want the filter only on the first load.
In my case I need to restore Ag-Grid's Set Filter when grid loads. Inspired by the accepted answer, my understanding is the filter instance api can only be accessed after grid data is ready (NOT gridReady), as it needs to aggregate row data to populate its filter list.
Therefore, as #3 adviced in #Fabian's answer, I have set up event listeners when row data changes.
You can also listen to one of the grid events that are emitted when the grid date changes and then apply the filter https://www.ag-grid.com/javascript-grid-events/#miscellaneous:
rowDataChanged, rowDataUpdated
In a similar use case I believe this is a better approach than set up an arbitrary timeout number before accessing the filter instance as it may end up with inconsistent results.
v24.0.0
The best way to implement this, is to apply your default filter in the firstDataRendered callback.
e.g.
onFirstDataRendered(params) {
//... apply your default filter here
}
First of all, I'm aware that querySourceFeatures could fix that. But unfortunately the new version is effective with all types but not with symbols, which I'm using. So I'm still coding under version 0.14.x.
That said, I filter my map with the setFilter function and I need to catch back the number of features displayed once the filter is done.
I thought about transform the whole world (-90,-180,90,180) map coordinates into pixels and then pass it into a featuresIn function.
With fiddle below, featuresIn returns nothing [EDIT : that was due to not setting interacive : true, now it's done but issue is still here]. Do you have any idea how to get the number of features displayed on my map?
EDIT : Please find my jsFiddle : https://jsfiddle.net/y7hoa0gy/7/
No features are being returned from featuresIn because you did not set "interactive": true on the "route" layer, as specified in the documentation (but no longer on our official docs page because we have changed this API).
/*Now I want to know how many features are still displayed after that filter
My thought was to get the bbox of the whole map (-180,-90,180,90) and make a featuresIn of that bbox.*/
More fundamentally, this approach will not work. featuresIn only returns features in the current viewport. It does not return all features.
I have a JSON response which contains well details(well API Number,well name and operator details).I want to know is this json response sufficient to plot a feature layer or do we require the latitude and longitude to plot the features in the feature layer?
Well, it would help if you added some code to reference.
If you're using ArcGIS Server and the ESRI JavaScript API, and you've done some sort of query operation, then it is possible to request that the geometry be returned along with your well details.
Here's a full sample which describes how to do that: ESRI JavaScript API QueryTask Example
The Key lines of code in there are:
var query = new esri.tasks.Query();
query.returnGeometry = true;
The .returnGeometry property means that your JSON response will contain the coordinates, which you then display once the QueryTask is complete.
dojo.connect(queryTask, "onComplete", function(featureSet) {
map.graphics.clear();
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,255,0.35]), 1),new dojo.Color([125,125,125,0.35]));
//QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.
dojo.forEach(featureSet.features,function(feature){
var graphic = feature;
graphic.setSymbol(symbol);
graphic.setInfoTemplate(infoTemplate);
map.graphics.add(graphic);
});
});