Getting Started with the Vue Maps Component in Vue 2

22 Jul 202610 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion^® Vue Maps component. By the end of this guide, you’ll have a working Maps component rendering the world map from a local shape data file.

Note: If you’re using Vue 3, refer to the Vue 3 Getting Started guide.

Note: Vue 2 reached end-of-life on December 31, 2023. For new projects, we strongly recommend using Vue 3.

You can explore the Maps component’s capabilities using the following video:

Prerequisites

Ensure that the development environment meets the required criteria listed in System requirements for Syncfusion^® Vue UI components.

Dependencies

The following are the minimum dependencies required to use the Maps component.

|-- @syncfusion/ej2-vue-maps
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-splitbuttons
    |-- @syncfusion/ej2-vue-base
    |-- @syncfusion/ej2-svg-base
    |-- @syncfusion/ej2-maps

Setting Up the Vue 2 Project

To generate a Vue 2 project using Vue-CLI, use the vue create command. Install Vue CLI globally using either npm or Yarn:

npm

npm install -g @vue/cli
vue create quickstart

yarn

yarn global add @vue/cli
vue create quickstart

When prompted, choose the option Default ([Vue 2] babel, eslint) from the menu.

Vue 2 project

Once the quickstart project is set up with default settings, navigate to the project directory:

cd quickstart

Now, proceed to add Syncfusion^® packages to the project.

Add Syncfusion^® Vue Packages

Syncfusion^® packages are available at npmjs.com. To use the Maps component, install the @syncfusion/ej2-vue-maps package. Use the latest stable version compatible with Vue 2.

npm

npm install @syncfusion/ej2-vue-maps

yarn

yarn add @syncfusion/ej2-vue-maps

Note: npm v5+ saves packages to dependencies by default; the --save flag is not required.

Adding Syncfusion^® Vue Maps Component

Note: Before adding the Maps component, make sure the map shape data is available in your project.

In this example, the shape data is imported from a local world-map.js file placed in the src folder.
Download the world_map sample data (ZIP archive), extract it, and place the resulting world-map.js file in the src folder of your project.
You can also use any local GeoJSON data or load shape data from an external source.

Step 1: Import and register the Maps component in the script section of the src/App.vue file.

~/src/App.vue
<script>
import { MapsComponent, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';

export default {
    components: {
        'ejs-maps' : MapsComponent,
        'e-layers' : LayersDirective,
        'e-layer' : LayerDirective
    },
    data () {
        return {
            shapeData: world_map
        }
    }
}
</script>

Step 2: In the template section, define the Maps component.

~/src/App.vue
<template>
    <div class="wrapper">
        <ejs-maps id='maps'>
            <e-layers>
                <e-layer :shapeData='shapeData'></e-layer>
            </e-layers>
        </ejs-maps>
    </div>
</template>

Here is the combined code for the above steps in the src/App.vue file:

~/src/App.vue
<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-maps id='maps'>
               <e-layers>
                    <e-layer :shapeData='shapeData'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>
import { MapsComponent, LayersDirective, LayerDirective } 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>

Run the Project

To run the project, use either npm or Yarn:

npm

npm run serve

yarn

yarn run serve

Open the generated local URL (for example, http://localhost:8080) from terminal in the browser to see the basic Maps component rendering the world map.

Module Injection

The Vue Maps component uses a modular architecture where features are segregated into individual modules. To use advanced features, you must explicitly inject the corresponding modules using the Vue provide option. This approach optimizes performance by loading only the features you need.

The following modules are available:

Annotations - Inject this provider to use annotations feature.
Bubble - Inject this provider to use bubble feature.
DataLabel - Inject this provider to use data label feature.
Highlight - Inject this provider to use highlight feature.
Legend - Inject this provider to use legend feature.
Marker - Inject this provider to use marker feature.
MapsTooltip - Inject this provider to use tooltip feature.
NavigationLine - Inject this provider to use navigation lines feature.
Selection - Inject this provider to use selection feature.
Zoom - Inject this provider to use zooming and panning feature.
Polygon - Inject this provider to use polygon feature.

In the following example, the basic Maps component is extended with MapsTooltip, DataLabel, and Legend modules to display tooltips, data labels, and a legend using sample geographic data.

<template>
   <div class="wrapper">
        <ejs-maps id='maps'></ejs-maps>
    </div>
</template>
<script>
import { MapsComponent, Legend, DataLabel, MapsTooltip } from '@syncfusion/ej2-vue-maps';

export default {
    components: {
        'ejs-maps': MapsComponent
    },
    data:function(){
        return{ };
    },
    provide: {
       maps: [Legend, DataLabel, MapsTooltip]
    }
}
</script>

Render Shapes from GeoJSON Data

This section explains how to bind GeoJSON data to the map.

The following snippet defines a FeatureCollection containing a single state (Massachusetts):

const usMap = {
    "type": "FeatureCollection",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
    "features": [
        {
            "type": "Feature",
            "properties": { "iso_3166_2": "MA", "name": "Massachusetts", "admin": "United States of America" },
            "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -70.801756294617277, 41.248076234530558 ] ] ] ] }
        }
    ]
};

Map shapes are rendered within layers. Add a layer collection to the Maps by using the layers property, then bind the GeoJSON data to the layer’s shapeData property.

~/src/App.vue
<template>
    <div id="map">
        <div class='wrapper'>
            <ejs-maps >
                <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>

Note: For the full set of world map shape data used in the basic example, download the world_map sample data (ZIP archive), extract it, and place the resulting world-map.js file in the src folder of your project.

Troubleshooting

The following are common issues you may encounter when getting started with the Maps component:

Blank map is displayed — Ensure that the shape data is correctly imported and that the file path in the import statement matches the file’s location in your project.
world_map is not defined error — Verify that world-map.js exists in the src folder.
Module features do not render (tooltips, legend, data labels) — Confirm the corresponding module is added to the provide.maps array in the Vue component.
Shape renders off-canvas or is invisible — The shape’s CRS does not match the map’s default projection. Set projectionType on the MapsComponent (for example, Equirectangular, Mercator, or Miller) or transform the GeoJSON to the expected CRS.

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Getting Started with the Vue Maps Component in Vue 2

Prerequisites

Dependencies

Setting Up the Vue 2 Project

Add Syncfusion^® Vue Packages

Adding Syncfusion^® Vue Maps Component

Run the Project

Module Injection

Render Shapes from GeoJSON Data

Troubleshooting

Getting Started with the Vue Maps Component in Vue 2

Prerequisites

Dependencies

Setting Up the Vue 2 Project

Add Syncfusion® Vue Packages

Adding Syncfusion® Vue Maps Component

Run the Project

Module Injection

Render Shapes from GeoJSON Data

Troubleshooting

Add Syncfusion^® Vue Packages

Adding Syncfusion^® Vue Maps Component