Data labels in Vue Maps component

11 Jun 202424 minutes to read

Data labels provide information to users about the shapes of the Maps component. It can be enabled by setting the visible property of the dataLabelSettings to true.

To use the data label feature, the DataLabel module must be injected.

Adding data labels

To display the data labels in the Maps, set the field name containing the text to be displayed from the data source or shape data in the labelPath property of the dataLabelSettings property.

In the following example, the value of labelPath property is set from the field name in the shape data of the Maps layer.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
                    :dataLabelSettings='dataLabelSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script setup>
import { provide } from "vue";

import { MapsComponent as EjsMaps, DataLabel, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';

const shapeData = usMap;
const shapeSettings = {
    autofill: true
};

const dataLabelSettings = {
    visible: true,
    labelPath: 'name'
};

provide('maps',  [DataLabel]);

</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>
<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
                    :dataLabelSettings='dataLabelSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, DataLabel, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';

export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
    return {
        shapeData: usMap,
        shapeSettings: {
           autofill:true
        },
        dataLabelSettings: {
            visible: true,
            labelPath: 'name'
        }
    }
},
provide: {
    maps: [DataLabel]
},
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

In the following example, the value of labelPath property is set from the field name in the data source of the layer settings.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app">
          <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :dataSource='dataSource' :shapeSettings='shapeSettings'
                    :dataLabelSettings='dataLabelSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script setup>
import { provide } from "vue";

import { MapsComponent as EjsMaps, DataLabel, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';

const shapeData = world_map;
const shapePropertyPath = 'continent';

const shapeDataPath = 'continent';

const dataLabelSettings = {
    visible: true,
    labelPath: 'continent',
    smartLabelMode: 'Trim'
};

const dataSource = [
    { continent: "North America", color: '#71B081', borderColor: '#CCFFE5', width: 2 },
    { continent: "South America", color: '#5A9A77', borderColor: 'red', width: 2 },
    { continent: "Africa", color: '#498770', borderColor: '#FFCC99', width: 2 },
    { continent: "Europe", color: '#39776C', borderColor: '#66B2FF', width: 2 },
    { continent: "Asia", color: '#266665', borderColor: '#999900', width: 2 },
    { continent: "Oceania", color: '#124F5E', borderColor: 'blue', width: 2 }
];

const shapeSettings = {
    autofill: true
};

provide('maps',  [DataLabel]);

</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>
<template>
    <div id="app">
          <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :dataSource='dataSource' :shapeSettings='shapeSettings'
                    :dataLabelSettings='dataLabelSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, DataLabel, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';

export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
    return{
        shapeData: world_map,
        shapePropertyPath: 'name',
        shapeDataPath: 'name',
        dataLabelSettings: {
            visible: true,
            labelPath: "continent",
            smartLabelMode: 'Trim'
        },
        dataSource: [
            {"name": "Afghanistan", "value": 53, "countryCode": "AF", "population": "29863010", "color": "red", "density": "119", "continent": "Asia"},
            {"name": "Albania", "value": 117, "countryCode": "AL", "population": "3195000", "color": "Blue", "density": "111", "continent": "Europe"},
            {"name": "Algeria", "value": 15, "countryCode": "DZ", "population": "34895000", "color": "Green", "density": "15", "continent": "Africa"}
        ],
        shapeSettings: {
            autofill: true
        }
    }
},
provide: {
    maps: [DataLabel]
},
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Customization

The following properties are available in the dataLabelSettings to customize the data label of the Maps component.

border - To customize the color, width and opacity for the border of the data labels in Maps.
fill - To apply the color of the data labels in Maps.
opacity - To customize the transparency of the data labels in Maps.
textStyle - To customize the text style of the data labels in Maps.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
                    :dataLabelSettings='dataLabelSettings' :tooltipSettings='tooltipSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script setup>
import { provide } from "vue";

import { MapsComponent as EjsMaps, DataLabel, MapsTooltip, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';

const shapeData = usMap;
const shapeSettings = {
    autofill: true
};

const dataLabelSettings = {
    visible: true,
    smartLabelMode: 'Hide',
    intersectionAction: 'Trim',
    labelPath: 'name',
    border: {
        color: 'green',
        width: 2
    },
    fill: 'transparent',
    opacity: 0.9,
    textStyle: {
        size: '17px',
        fontStyle: 'Sans-serif',
        fontWeight: 'normal'
    }
};

const tooltipSettings = {
    visible: true,
    valuePath: 'name'
};

provide('maps',  [DataLabel, MapsTooltip]);

</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>
<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
                    :dataLabelSettings='dataLabelSettings' :tooltipSettings='tooltipSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, DataLabel, MapsTooltip, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';

export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
    return {
        shapeData: usMap,
        shapeSettings: {
           autofill:true
        },
        dataLabelSettings: {
            visible: true,
            smartLabelMode: 'Hide',
            intersectionAction: 'Trim',
            labelPath: 'name',
            border: {
                color: 'green',
                width: 2
            },
            fill: 'transparent',
            opacity: 0.9,
            textStyle: {
                size: '17px',
                fontStyle: 'Sans-serif',
                fontWeight: 'normal'
            }
        },
        tooltipSettings: {
            visible: true,
            valuePath: 'name'
        }
    }
},
provide: {
    maps: [DataLabel, MapsTooltip]
},
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Label animation

The data labels can be animated during the initial rendering of the Maps. This can be enabled by setting the animationDuration property in the dataLabelSettings of the Maps. The duration of the animation is specified in milliseconds.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-maps>
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings' :dataLabelSettings='dataLabelSettings'
                        :tooltipSettings='tooltipSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script setup>
import { provide } from "vue";

import { MapsComponent as EjsMaps, DataLabel, MapsTooltip, LayersDirective as ELayers, LayerDirective as ELayer } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';

const shapeData = usMap;
const shapeSettings = {
    autofill: true
};

const dataLabelSettings = {
    visible: true,
    smartLabelMode: 'Hide',
    intersectionAction: 'Trim',
    labelPath: 'name',
    animationDuration: 4000
};

const tooltipSettings = {
    visible: true,
    valuePath: 'name'
};

provide('maps',  [DataLabel, MapsTooltip]);

</script>
<style>
.wrapper {
    max-width: 400px;
    margin: 0 auto;
}
</style>
<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-maps>
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings' :dataLabelSettings='dataLabelSettings'
                        :tooltipSettings='tooltipSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, DataLabel, MapsTooltip, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';

export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
    data() {
        return {
            shapeData: usMap,
            shapeSettings: {
                autofill: true
            },
            dataLabelSettings: {
                visible: true,
                smartLabelMode: 'Hide',
                intersectionAction: 'Trim',
                labelPath: 'name',
                animationDuration: 4000
            },
            tooltipSettings: {
                visible: true,
                valuePath: 'name'
            }
        }
    },
    provide: {
        maps: [DataLabel, MapsTooltip]
    },
}
</script>
<style>
.wrapper {
    max-width: 400px;
    margin: 0 auto;
}
</style>

Smart labels

The Maps component provides an option to handle the labels when they intersect with the corresponding shape borders using the smartLabelMode property. The following options are available in the smartLabelMode property.

None - It specifies that no action is taken, when a label exceeds the shape’s region.
Hide - It specifies to hide the labels, when it exceeds the shape’s region.
Trim - It specifies to trim the labels, when it exceeds the shape’s region.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
                    :dataLabelSettings='dataLabelSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script setup>
import { provide } from "vue";

import { MapsComponent as EjsMaps, DataLabel, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';

const shapeData = usMap;
const shapeSettings = {
    autofill:true
};
const dataLabelSettings = {
    visible: true,
    labelPath: 'name',
    smartLabelMode:'Hide'
};

provide('maps',  [DataLabel]);

</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>
<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
                    :dataLabelSettings='dataLabelSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, DataLabel, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';

export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
    return {
        shapeData: usMap,
        shapeSettings: {
           autofill:true
        },
        dataLabelSettings: {
            visible: true,
            labelPath: 'name',
            smartLabelMode:'Hide'
        }
    }
},
provide: {
    maps: [DataLabel]
},
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Intersect action

The Maps component provides an option to handle the labels when a label intersects with another label using the intersectionAction property. The following options are available in the intersectionAction property.

None - It specifies that no action is taken, when the labels intersect.
Hide - It specifies to hide the labels when they intersect.
Trim - It specifies to trim the labels when they intersect.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app">
          <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
                    :dataLabelSettings='dataLabelSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script setup>
import { provide } from "vue";

import { MapsComponent as EjsMaps, LayerDirective as ELayer, DataLabel, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';

const shapeData = usMap;
const shapeSettings = {
    autofill:true
};

const dataLabelSettings = {
    visible: true,
    labelPath: 'name',
    intersectionAction:'Trim'
};

provide('maps',  [DataLabel]);

</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>
<template>
    <div id="app">
          <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'
                    :dataLabelSettings='dataLabelSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, DataLabel, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';

export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective,
},
data () {
    return {
        shapeData: usMap,
        shapeSettings: {
           autofill:true
        },
        dataLabelSettings: {
            visible: true,
            labelPath: 'name',
            intersectionAction:'Trim'
        }
    }
},
provide: {
    maps: [DataLabel]
},
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Adding data label as a template

The custom elements can be added as a template in the data labels by using the template property of dataLabelSettings in the Maps component.

The properties of data label such as, smartLabelMode , intersectionAction, animationDuration, border, fill, opacity and textStyle properties are not applicable to template property. The styles can be applied to the label template using the CSS styles of the HTML element.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="template">
        <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :dataSource='dataSource'
                    :dataLabelSettings='dataLabelSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script setup>
import { provide } from "vue";

import { MapsComponent as EjsMaps, DataLabel, LayersDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
import { createApp } from 'vue';

const app = createApp({});


let contentVue = app.component("contentTemplate", {
    template: '<div><div><img src="https://ej2.syncfusion.com/demos/src/maps/images/weather-clear.png" style="width:22px;height:22px"> </div>  </img></div>',
        data() {
            return {
                data: {}
            };
        }
});
let contentTemplate = function() {
    return { template: contentVue };
};

const shapeData = usMap;
const shapeSettings = {
    autofill:true
};
const shapePropertyPath = 'name';
const shapeDataPath = 'Name';
const dataSource = [
    { "Name": "Iowa", "Population": "29863010" },
    { "Name": "Utah", "Population": "1263010" },
    { "Name": "Texas"," Population": "963010" }
];
const dataLabelSettings = {
    visible: true,
    labelPath: 'Name',
    template: contentTemplate
};

provide('maps',  [DataLabel]);

</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>
<template>
    <div id="template">
        <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :dataSource='dataSource'
                    :dataLabelSettings='dataLabelSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, DataLabel, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
import { createApp } from 'vue';

const app = createApp({});


let contentVue = app.component("contentTemplate", {
    template: '<div><div><img src="https://ej2.syncfusion.com/demos/src/maps/images/weather-clear.png" style="width:22px;height:22px"> </div>  </img></div>',
        data() {
            return {
                data: {}
            };
        }
});
let contentTemplate = function() {
    return { template: contentVue };
};
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
    return {
        shapeData: usMap,
        shapeSettings: {
           autofill:true
        },
        shapePropertyPath: 'name',
        shapeDataPath: 'Name',
        dataSource: [
            { "Name": "Iowa", "Population": "29863010" },
            { "Name": "Utah", "Population": "1263010" },
            { "Name": "Texas"," Population": "963010" }
        ],
        dataLabelSettings: {
            visible: true,
            labelPath: 'Name',
            template: contentTemplate
        }
    }
},
provide: {
    maps: [DataLabel]
},
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>