{"id":6008,"date":"2022-12-28T16:57:58","date_gmt":"2022-12-28T13:27:58","guid":{"rendered":"https:\/\/en.geobox.ir\/developers\/?post_type=docs&p=6008"},"modified":"2023-01-21T09:16:40","modified_gmt":"2023-01-21T05:46:40","slug":"add-vector-layer-2","status":"publish","type":"docs","link":"https:\/\/en.geobox.ir\/developers\/docs\/add-sources-geobox-api-for-leaflet\/add-vector-layer-2\/","title":{"rendered":"Add vector layer"},"content":{"rendered":"

Add vector layer or vector layer view<\/h2>\n

To add a vector layer or vector layer view to the map, first copy the uuid of the vector layer from the geobox portal and get the vector layer from the server<\/a>: (examples are explained for vector layer, but the same is true for vector layer view.)<\/p>\n

getVectorLayer(layer_uuid)<\/h3>\n

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

const vectorLayer\u00a0= await Server.getVectorLayer('4f9f3e4b-4dc1-469b-83ab-00ae00f02581');<\/pre>\n
After getting the vector layer, it is necessary to create a feature layer from the vector layer. For this, use the featureLayer creation guide<\/a>.<\/p>\n
newFeatureLayer(options)<\/h3>\n
Example:<\/strong><\/p>\n
var fLayer = map.newFeatureLayer({ source: vectorLayer });<\/pre>\n
After the new object is created from the newFeatureLayer class, you need to load the features of the layer.<\/p>\n
loadFeatures(options)<\/h3>\n
Parameters:<\/strong><\/p>\n
options (Object)<\/p>\n\n\n\n\n\n\n\n\n
Name<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
\n
options.f<\/span><\/div>\n
String<\/div>\n
Default: ‘topojson’<\/div>\n<\/td>\n
Output format. Choices are: ‘topojson’ | ‘json’<\/td>\n<\/tr>\n
\n
options.skip<\/span><\/div>\n
\n
Number?<\/div>\n
Default: 0<\/div>\n<\/div>\n<\/td>\n
Number of skipped features.<\/td>\n<\/tr>\n
\n
\n
options.limit<\/span><\/div>\n
\n
Number?<\/div>\n
Default:1000<\/div>\n<\/div>\n<\/div>\n<\/td>\n
Maximum number for result features.<\/td>\n<\/tr>\n
\n
options.order_by<\/span><\/div>\n
String?<\/div>\n<\/td>\n
Comma separated list of fields for sorting results [field1 A|D, field2 A|D, \u2026]. e.g. name A, type D
\nNOTE: “A” denotes ascending order and “D” denotes descending order.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Returns:<\/strong><\/p>\n
GeoJSON: Returns GeoJSON of features.<\/p>\n
Example:<\/strong><\/p>\n
await fLayer.loadFeatures({ f: 'topojson', skip:0, limit:1000, order_by: 'id A' });<\/pre>\n
Finally, add the layer to the map using the addToMap method.<\/p>\n
addToMap()<\/h3>\n
Example:<\/strong><\/p>\n
fLayer.addToMap();<\/pre>\n
After adding the layer to the map, it is better to change the view of the map to the layer extent. For this purpose, use the zoomToAll method.<\/p>\n
zoomToAll()<\/h3>\n
Example:<\/strong><\/p>\n
fLayer.zoomToAll();<\/pre>\n
\nSee the Pen Contact Form \u2013 Pen a Day 20<\/a> by Geobox (@geobox-gl-demo<\/a>) on CodePen<\/a>.1<\/p>\n