{"id":5787,"date":"2022-12-20T10:46:11","date_gmt":"2022-12-20T07:16:11","guid":{"rendered":"https:\/\/en.geobox.ir\/developers\/?post_type=docs&p=5787"},"modified":"2023-01-21T15:47:36","modified_gmt":"2023-01-21T12:17:36","slug":"add-vector-layer","status":"publish","type":"docs","link":"https:\/\/en.geobox.ir\/developers\/docs\/add-sources\/add-vector-layer\/","title":{"rendered":"Add vector layer"},"content":{"rendered":"

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 = await Server.getVectorLayer ('4f9f3e4b-4dc1-469b-83ab-00ae00f02581');<\/pre>\n
Then add the vector layer to the map as follows.<\/p>\n
addVectorLayer(vectorLayer, options)<\/h3>\n
Parameters:<\/strong><\/p>\n
vectorLayer is the vector layer or vector layer view that is got from the server.<\/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.selection_color<\/span><\/div>\n
String?<\/div>\n<\/td>\n
Sets selection color for this layer. rgb, rgba and hexadecimal values are accepted.<\/td>\n<\/tr>\n
\n
options.<\/span>highlight_color<\/span><\/div>\n
String?<\/div>\n<\/td>\n
Sets highlight <\/span>color for this layer. rgb, rgba and hexadecimal values are accepted.<\/td>\n<\/tr>\n
\n
options.<\/span>paint<\/span><\/div>\n
object?<\/div>\n<\/td>\n
Object of layer style based on maplibre standard<\/a>.<\/td>\n<\/tr>\n
\n
options.<\/span>type<\/span><\/div>\n
String?<\/div>\n<\/td>\n
If you want to add the layer with different geometry type, type of geometry in style can be set here. For example, if you want to add a polygon layer as a polyline layer, use ‘Line’.<\/p>\n
Choices are: ‘Fill’ | ‘Line’ | ‘Circle’ | ‘Symbol’ | ‘Fill Extrusion’<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Returns:<\/strong><\/p>\n
String: Returns a message that shows adding layer was successful or not. Null message means adding was successful.<\/p>\n
Example:<\/strong><\/p>\n
const result = await map.addVectorLayer(vectorLayer,{'paint':{'line-color':'#ff0066'},'type':'line','selection_color':'#0000ff','highlight_color':'#003300'});<\/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