{"id":6056,"date":"2022-12-31T10:40:04","date_gmt":"2022-12-31T07:10:04","guid":{"rendered":"https:\/\/en.geobox.ir\/developers\/?post_type=docs&p=6056"},"modified":"2023-01-21T09:26:34","modified_gmt":"2023-01-21T05:56:34","slug":"create-feature-layer-and-add-to-map","status":"publish","type":"docs","link":"https:\/\/en.geobox.ir\/developers\/docs\/features\/create-feature-layer-and-add-to-map\/","title":{"rendered":"Create feature layer"},"content":{"rendered":"

newFeatureLayer(options)<\/h3>\n

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.<\/p>\n

Parameters:<\/strong><\/p>\n

options (Object)<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Name<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
\n
options.source<\/div>\n
vector layer that has been got \u00a0from the server.<\/td>\n<\/tr>\n
\n
options.style<\/div>\n
Object?<\/div>\n<\/td>\n
\n
\n
An object contains style information. e.g.{ color: ‘blue’, selectionColor: ‘#f5b759’ }<\/div>\n<\/div>\n<\/td>\n<\/tr>\n
\n
options.editable<\/div>\n
Boolean<\/div>\n
Default: true<\/div>\n<\/td>\n
If true, the feature layer will be editable.<\/td>\n<\/tr>\n
\n
options.geometryEditable<\/div>\n
\n
Boolean<\/div>\n
Default: true<\/div>\n<\/div>\n<\/td>\n
If true, geometry of features will be editable.<\/td>\n<\/tr>\n
\n
options.selectable<\/div>\n
\n
Boolean<\/div>\n
Default: true<\/div>\n<\/div>\n<\/td>\n
If true, features will be selectable.<\/td>\n<\/tr>\n
\n
options.showPopup<\/div>\n
\n
Boolean<\/div>\n
Default: true<\/div>\n<\/div>\n<\/td>\n
If true, a popup will be open when a feature is clicked.<\/td>\n<\/tr>\n
\n
options.titleField<\/div>\n
String<\/div>\n<\/td>\n
Name of the field that it’s value will be shown in popup.<\/td>\n<\/tr>\n
\n
options.selectionChanged<\/div>\n
Function?<\/div>\n<\/td>\n
Function will be triggered when a feature is selected. This function has no argument.<\/p>\n

e.g.: function() { <\/span>console.log(fLayer.selectionSet) }<\/span><\/td>\n<\/tr>\n

\n
options.featurePopupContent<\/div>\n
Function?<\/div>\n<\/td>\n
Function will be triggered when the popup is opened. This function changes popup content.<\/p>\n

e.g.: function(feature) { <\/span>return `<div><p>feature id is ${feature.id}<\/p><\/div>` <\/span>}<\/span><\/td>\n<\/tr>\n

\n
options.popupOpened<\/div>\n
Function?<\/div>\n<\/td>\n
Function will be triggered when the popup is opened. This function has no argument.e.g.: function() { <\/span>console.log(fLayer.selectionSet) }<\/span><\/td>\n<\/tr>\n
\n
options.featureDeleted<\/div>\n
Function?<\/div>\n<\/td>\n
Function will be triggered when a feature is deleted. This function returns deleted feature id.<\/p>\n

e.g.: function(id) { <\/span>console.log(id) }<\/span><\/td>\n<\/tr>\n

\n
options.editStatusChanged<\/div>\n
Function?<\/div>\n<\/td>\n
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.<\/p>\n

e.g.: function(status, feature) { if (status === ‘inserted ‘) {console.log(feature)}<\/span>}<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Returns:<\/strong><\/p>\n

Feature layer: Returns feature layer object to allow for method chaining.<\/p>\n

Example:<\/strong><\/p>\n

const vectorLayer = await server.getVectorLayer('4f9f3e4b-4dc1-469b-83ab-00ae00f02581');\r\nconst fLayer = map.newFeatureLayer({\r\n   source: vectorLayer,\r\n   style: { color: 'blue', selectionColor: '#f5b759' },\r\n   editable: true,\r\n   geometryEditable: true,\r\n   selectable: true,\r\n   showPopup: true,\r\n   titleField: 'name',\r\n   editStatusChanged: function(status, feature) { if (status === 'inserted ') {console.log(feature)}}\r\n});<\/pre>\n
<\/h2>\n","protected":false},"excerpt":{"rendered":"
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 vector layer that has been got \u00a0from the server. options.style Object? An object contains style information. e.g.{ color: […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[63],"doc_tag":[],"class_list":["post-6056","docs","type-docs","status-publish","hentry","doc_category-features"],"_links":{"self":[{"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/docs\/6056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/comments?post=6056"}],"version-history":[{"count":8,"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/docs\/6056\/revisions"}],"predecessor-version":[{"id":6617,"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/docs\/6056\/revisions\/6617"}],"wp:attachment":[{"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/media?parent=6056"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/doc_category?post=6056"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/en.geobox.ir\/developers\/wp-json\/wp\/v2\/doc_tag?post=6056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}