Data labels provide information to the user about the shapes.
You can add label text to the shapes of the Maps component using dataLabelSettings
. The following sample demonstrates the names of all the states n the United States in data labels.
<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 Vue from 'vue';
import { MapsPlugin, DataLabel } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
Vue.use(MapsPlugin);
export default {
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>
The
autofill
property is used inshapeSettings
to apply the default palette colors to the shapes.
Some data labels intersect with other labels in this output. The following options are used to avoid intersecting:
This provides an option to specify the smart labels when the labels intersect with the corresponding shape border. In SmartLabelMode
property, you can specify any of the following options.
<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 Vue from 'vue';
import { MapsPlugin, DataLabel } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
Vue.use(MapsPlugin);
export default {
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>
This specifies the intersect action when the labels intersect with another labels. In IntersectionAction
property, you can specify any of the following options.
<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 Vue from 'vue';
import { MapsPlugin, DataLabel } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
Vue.use(MapsPlugin);
export default {
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>
The template supports customizing labels of each layers using the [template] property.
<template>
<div id="template">
<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 Vue from 'vue';
import { MapsPlugin, DataLabel } from '@syncfusion/ej2-vue-maps';
import { usMap } from './usa.js';
Vue.use(MapsPlugin);
let contentVue = Vue.component("contentTemplate", {
template: '<div>DataLabel Tempalte</div>',
data() {
return {
data: {}
};
}
});
let contentTemplate = function() {
return { template: contentVue };
};
export default {
data () {
return{
shapeData: usMap,
shapeSettings: {
autofill:true
},
dataLabelSettings: {
visible: true,
labelPath: 'name',
template:contentTemplate
}
}
},
provide: {
maps: [DataLabel]
},
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>