Integrating OpenLayers Map with VueJS: Implement Style and legend for vector layer – Part 3

Integrating OpenLayers Map with VueJS: Implement Style and legend for vector layer – Part 3

This blog post is the third part in OpenLayers-VueJS integration series. In part one, we implemented Layer Panel. In this tutorial, we will implement style and render legend for Vector Layers.

OpenLayers VueJS integration series:
1. Integrating OpenLayers Map with VueJS: Create Map – Part 1
2. Integrating OpenLayers Map with VueJS: Create Layers Panel – Part 2
3. Integrating OpenLayers Map with VueJS: Create Implement Style and legend for vector layer – Part_3
4. Integrating OpenLayers Map With VueJS: Open Feature Information Popup On Click – Part 4

To get full source code for this tutorial, click here.

To check the live demo for this tutorial, click here.

In this tutorial, we will style vector layers and create legend based on style for vector layer. We will also implement display toggle functionality at attribute level. We will divide this tutorial into following steps. It will make the process easy and will help you understand this tutorial in a easy way.

1. Install geostyler and geostyler-legend

We will install geostyler and geostyler-legend into our project. Geostyler will be used to implement style on our vector layer and geostyler-legend will be used to render legend based on the styles.

2. Understanding geostyler syntax to define styles.

Following code snippet displays the style syntax for geostyler in the form of json format. We start by defining rules. We can define multiple rules based on our requirements. In the following style, we defined three rules for three different attribute values. Every rule have filter and symbolizers properties. filter is used to filter values based on attribute and symbolizers is used to define style properties.
filter property have three values: operator, attribute name and attribute value.
symbolizers property contains list of symbolizer. Every symbolizer defines kind property. kind property have Point, Line, Fill, Raster value for point vector, line vector, polygon vector and raster layer.
For more information on geostyler sytax, click on following link.

3. New project structure

Our new project structure will look like below image. Main changes are in components and static directory which are inside src directory.
1. In src/components directory, we have InLegend.vue component for generating styles legend for vector layer.
2. In src/static/geojson directory, we have all the geojsons file that we are using to create vector layer.
3. In src/static/styles directory, we have defined geostyles for all the geojsons.

4. Modify src/static/layers/layers.js file

In this file, we are importing geojsons files and their respective geostyles and creating simple layers object with additional properties. We have created a simple object which contains array of layers and every single item in the array represent a particular layer with geojson, geostyles and other properties.
And then, we are using this object in src/components/LayersPanel.vue component to create layers and displaying in map.

5. Implement geostyle in Vector Layer

The following code snippet depicts how to set geostyle for vector layer. We are importing OpenLayersParser from geostyler-openlayers-parser module.
vector_style is a geostyler object that we discussed in heading number 2 above. At line number 39, OpenLayersParser convert this geostyler object to OpenLayers style object and then finally we are setting style for vector layer.

6. Create InLegend.vue component

We are using LegendRenderer from geostyler-legend to generate legend for the geostyles. Legendrenderer take geostyle that we have defined as argument and returned as legend based on this style.
We have also implemented layer toggling at attribute level meaning you can display/hide layer at attribute level. See toggleSubLayer function at line number 32. To toggle display at attribute, we are disabling/enabling the filter property of geostyle to display/hide the attribute.

I hope this tutorial will create a good foundation for you. If you want tutorials on another GIS topic or you have any queries, please send an email at contact@spatial-dev.guru.

We also offer freelancing services. Please email us at contact@spatial-dev.guru for any query.