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.

Table Of Contents

1. Install geostyler and geostyler-legend
2. Understanding geostyler syntax to define styles.
3. New project structure
4. Modify src/static/layers/layers.js file
5. Implement geostyle in Vector Layer
6. Create InLegend.vue component

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.

(base) geoknight@pop-os/vue-layers:~$ npm install geostyler
(base) geoknight@pop-os/vue-layers:~$ npm install geostyler-legend

1 2	(base) geoknight@pop-os/vue-layers:~$ npm install geostyler (base) geoknight@pop-os/vue-layers:~$ npm install geostyler-legend

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.

geostyler-style

Documentation for geostyler-style

{
    
    "rules": [               
        {                
            "name": "COASTAL",
            "filter": [
                "==",
                "TYPE",
                "COASTAL"
            ],
            "symbolizers": [
                {
                    "kind": "Line",
                    "color": "#339FFF",
                    "width": 6
                }                
            ]
        },
        {                
            "name": "MEXICAN",
            "filter": [                
                "==",
                "TYPE",
                "MEXICAN"
            ],
            "symbolizers": [
                {
                    "kind": "Line",
                    "color": "#D4AA2E",
                    "width": 6
                }
            ]
        },
        {                
            "name": "CANADIAN",
            "filter": [                
                "==",
                "TYPE",
                "CANADIAN"
            ],
            "symbolizers": [
                {
                    "kind": "Line",
                    "color": "#FF5E33",
                    "width": 6
                }
            ]
        }
    ]
}

{

"rules": [

{

"name": "COASTAL",

"filter": [

"==",

"TYPE",

"COASTAL"

"symbolizers": [

{

"kind": "Line",

"color": "#339FFF",

"width": 6

}

]

{

"name": "MEXICAN",

"filter": [

"==",

"TYPE",

"MEXICAN"

"symbolizers": [

{

"kind": "Line",

"color": "#D4AA2E",

"width": 6

}

]

{

"name": "CANADIAN",

"filter": [

"==",

"TYPE",

"CANADIAN"

"symbolizers": [

{

"kind": "Line",

"color": "#FF5E33",

"width": 6

}

]

}

]

}

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.

├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── material_fonts
│       ├── fonts.woff2
│       └── material_fonts.css
├── README.md
├── src
│   ├── App.vue
│   ├── components
│   │   ├── InLegend.vue
│   │   ├── LayersPanel.vue
│   │   └── Map.vue
│   ├── main.js
│   ├── quasar-user-options.js
│   ├── static
│   │   ├── geojsons
│   │   │   ├── earthquake.json
│   │   │   ├── us_counties.json
│   │   │   ├── us_outline.json
│   │   │   └── us_states.json
│   │   ├── layers
│   │   │   └── layers.js
│   │   └── styles
│   │       ├── earthquake.json
│   │       ├── us_counties.json
│   │       ├── us_outline.json
│   │       └── us_states.json
│   ├── store
│   │   └── map.js
│   └── styles
│       ├── quasar.sass
│       └── quasar.variables.sass
└── vue.config.js

├── package.json

├── package-lock.json

├── public

│ ├── favicon.ico

│ ├── index.html

│ └── material_fonts

│ ├── fonts.woff2

│ └── material_fonts.css

├── README.md

├── src

│ ├── App.vue

│ ├── components

│ │ ├── InLegend.vue

│ │ ├── LayersPanel.vue

│ │ └── Map.vue

│ ├── main.js

│ ├── quasar-user-options.js

│ ├── static

│ │ ├── geojsons

│ │ │ ├── earthquake.json

│ │ │ ├── us_counties.json

│ │ │ ├── us_outline.json

│ │ │ └── us_states.json

│ │ ├── layers

│ │ │ └── layers.js

│ │ └── styles

│ │ ├── earthquake.json

│ │ ├── us_counties.json

│ │ ├── us_outline.json

│ │ └── us_states.json

│ ├── store

│ │ └── map.js

│ └── styles

│ ├── quasar.sass

│ └── quasar.variables.sass

└── vue.config.js

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.

// Import geojson layers
import us_states from '../geojsons/us_states.json';
import us_counties from '../geojsons/us_counties.json';
import us_outline from '../geojsons/us_outline.json';
import earthquake from '../geojsons/earthquake.json';


// Import layers style
import us_states_style from '../styles/us_states.json';
import us_counties_style from '../styles/us_counties.json';
import us_outline_style from '../styles/us_outline.json';
import earthquake_style from '../styles/earthquake.json';



let layers = [
    {
        "layer": us_states,
        "name": 'US States',
        "visible": true,
        "minZoom": 1,
        "style": us_states_style        
    },
    {
        "layer": us_counties,
        "name": 'US Couties',
        "visible": true,
        "minZoom": 1,
        "style": us_counties_style
    },
    {   
        "layer": us_outline,
        "name": 'US Outline',
        "visible": true,
        "minZoom": 1,
        "style": us_outline_style
    },
    {
        "layer": earthquake,
        "name": 'Earthquakes',
        "visible": true,
        "minZoom": 1,
        "style": earthquake_style
    }
];

export default layers;

// Import geojson layers

import us_states from '../geojsons/us_states.json';

import us_counties from '../geojsons/us_counties.json';

import us_outline from '../geojsons/us_outline.json';

import earthquake from '../geojsons/earthquake.json';

// Import layers style

import us_states_style from '../styles/us_states.json';

import us_counties_style from '../styles/us_counties.json';

import us_outline_style from '../styles/us_outline.json';

import earthquake_style from '../styles/earthquake.json';

let layers = [

{

"layer": us_states,

"name": 'US States',

"visible": true,

"minZoom": 1,

"style": us_states_style

{

"layer": us_counties,

"name": 'US Couties',

"visible": true,

"minZoom": 1,

"style": us_counties_style

{

"layer": us_outline,

"name": 'US Outline',

"visible": true,

"minZoom": 1,

"style": us_outline_style

{

"layer": earthquake,

"name": 'Earthquakes',

"visible": true,

"minZoom": 1,

"style": earthquake_style

}

];

export default layers;

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.

import { Vector as VectorSource } from 'ol/source';
import { VectorImage } from 'ol/layer';
import OpenLayersParser from "geostyler-openlayers-parser";

const parser = new OpenLayersParser();

let vector_style = {
    "rules": [
        {
            "symbolizers": [
                {
                    "kind": "Fill",
                    "color": "#cccccc",
                    "outlineColor": "#525252",
                    "outlineWidth": 1
                },
                {
                    "color": "#fff",
                    "font": ["Arial"],
                    "fontStyle": "normal",
                    "fontWeight": "bold",
                    "haloColor": "#000",
                    "haloWidth": 4,
                    "kind": "Text",
                    "label": "{{name}}",
                    "size": 14
                }
            ]
        }
    ]
}

let vector_layer = new VectorImage({
    source: new VectorSource({
        features: new GeoJSON({'featureProjection': 'EPSG:3857'}).readFeatures(geojson)
    })
});

parser.writeStyle(vector_style)
    .then(({output: olStyle}) => vector_layer.setStyle(olStyle))
    .catch(error => console.log(error));

import { Vector as VectorSource } from 'ol/source';

import { VectorImage } from 'ol/layer';

import OpenLayersParser from "geostyler-openlayers-parser";

const parser = new OpenLayersParser();

let vector_style = {

"rules": [

{

"symbolizers": [

{

"kind": "Fill",

"color": "#cccccc",

"outlineColor": "#525252",

"outlineWidth": 1

{

"color": "#fff",

"font": ["Arial"],

"fontStyle": "normal",

"fontWeight": "bold",

"haloColor": "#000",

"haloWidth": 4,

"kind": "Text",

"label": "{{name}}",

"size": 14

}

]

}

]

}

let vector_layer = new VectorImage({

source: new VectorSource({

features: new GeoJSON({'featureProjection': 'EPSG:3857'}).readFeatures(geojson)

})

});

parser.writeStyle(vector_style)

.then(({output: olStyle}) => vector_layer.setStyle(olStyle))

.catch(error => console.log(error));

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.

<template>
    <span>
    <div v-if = "layer.get('isExpanded')" style="margin-top: 10px;">
        <div :key="index" v-for="(rule, index) in layer.geostyle.rules">
            <span v-if = "layer.geostyle.rules.length > 1">
                <span class="material-symbols-outlined cursor-pointer" style="color: #54b582; font-size: 32px; font-variation-settings: 'FILL' 1; vertical-align: top" @click = "toggleSubLayer(layer, index, $event)">
                    check_circle
                </span>
            </span>
            <span :ref="`legend-vector-${layer.get('name')}-${index}`" v-html="renderLegend(layer, index)"></span>
        </div>    
    </div>
    </span>
</template>


<script>
import LegendRenderer from "geostyler-legend/dist/LegendRenderer/LegendRenderer";
export default {
    name: "InLegend",
    props: ["layer"],
    methods: {
        renderLegend(lyr, idx){                   
            setTimeout(() => {                
                let el = this.$refs[`legend-vector-${lyr.get('name')}-${idx}`];
                let iStyle = {
                    "rules": [
                        lyr.geostyle.rules[idx]
                    ]
                }
                const renderer = new LegendRenderer({
                    maxColumnWidth: 240,
                    overflow: 'group',
                    styles: [iStyle],
                    size: [230, 300],
                    hideRect: false,
                    iconSize: [100, 100]
                });
                renderer.render(el[0]);
            }, 10);            
        },
        toggleSubLayer(layer, index, e) {
            if (layer.geostyle.rules[index]['filter'][0]) {
                layer.geostyle.rules[index]['filter'][0] = "";
                e.target.style.fontVariationSettings = '"FILL" 0';
            } else {
                layer.geostyle.rules[index]['filter'][0] = layer.geostyleTwin.rules[index]['filter'][0];
                e.target.style.fontVariationSettings = '"FILL" 1';
            }
            layer.getSource().changed();
        }        
    }
};
</script>

<span>

check_circle

</span>

</div>

</span>

</template>

import LegendRenderer from "geostyler-legend/dist/LegendRenderer/LegendRenderer";

export default {

name: "InLegend",

props: ["layer"],

methods: {

renderLegend(lyr, idx){

setTimeout(() => {

let el = this.$refs[`legend-vector-${lyr.get('name')}-${idx}`];

let iStyle = {

"rules": [

lyr.geostyle.rules[idx]

]

}

const renderer = new LegendRenderer({

maxColumnWidth: 240,

overflow: 'group',

styles: [iStyle],

size: [230, 300],

hideRect: false,

iconSize: [100, 100]

});

renderer.render(el[0]);

}, 10);

toggleSubLayer(layer, index, e) {

if (layer.geostyle.rules[index]['filter'][0]) {

layer.geostyle.rules[index]['filter'][0] = "";

e.target.style.fontVariationSettings = '"FILL" 0';

} else {

layer.geostyle.rules[index]['filter'][0] = layer.geostyleTwin.rules[index]['filter'][0];

e.target.style.fontVariationSettings = '"FILL" 1';

}

layer.getSource().changed();

}

};

</script>

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.

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

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

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

1. Install geostyler and geostyler-legend

2. Understanding geostyler syntax to define styles.

3. New project structure

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

5. Implement geostyle in Vector Layer

6. Create InLegend.vue component

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

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

Leave a ReplyCancel reply

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

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

1. Install geostyler and geostyler-legend

2. Understanding geostyler syntax to define styles.

3. New project structure

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

5. Implement geostyle in Vector Layer

6. Create InLegend.vue component

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

Related Posts

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

Leave a ReplyCancel reply