Search results

Internationalization in Vue Maps component

04 Aug 2021 / 2 minutes to read

Maps provides support for internationalization for the below elements.

  • Data label
  • Tooltip

For more information about number and date formatter you can refer internationalization.


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.

Copied to clipboard
<div id="app">
      <div class='wrapper'>
        <ejs-maps  :format='format' >
                <e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :dataSource='dataSource' :shapeSettings='shapeSettings' :tooltipSettings='tooltipSettings'></e-layer>

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';
export default {
data () {
    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]
  .wrapper {
max-width: 400px;
margin: 0 auto;