Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,61 @@
# Getting Started with Syncfusion® Maps Component in Vue 3

The sample demonstrates how to integrate the Syncfusion Maps component into a Vue 3 application using the Vue CLI. The following features are shown in this sample.
1. Binding GeoJSON data source
2. Introducing title
3. Applying color mapping
4. Enabling legend for the color mapped shapes
5. Enabling data labels for the shapes
6. Enabling tooltip for the shapes

The repository contains a minimal Vue 3 app (created with Vue CLI) that registers and renders the following Syncfusion components from `@syncfusion/ej2-vue-maps`:

- MapsComponent (`<ejs-maps>`)

## Prerequisites

[System requirements for Syncfusion® Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements/)

## Creating Vue application using Vue CLI

The easiest way to create a Vue application is to use the [`Vue CLI`](https://github.com/vuejs/vue-cli). Vue CLI versions higher than [`4.5.0`](https://v3.vuejs.org/guide/migration/introduction.html#vue-cli) are mandatory for creating applications using Vue 3. Use the following command to uninstall older versions of the Vue CLI.

```bash
npm uninstall vue-cli -g
```

Use the following commands to install the latest version of Vue CLI.

```bash
npm install -g @vue/cli
npm install -g @vue/cli-init
```

Create a new project using the following command.

```bash
vue create quickstart

```

Initiating a new project prompts us to select the type of project to be used for the current application. Select the option `Default (Vue 3)` from the menu.


## Adding Syncfusion® Maps package in the application

Use the following command to install it.

```bash
npm install @syncfusion/ej2-vue-maps
```

## Running the application

Run the application using the following command.

```bash
npm run serve
```

Open http://localhost:8080 in your browser (Vue CLI's default dev server) to see the sample.