I am modifying features from layer and would like to use similar to "setData()" to a vector layer? From googling some places i read that its not possible to use that setData function to vectors and only to geojsons.
What i am doing is first i get the feature properties from layer
let features = this.map.queryRenderedFeatures({layers:["maakunta-fills"]}).map(item=>{
const copied = {...item}
copied.properties.modified = "some_modified_value"
return copied;
});
and then my wish is i can do something like : this.map.getSource("sourcename").setData(features)
But mapbox will throw error by saying setData is not function (i assume because this "sourcename" is a vector tile. Which looks like this:
this.map.addSource("maakunta", {
type: "vector",
tiles: [tileServiceURL + "base.maakunta/{z}/{x}/{y}.pbf"],
promoteId: "id"
});
The best way to do this is by using setFeatureState. It will not change the vector data but you can change the style and intercept any click events and push the updated data. This of course is limited to the current client session. Ideally you would be updating the source data in a database for example so that when a new user views a new db tile request they will have access to the new data.
Related
I have a FeatureCollection from which I remove single Features. I can get the removed feature by adding an event listener pm:remove like following:
layer.on('pm:remove', e => {
// do stuff regarding the removed feature
console.log(e.layer.feature)
});
I would like to also have access to the resulting FeatureCollection (from which the feature has been removed). how can I "console.log()" that?
Are you added the layer to a LayerGroup / FeatureGroup? Then you can call layergroup.toGeoJSON()
Or if you use the default and adding the layers to the map, you can call map.pm.getGeomanLayers(true).toGeoJSON().
true means that it returns a L.FeatureGroup instead of an array with the layers.
I am very new to syncfusion controls for mvc. While exploring how to set dynamic datasource to grid, I came across this line of javascript code which I cannot understand. I have been through the javascript api docs for ej grid but couldn't find the meaning.
var obj = $("#Grid").ejGrid("instance");
If someone can explain the meaning and point out some reference documentation, I will be highly grateful.
The example I came across
https://help.syncfusion.com/aspnetmvc/grid/how-to
The javascript api I have been through
https://help.syncfusion.com/api/js/ejgrid#members:datasource
P.s: I know from a comment I came across that this has something to do with current instance of ej grid but I would like a solid understanding via a reference so I can understand.
From my little experience with Syncfusion controls the documentation explaining how to perform tasks is not well stated. If you have a license you can ask questions in their forum but I can tell you what little I learned perusing their forum.
In their JS 1 version
var obj = $("#Grid").ejGrid("instance");
and in their JS 2 version
var obj = document.getElementById('Grid').ej2_instances[0];
The variable obj appears to get an object reference to the grid identified by the id Grid. I am not sure what the instance value refers to other than the examples in the documentation show it and it works when it is used.
Not sure if I was much help.
In the Below code example Grid – Grid ID and you can take the Grid instance using the above code example. From the instance you can get the details regarding the column, dataSource, filterSettings, sortSettings etc currently applied to ejGrid. We have given support to customize the Grid using several public method. You can call those method by taking the Grid instance.
#(Html.EJ().Grid<EJGrid.Models.Order>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.Columns(col =>
{ col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Width(75).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(90).Add();
col.Field("Freight").HeaderText("Freight").Format("{0:c}").TextAlign(TextAlign.Right).Width(90).Add();
col.Field("ShipCity").HeaderText("Ship City").Width(90).Add();
col.Field("Child.Test").HeaderText("TEst").Format("{0:c}").Width(90).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(90).Add();
})
)
<script>
var obj = $("#Grid").ejGrid("instance");
var value = $("#colValue").val();
//Add custom parameter to the server
var query = new ej.Query().addParams("EmployeeID", value);
//Creating ejDataManager with UrlAdaptor
var dataManager = ej.DataManager({ url: "/Home/GetData", adaptor: new ej.UrlAdaptor() });
var promise = dataManager.executeQuery(query); promise.done(function (e) {
//Assign the result to the grid dataSource using "dataSource" method.
obj.dataSource(e.result);
</script>
To update the Grid, you can use dataSource() method. To call that method you need to take the Grid instance and call that method.
Refer the below API documentation for your reference
https://help.syncfusion.com/api/js/ejgrid#methods:datasource - used to update the Grid dataSource dynamically
https://help.syncfusion.com/api/js/ejgrid#members:datasource - returns the Grid dataSource.
Please get back to us if you have further queries.
We developed a web page where we are showing health facility locations of a country on a map. We used Leaflet for the map display. We actually do not need to display the online map tiles in the background. If we can only show a vector country map that would also be OK. I came to know that tiles can be downloaded and saved offline in Leaflet etc, but not interested in that direction.
What I want is available in this page
Where Leaflet is used but the world map online tiles are not displayed. But the code is quite complex to understand. Is there any easy example or guidance to do what I need?
This is actually quite easy when using a L.GeoJSON layer. First off you would need to find the correct GeoJSON for the region you want to display. For instance, here are some for the US: http://eric.clst.org/Stuff/USGeoJSON. Next create a map like you would normally do:
var map = new L.Map('map', {
'center': [0, 0],
'zoom': 0
});
Then you would need to fetch/load your GeoJSON data into your script using ajax via jQuery or something else and use that to initialize a GeoJSON layer and add that to your map:
// jQuery ajax request
$.ajax({
// url with your geojson data file
'url': 'my.geo.json',
// return json object, not as string
'dataType': 'json',
// on success handle result
'success': function (result) {
// Initialize GeoJSON layer and add to map
var layer = new L.GeoJSON(result).addTo(map);
// Fit map to bounds of your GeoJSON
map.fitBounds(layer.getBounds());
}
});
That's it. You can find lots of GeoJSON datasets online and if you want to know more about the L.GeoJSON i would recommend reading the reference i linked earlier and this tutorial: http://leafletjs.com/examples/geojson.html
I am using smart gwt 2.5 List grid.
In this I am using check box for simple selection.below is the code for that:
getGrid().setSelectionAppearance(SelectionAppearance.CHECKBOX);
getGrid().setSelectionType(SelectionStyle.SIMPLE);
I am using data source for the list grid.For feeding data calling this method:
public void setTestData(DataClass[] testData) {
setAttribute("testData", testData, true);
}
My grid is rendering data properly.Now I want to set checked some of records (Row) depending in some condition.Lets say I want row number 1 and 5 should be checked.
For this after feeding data to data source I write code like below to check data:
getGrid().selectRecord(1);`
getGrid().selectRecord(5);
But is not doing any checked operations to check box.I am not getting at what point I am doing mistake.
same thing when I tried with out data source and I feed data to list grid simply by setdata It was working.
Please help me out.Thanks in advance
When you use a DataSource, including a clientOnly DataSource, fetching data is asynchronous, so your selectRecord() calls are happening when data is not loaded yet. Wait for DataArrived before attempting to select records.
One work around which is working for me is that:
I removed selection appearance and selected type from my grid and took a column for check box
like below:
NTListGridField customCheckBoxField = new NTListGridField("select", "Select", 25);
customCheckBoxField.setAlign(Alignment.LEFT);
customCheckBoxField.setType(ListGridFieldType.BOOLEAN);
customCheckBoxField.setCanFilter(false);
customCheckBoxField.setCanEdit(true);
customCheckBoxField.setCanToggle(true);
Now for selecting records,
record.setAttribute("select", true);
I'm trying to populate a GXT Grid using data retrieved from an online API (for instance, going to www.example.com/documents returns a JSON array of documents). In addition, I need to paginate the result.
I've read all the various blogs and tutorials, but most of them populate the pagination proxy using something like TestData.GetDocuments(). However, I want to get that info using HTTP GET.
I've managed to populate a grid, but without pagination, using a RequestBuilder + proxy + reader + loader. But it seems as though the actual loading of the data is "put off" until some hidden stage deep inside the GXT code. Pagination requires that data from the start, so I'm not sure what to do.
Can someone provide a simple code example which does what I need?
Thank you.
I managed to get this going, here is what I did:
First I defined the proxy and loader for my data along with the paging toolbat:
private PagingModelMemoryProxy proxy;
private PagingLoader<PagingLoadResult<ModelData>> loader;
private PagingToolBar toolBar;
Next is the creation of each one, initializing with an empty ArrayList.
proxy = new PagingModelMemoryProxy(new ArrayList<EquipmentModel>());
loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy);
loader.setRemoteSort(true);
toolBar = new PagingToolBar(100);
toolBar.bind(loader);
loader.load(0, 100);
Last, I have a set method in my view that gets called when the AJAX call is complete, but you could trigger it anywhere. Here is my entire set method, Equipment and EquipmentModel are my database and view models respectively.
public void setEquipmentData(List<Equipment> data)
{
Collections.sort(data);
// build a list of models to be loaded
List<EquipmentModel> models = new ArrayList<EquipmentModel>();
for (Equipment equipment : data)
{
EquipmentModel model = new EquipmentModel(equipment);
models.add(model);
}
// load the list of models into the proxy and reconfigure the grid to
// refresh display.
proxy.setData(models);
ListStore<EquipmentModel> equipmentStore = new ListStore<EquipmentModel>(loader);
equipmentGrid.reconfigure(equipmentStore, equipmentColumnModel);
loader.load(0, 100);
}
The key here for me was re-creating the store with the same loader, the column model was pre-created and gets reused.