Docs List
newFeatureLayer(options)
In order to display vector layer in the leaflet, the style and source settings must be made. For this, we create a new object of the newFeatureLayer class.
Parameters:
options (Object)
| Name | Description |
|---|---|
|
options.source
|
vector layer that has been got from the server. |
|
options.style
Object?
|
An object contains style information. e.g.{ color: ‘blue’, selectionColor: ‘#f5b759’ }
|
|
options.editable
Boolean
Default: true
|
If true, the feature layer will be editable. |
|
options.geometryEditable
Boolean
Default: true
|
If true, geometry of features will be editable. |
|
options.selectable
Boolean
Default: true
|
If true, features will be selectable. |
|
options.showPopup
Boolean
Default: true
|
If true, a popup will be open when a feature is clicked. |
|
options.titleField
String
|
Name of the field that it’s value will be shown in popup. |
|
options.selectionChanged
Function?
|
Function will be triggered when a feature is selected. This function has no argument.
e.g.: function() { console.log(fLayer.selectionSet) } |
|
options.featurePopupContent
Function?
|
Function will be triggered when the popup is opened. This function changes popup content.
e.g.: function(feature) { return `<div><p>feature id is ${feature.id}</p></div>` } |
|
options.popupOpened
Function?
|
Function will be triggered when the popup is opened. This function has no argument.e.g.: function() { console.log(fLayer.selectionSet) } |
|
options.featureDeleted
Function?
|
Function will be triggered when a feature is deleted. This function returns deleted feature id.
e.g.: function(id) { console.log(id) } |
|
options.editStatusChanged
Function?
|
Function will be triggered when edit status changed. This function has 2 arguments, status and feature. Status is one of the started, canceled, inserted and updated. Feature returns inserted or updated feature, otherwise it is null.
e.g.: function(status, feature) { if (status === ‘inserted ‘) {console.log(feature)}} |
Returns:
Feature layer: Returns feature layer object to allow for method chaining.
Example:
const vectorLayer = await server.getVectorLayer('4f9f3e4b-4dc1-469b-83ab-00ae00f02581');
const fLayer = map.newFeatureLayer({
source: vectorLayer,
style: { color: 'blue', selectionColor: '#f5b759' },
editable: true,
geometryEditable: true,
selectable: true,
showPopup: true,
titleField: 'name',
editStatusChanged: function(status, feature) { if (status === 'inserted ') {console.log(feature)}}
});