Vue
Demos
Support
Forum
Download
Search results

Internationalization

Maps provides support for internationalization for the below elements.

  • Datalabel
  • Tooltip

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.

Source
Preview
app.vue
<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>
@import "../../node_modules/@syncfusion/ej2-vue-maps/styles/material.css";
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>
Previous
Next