HelpBot Assistant

How can I help you?

Customization in Vue Maps component

6 Feb 202624 minutes to read

The Maps component provides various options to customize its appearance, including size, title, theme, container styling, shape properties, and projection type. This section explains how to configure these customization options.

Setting the size for Maps

The width and height of the Maps can be set using the width and height properties in the Maps component. Percentage or pixel values can be used for the height and width values.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="map">
        <div class='wrapper'>
            <ejs-maps height='300px' width='200px'>
                <e-layers>
                    <e-layer :shapeData='shapeData'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>
<script setup>

import { MapsComponent as EjsMaps} from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';

const shapeData = world_map;

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

import { MapsComponent, 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
        }
    }
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Maps title

The titleSettingsproperty configures the title displayed on the Maps component. The title can be customized using the following properties:

alignment - To customize the alignment for the text in the title for the Maps. The possible values are Center, Near and Far.
description - To set the description of the title in Maps.
text - To set the text for the title in Maps.
textStyle - To customize the text of the title in Maps.
subtitleSettings - To customize the subtitle for the Maps.

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

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

const titleSettings = {
    text: 'Maps Component',
    textStyle: {
        color: 'red',
        fontStyle: 'italic',
        fontWeight: 'regular',
        fontFamily: 'arial',
        size: '14px'
    },
    alignment: 'Center'
};

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

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

import { MapsComponent, 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 {
            titleSettings: {
                text: 'Maps Component',
                textStyle: {
                    color: 'red',
                    fontStyle: 'italic',
                    fontWeight: 'regular',
                    fontFamily: 'arial',
                    size: '14px'
                },
                alignment: 'Center'
            },
            shapeData: world_map,
            shapeSettings: {
                autofill: true
            }
        }
    }
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Setting theme

The Maps component supports the following themes:

Material
Fabric
Bootstrap
HighContrast
MaterialDark
FabricDark
BootstrapDark
Bootstrap4
HighContrastLight
Tailwind

By default, the Maps are rendered by the Material theme. The theme of the Maps component is changed using the theme property.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="map">
        <div class='wrapper'>
            <ejs-maps theme="MaterialDark">
                <e-layers>
                    <e-layer :shapeData='shapeData'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>
<script setup>

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

const shapeData = world_map;

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

import { MapsComponent, 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
        }
    }
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Customizing Maps container

The following properties are available to customize the container in the Maps.

background - To apply the background color to the container in the Maps.
border - To customize the color, width and opacity of the border of the Maps.
margin - To customize the margins of the Maps.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="map">
        <div class='wrapper'>
            <ejs-maps :background='background' :border='border' :margin='margin'>
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>
<script setup>

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

const shapeData = world_map;
const background = '#CCD1D1';
const border = {
    color: 'green',
    width: 2
};
const margin = {
    bottom: 10,
    left: 20,
    right: 20,
    top: 10
};
const shapeSettings = {
    autofill: true
};

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

import { MapsComponent, 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,
            background: '#CCD1D1',
            border: {
                color: 'green',
                width: 2
            },
            margin: {
                bottom: 10,
                left: 20,
                right: 20,
                top: 10
            },
            shapeSettings: {
                autofill: true
            }
        }
    }
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Customizing Maps area

The Maps area has a default background color of white. To change the background color, use the background property in mapsArea. The border property in mapsArea customizes the border around the Maps area.

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

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

const shapeData = world_map;
const mapsArea = {
    background: '#CCD1D1',
    border: {
        width: 2,
        color: 'green'
    }
};
const shapeSettings = {
    autofill: true,
};

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

import { MapsComponent, 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,
            mapsArea: {
                background: '#CCD1D1',
                border: {
                    width: 2,
                    color: 'green'
                }
            },
            shapeSettings: {
                autofill: true,
            }
        }
    }
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Customizing the shapes

The following properties are available in shapeSettings to customize the shapes of the Maps.

fill - To apply the fill color to the all the shapes.
autofill - To apply the palette colors to the shapes if it is set as true.
palette - To set the custom palette for the shapes.
border - To customize the color, width and opacity of the border of the shapes.
dashArray - To define the pattern of dashes and gaps that is applied to the outline of the shapes.
opacity - To customize the transparency for the shapes.

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

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

const shapeData = world_map;
const shapeSettings = {
    autofill: true,
    palette: ['#C7DE6C', '#59A076', '#88D0BC', '#FEA78C', '#FFC557'],
    border: {
        color: '#FEE1DD',
        width: 3
    },
    dashArray: '1',
    opacity: 0.9
};

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

import { MapsComponent, 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,
        shapeSettings: {
            autofill: true,
            palette: ['#C7DE6C', '#59A076', '#88D0BC', '#FEA78C', '#FFC557'],
            border: {
                color: '#FEE1DD',
                width: 3
            },
            dashArray: '1',
            opacity: 0.9
        }
    }
}
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Setting color to the shapes from the data source

The color for each shape in the Maps can be set using the colorValuePath property of shapeSettings. The value for the colorValuePath property is the field name from the data source of the shapeSettings which contains the color values.

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

import { MapsComponent as EjsMaps, 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 dataSource = [
    { continent: "North America", color: '#71B081' },
    { continent: "South America", color: '#5A9A77' },
    { continent: "Africa", color: '#498770' },
    { continent: "Europe", color: '#39776C' },
    { continent: "Asia", color: '#266665' },
    { continent: "Oceania", color: '#124F5E' }
];

const shapeSettings = {
    colorValuePath: 'color',
};

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

import { MapsComponent, 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: 'continent',
            shapeDataPath: 'continent',
            dataSource: [
                { continent: "North America", color: '#71B081' },
                { continent: "South America", color: '#5A9A77' },
                { continent: "Africa", color: '#498770' },
                { continent: "Europe", color: '#39776C' },
                { continent: "Asia", color: '#266665' },
                { continent: "Oceania", color: '#124F5E' }
            ],
            shapeSettings: {
                colorValuePath: 'color',
            }
        }
    }
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Applying border to individual shapes

The border of each shape in the Maps can be customized using the borderColorValuePath and borderWidthValuePath properties to modify the color and the width of the border respectively. The field name in the data source of the layer which contains the color and the width values must be set in the borderColorValuePath and borderWidthValuePath properties respectively. If the values of borderColorValuePath and borderWidthValuePath do not match with the field name from the data source, then the color and width of the border will be applied to the shapes using the border property in the shapeSettings.

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

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

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

const shapeDataPath = 'continent';

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 = {
    borderColorValuePath: 'borderColor',
    borderWidthValuePath: 'width',
    colorValuePath: 'color'
};

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

import { MapsComponent, 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: 'continent',
            shapeDataPath: 'continent',
            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 }
            ],
            shapeSettings: {
                borderColorValuePath: 'borderColor',
                borderWidthValuePath: 'width',
                colorValuePath: 'color'
            }
        }
    }
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Projection type

The Maps component supports the following projection types:

Mercator
Equirectangular
Miller
Eckert3
Eckert5
Eckert6
Winkel3
AitOff

The default projection is Mercator, which renders the map based on coordinates without stretching. Each projection type represents the Earth’s surface differently, affecting how shapes and distances appear on the map. To change the projection, use the projectionType property is used.

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

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

const shapeData = world_map;
const shapeSettings = {
    autofill: true,
    palette: ['#33CCFF', '#FF0000', '#800000', '#FFFF00', '#808000']
};

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

import { MapsComponent, 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,
        shapeSettings: {
            autofill: true,
            palette: ['#33CCFF', '#FF0000', '#800000', '#FFFF00', '#808000']
        }
    }
}
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Search docs

Ask HelpBot