Vue
Demos
Support
Forum
Download
Search results

Customization

To customize the layer shape, we need to modify default the layer shapeSettings property. In that we can customize the shape color by using the fill property and border by using border.color and border.width.

Source
Preview
app.vue
<template>
    <div id="map">
        <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings' :layerType='layerType' ></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data (){
    return{
        layerType: 'Geometry',
        shapeData: world_map,
        shapeSettings: {
            fill: '#33CCFF',
            border: { color: '#FFFFFF', width: 2}
        }
    }
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-maps/styles/material.css";
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

AutoFill

To apply default palette colors for shapes need to enable the autofill property.

Source
Preview
app.vue
<template>
    <div id="map">
        <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings' :layerType='layerType' ></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data (){
    return{
        layerType: 'Geometry',
        shapeData: world_map,
        shapeSettings: {
            autofill: true
        }
    }
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-maps/styles/material.css";
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Palette

you can apply own custom palette for shape, you need to provide the palette colors for palette.

Source
Preview
app.vue
<template>
    <div id="map">
        <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapeSettings='shapeSettings' :layerType='layerType' ></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data (){
    return{
        layerType: 'Geometry',
        shapeData: world_map,
        shapeSettings: {
            autofill: true,
            palette: ['#33CCFF', '#FF0000', '#800000', '#FFFF00', '#808000']
        }
    }
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-maps/styles/material.css";
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>
Previous
Next
Contents
Contents