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
.
<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>
To apply default palette colors for shapes need to enable the autofill
property.
<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>
you can apply own custom palette for shape, you need to provide the palette colors for palette
.
<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>