Maps provides support for internationalization for the below elements.
For more information about number and date formatter you can refer
internationalization.
Globalization
Globalization is the process of designing and developing an component that works in different
cultures/locales. Internationalization library is used to globalize number, date, time values in
Maps component using [format] property in the maps model.
Numeric Format
In the below example tooltip is globalized to Deutsch culture.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :format='format' >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :dataSource='dataSource' :shapeSettings='shapeSettings' :tooltipSettings='tooltipSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, MapsTooltip } from '@syncfusion/ej2-vue-maps';
import { setCulture } from '@syncfusion/ej2-base';
import { usMap } from './usa.js';
import { electionData } from './election-data.js';
setCulture('de');
Vue.use(MapsPlugin);
export default {
data () {
return{
format: 'c',
shapeData: usMap,
shapePropertyPath: 'name',
shapeDataPath: 'State',
dataSource : electionData,
tooltipSettings: {
visible: true,
valuePath: 'Trump'
},
shapeSettings: {
colorValuePath: 'Candidate',
colorMapping: [{
value: 'Trump', color: '#D84444'
},
{
value: 'Clinton', color: '#316DB5'
}]
}
}
},
provide: {
maps: [MapsTooltip]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>