The zooming feature is used to zoom in and out of Maps to show in-depth information. It is controlled by the zoomFactor property of the zoomSettings. The zoomFactor is increased or decrease dynamically based on zoom in and out interaction.
Enable zooming
Zooming of Maps is enabled by setting the enable property of zoomSettings to true.
Enable panning
To enable the panning feature, set the enablePanning property of zoomSettings to true.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :zoomSettings='zoomSettings' >
<e-layers>
<e-layer :shapeData='shapeData' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Zoom } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
zoomSettings: {
enable: true,
enablePanning: true
},
shapeData: world_map,
}
},
provide: {
maps: [Zoom]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Zooming can be performed in following types:
By default, the toolbar is rendered with zoom-in, zoom-out, and reset options when it is set to true in the enable property of zoomSettings.
The following options are available in toolbar.
The following properties are available in toolbars to customize the zooming toolbars.
color - Applies the color for toolbars in Maps.highlightColor - Applies the color for the zooming toolbar when the mouse has hovered on the toolbar element in Maps.horizontalAlignment - To customize the position type of toolbar when it is placed horizontally.selectionColor - Applies the color for the zooming toolbar when clicking the zooming toolbar in Maps.toolBarOrientation - To customize the orientation of the zooming toolbar.toolbars - To customize the items that are to be shown in the zooming toolbar in Maps.verticalAlignment - To customize the position type of toolbar when it is placed vertically.<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :zoomSettings='zoomSettings' >
<e-layers>
<e-layer :shapeData='shapeData' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Zoom } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
zoomSettings: {
enable: true,
color: 'green',
highlightColor: 'blue',
selectionColor: 'orange',
horizontalAlignment: 'Center',
toolbars: ['ZoomIn', 'ZoomOut', 'Pan', 'Reset']
},
shapeData: world_map,
}
},
provide: {
maps: [Zoom]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>To enable or disable the pinch zooming, use the pinchZooming property in zoomSettings.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :zoomSettings='zoomSettings' >
<e-layers>
<e-layer :shapeData='shapeData' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Zoom } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
zoomSettings: {
enable: true,
pinchZooming: true
},
shapeData: world_map,
}
},
provide: {
maps: [Zoom]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>To enable or disable the single-click zooming, use the zoomOnClick property in zoomSettings.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :zoomSettings='zoomSettings' >
<e-layers>
<e-layer :shapeData='shapeData' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Zoom } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
zoomSettings: {
enable: true,
zoomOnClick: true
},
shapeData: world_map,
}
},
provide: {
maps: [Zoom]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>To enable or disable the double-click zooming, use the doubleClickZoom property in zoomSettings.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :zoomSettings='zoomSettings' >
<e-layers>
<e-layer :shapeData='shapeData' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Zoom } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
zoomSettings: {
enable: true,
doubleClickZoom: true
},
shapeData: world_map,
}
},
provide: {
maps: [Zoom]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>To enable or disable mouse wheel zooming, use the mouseWheelZoom property in zoomSettings.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :zoomSettings='zoomSettings' >
<e-layers>
<e-layer :shapeData='shapeData' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Zoom } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
zoomSettings: {
enable: true,
mouseWheelZoom: true
},
shapeData: world_map,
}
},
provide: {
maps: [Zoom]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>To enable or disable selection zooming, use the enableSelectionZooming property in zoomSettings. The enablePanning property must be set to false to enable the selection zooming in Maps.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :zoomSettings='zoomSettings' >
<e-layers>
<e-layer :shapeData='shapeData' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Zoom } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
zoomSettings: {
enable: true,
enableSelectionZooming: true,
enablePanning: false
},
shapeData: world_map,
}
},
provide: {
maps: [Zoom]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>The zooming range can be adjusted using the minZoom and maxZoom properties in zoomSettings. The minZoom value is set to 1 by default, and the maxZoom value is set to 10.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :zoomSettings='zoomSettings' >
<e-layers>
<e-layer :shapeData='shapeData' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Zoom } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
zoomSettings: {
enable: true,
minZoom: 2,
maxZoom: 12
},
shapeData: world_map,
}
},
provide: {
maps: [Zoom]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>To zoom in or zoom out the Maps with animation, use the animationDuration property in layers.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :zoomSettings='zoomSettings' >
<e-layers>
<e-layer :shapeData='shapeData' :animationDuration='animationDuration' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Zoom } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
zoomSettings: {
enable: true,
mouseWheelZoom: true
},
shapeData: world_map,
animationDuration: 500
}
},
provide: {
maps: [Zoom]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="app">
<div class='wrapper'>
<ejs-maps :zoomSettings='zoomSettings' >
<e-layers>
<e-layer :shapeData='shapeData' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Zoom } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
zoomSettings: {
enable: true,
},
shapeData: world_map,
}
},
provide: {
maps: [Zoom]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Each shape in the Maps can be selected and deselected during interaction with the shapes. Selection is enabled by setting the enable property of selectionSettings to true.
The following properties are available to customize the selection of Maps elements such as shapes, bubbles, markers and legends.
border - To customize the color, width and opacity of the border of which element is selected in Maps.fill - Applies the color for the element that is selected.opacity - To customize the transparency for the element that is selected.enableMultiSelect - To enable or disable the selection for multiple shapes or markers or bubbles in the Maps.By tapping on the specific legend, the shapes which are bounded to the selected legend is also selected and vice versa.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :layers='layers' :legendSettings='legendSettings'>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Selection, Legend } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return {
layers: [{
shapeData: world_map,
dataSource: [{ "Country": "China", "Membership": "Permanent"},
{"Country": "France","Membership": "Permanent" },
{ "Country": "Russia","Membership": "Permanent"},
{"Country": "Kazakhstan","Membership": "Non-Permanent"},
{ "Country": "Poland","Membership": "Non-Permanent"},
{"Country": "Sweden","Membership": "Non-Permanent"}],
shapePropertyPath: 'name',
shapeDataPath: 'Country',
selectionSettings: {
enable: true,
fill: 'blue',
border: { color: 'white', width: 2}
},
shapeSettings: {
colorValuePath: 'Membership',
colorMapping: [
{
value: 'Permanent', color: '#D84444'
},
{
value: 'Non-Permanent', color: '#316DB5'
}]
}
}],
legendSettings: {
visible: true
}
}
},
provide: {
maps: [Selection, Legend]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>To enable the selection for bubbles in Maps, set the selectionSettings in bubbleSettings and set the enable property of selectionSettings as true.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :layers='layers'>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Selection, Bubble } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return {
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
bubbleSettings: [{
visible: true,
dataSource: [
{ name: 'India', population: '38332521' },
{ name: 'South Africa', population: '19651127' },
{ name: 'Pakistan', population: '3090416' }
],
selectionSettings: {
enable: true,
fill: 'green',
border: { color: 'white', width: 2}
},
valuePath: 'population'
}]
}]
}
},
provide: {
maps: [Selection, Bubble]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>To enable the selection for markers in Maps, set the selectionSettings in themarkerSettings and set the enable property of the selectionSettings as true.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :layers='layers'>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Selection, Marker } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return {
layers: [{
shapeData: world_map,
markerSettings: [{
visible: true,
height: 20,
width: 20,
fill: 'green',
shape:'Balloon',
selectionSettings: {
enable: true,
fill: 'blue',
border: { color: 'white', width: 2}
},
dataSource: [
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 59.88893689676585, longitude: -109.3359375, name:'North America'},
{ latitude: -6.64607562172573, longitude: -55.54687499999999, name:'South America'}
]
}],
}]
}
},
provide: {
maps: [Selection, Marker]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>The shapeSelection method can be used to select each shape in the Maps.
LayerIndex, propertyName, country name, and selected value as a boolean state(true / false) are the input parameters for this method.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps ref='maps'>
<e-layers>
<e-layer :shapeData='shapeData' :selectionSettings='selectionSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
<ejs-button id='selection' @click.native='select'>selection</ejs-button>
<ejs-button id='unselection' @click.native='unselect'>unselection</ejs-button>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Selection } from '@syncfusion/ej2-vue-maps';
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
Vue.use(ButtonPlugin);
export default {
data () {
return{
shapeData: world_map,
selectionSettings: {
enable: true,
fill: 'green',
border: { color: 'white', width: 2}
}
}
},
provide: {
maps: [Selection]
},
methods:{
select:function(){
this.$refs.maps.shapeSelection(0, "continent", "Asia", true);
},
unselect:function(){
this.$refs.maps.shapeSelection(0, "continent", "Asia", false);
}
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>The shape is initially selected using the initialShapeSelection, and the values are mapped to the shapePath and shapeValue.
Note: initialShapeSelection is an Array property.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :selectionSettings= 'selectionSettings' :initialShapeSelection= 'initialShapeSelection'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Marker, Legend, Selection } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
selectionSettings: {
enable: true,
fill: 'green',
border: { color: 'white', width: 2}
},
shapeData: world_map,
initialShapeSelection: [
{ shapePath: 'continent', shapeValue: 'Africa' },
{ shapePath: 'name', shapeValue: 'India' }
],
}
},
provide: {
maps: [Selection, Marker]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Using the initialMarkerSelection, the marker shape can be selected initially. Markers render based on the latitude and longitude values.
Note: initialMarkerSelection is an Array property.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :markerSettings= 'markerSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Marker, Selection } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return {
shapeData: world_map,
markerSettings: [{
visible: true,
height: 20,
width: 20,
fill: 'green',
shape:'Balloon',
initialMarkerSelection: [{
latitude: -6.64607562172573, longitude: -55.54687499999999
}],
selectionSettings: {
enable: true,
fill: 'blue',
border: { color: 'white', width: 2}
},
dataSource: [
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 59.88893689676585, longitude: -109.3359375, name:'North America'},
{ latitude: -6.64607562172573, longitude: -55.54687499999999, name:'South America'}
]
}]
}
},
provide: {
maps: [Selection, Marker]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Each shape in the Maps can be highlighted during mouse hover on the Maps elements such as shapes, bubbles, markers and legends. Highlight is enabled by setting the enable property of highlightSettings to true.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :layers='layers' :legendSettings='legendSettings'>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Highlight, Legend } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return {
layers: [
{
shapeData: world_map,
dataSource: [
{ "Country": "China", "Membership": "Permanent"},
{ "Country": "France", "Membership": "Permanent" },
{ "Country": "Russia", "Membership": "Permanent"},
{ "Country": "Kazakhstan", "Membership": "Non-Permanent"},
{ "Country": "Poland", "Membership": "Non-Permanent"},
{ "Country": "Sweden", "Membership": "Non-Permanent"}
],
shapePropertyPath: 'name',
shapeDataPath: 'Country',
highlightSettings: {
enable: true,
fill: 'blue',
border: { color: 'white', width: 2}
},
shapeSettings: {
colorValuePath: 'Membership',
colorMapping: [
{
value: 'Permanent', color: '#D84444'
},
{
value: 'Non-Permanent', color: '#316DB5'
}]
}
}
],
legendSettings: {
visible: true
}
}
},
provide: {
maps: [Highlight, Legend]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>To enable the highlight for bubbles in Maps, set the highlightSettings in bubbleSettings and set the enable property of highlightSettings as true.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :layers='layers'>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Highlight, Bubble } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return {
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
bubbleSettings: [{
visible: true,
dataSource: [
{ name: 'India', population: '38332521' },
{ name: 'South Africa', population: '19651127' },
{ name: 'Pakistan', population: '3090416' }
],
highlightSettings: {
enable: true,
fill: 'green',
border: { color: 'white', width: 2}
},
valuePath: 'population'
}]
}]
}
},
provide: {
maps: [Highlight, Bubble]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>To enable the highlight for markers in Maps, set the highlightSettings in markerSettings and set the enable property of highlightSettings as true.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :layers='layers'>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, Highlight, Marker } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return {
layers: [{
shapeData: world_map,
markerSettings: [{
visible: true,
height: 20,
width: 20,
fill: 'green',
shape:'Balloon',
highlightSettings: {
enable: true,
fill: 'blue',
border: { color: 'white', width: 2}
},
dataSource: [
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 59.88893689676585, longitude: -109.3359375, name:'North America'},
{ latitude: -6.64607562172573, longitude: -55.54687499999999, name:'South America'}
]
}],
}]
}
},
provide: {
maps: [Highlight, Marker]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>On mouse over or touch end event, the tooltip is used to get more information about the layer, bubble, or marker. It can be enabled separately for layer or bubble or marker by using the visible property of tooltipSettings as true. The valuePath property in the tooltip takes the field name that presents in dataSource and displays that value as tooltip text. The tooltipDisplayMode property is used to change the display mode of the tooltip in Maps. Following display modes of tooltip are available in the Maps component. By default, tooltipDisplayMode is set to MouseMove.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :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 { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
shapeData: world_map,
tooltipSettings: {
visible: true,
valuePath: 'name'
}
}
},
provide: {
maps: [MapsTooltip]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>The following properties are available in the tooltipSettings to customize the tooltip of the Maps component.
border - To customize the color, width and opacity of the border of the tooltip in layers, markers, and bubbles of Maps.fill - Applies the color of the tooltip in layers, markers, and bubbles of Maps.format - To customize the format of the tooltip in layers, markers, and bubbles of MapstextStyle - To customize the style of the text in the tooltip for layers, markers, and bubbles of Maps.<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :tooltipRender='tooltipRender'>
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :shapeSettings='shapeSettings' :dataSource='dataSource' :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 { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
shapeData: world_map,
shapePropertyPath: 'name',
shapeDataPath: 'name',
shapeSettings: {
fill: '#E5E5E5',
colorMapping: [
{ color: '#b3daff', value: '1' },
{ color: '#80c1ff', value: '2' },
{ color: '#1a90ff', value: '3' },
{ color: '#005cb3', value: '7' }
],
colorValuePath: 'value1'
},
dataSource: [
{ "name": "India", "value1": "3", "value2": "2", "country": "India" },
{ "name": "Dominican Rep.", "value1": "3", "value2": "2", "country": "West Indies" },
{ "name": "Cuba", "value1": "3", "value2": "2", "country": "West Indies" },
{ "name": "Jamaica", "value1": "3", "value2": "2", "country": "West Indies" },
{ "name": "Haiti", "value1": "3", "value2": "2", "country": "West Indies" },
{ "name": "Guyana", "value1": "3", "value2": "2", "country": "West Indies" },
{ "name": "Suriname", "value1": "3", "value2": "2", "country": "West Indies"},
{ "name": "Trinidad and Tobago", "value1": "3", "value2": "2", "country": "West Indies" },
{ "name": "Sri Lanka", "value1": "3", "value2": "1", "country": "Sri Lanka" },
{ "name": "United Kingdom", "value1": "3", "value2": "0", "country": "England" },
{ "name": "Pakistan", "value1": "2", "value2": "1", "country": "Pakistan" },
{ "name": "New Zealand", "value1": "1", "value2": "0", "country": "New Zealand" },
{ "name": "Australia", "value1": "7", "value2": "5", "country": "Australia" }
],
tooltipSettings: {
visible: true,
valuePath: 'name',
format: '${name}: ${value1}',
fill: '#D0D0D0',
textStyle: {
color: 'green',
fontFamily: 'Times New Roman',
fontStyle: 'Sans-serif'
}
}
}
},
provide: {
maps: [MapsTooltip]
},
methods:{
tooltipRender:function(args){
if (!args.options.data) {
args.cancel = true;
}
}
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>The HTML element can be rendered in the tooltip of the Maps using the template property of the tooltipSettings. In the following example, ${value1} and ${value2} are the place holders in the HTML element to display the value1 and value2 values of the corresponding shape.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps>
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :dataSource='dataSource' :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 { world_map } from './world-map.js';
import { default_data } from './default-data.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
shapeData: world_map,
shapePropertyPath: 'continent',
shapeDataPath: 'continent',
dataSource: default_data,
tooltipSettings: {
visible: true,
valuePath: 'continent',
template: '<div style="width:60px; text-align:center; background-color: white; border: 2px solid black; padding-bottom: 10px;padding-top: 10px;padding-left: 10px;padding-right: 10px;"><span>${continent}</span></div>',
textStyle: {
color: 'black'
}
}
}
},
provide: {
maps: [MapsTooltip]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>