---
title: HTML, Vue, and React Applications
source: https://vjmap.com/en/guide/htmlVueReact.html
---

# HTML, Vue, and React Applications

::: tip Note
vue2, vue3, React, Html [Sample code download](https://vjmap.com/download/vjmap_demo.zip) ** Strongly recommended for reference—simple examples for getting started with development ** 
:::


## Installation

First, ensure you have Node.js and npm, yarn, or pnpm installed. Then run the following command in your project directory to install the library:


### npm install
``` sh
npm install vjmap
```
### yarn install
``` sh
yarn add vjmap
```
### pnpm install
``` sh
pnpm add vjmap
```




## Import

Import specific modules:

```js
import { Map } from 'vjmap';
// Import styles
import "vjmap/dist/vjmap.min.css";
```

Or import the global module:
```js
import vjmap from 'vjmap';
 // Import styles
import "vjmap/dist/vjmap.min.css";
```

## Pure HTML Development

For pure HTML projects without a bundler, you can include the library via a `script` tag.
```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vjmap</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="https://vjmap.com/demo/js/vjmap/vjmap.min.css">
    <script type="text/javascript" src="https://vjmap.com/demo/js/vjmap/vjmap.min.js"></script>
</head>
<body>
	const env = {
            serviceUrl: "https://vjmap.com/server/api/v1",
            accessToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJJRCI6MiwiVXNlcm5hbWUiOiJhZG1pbjEiLCJOaWNrTmFtZSI6ImFkbWluMSIsIkF1dGhvcml0eUlkIjoiYWRtaW4iLCJCdWZmZXJUaW1lIjo4NjQwMCwiZXhwIjoxOTQyMzg5NTc0LCJpc3MiOiJ2am1hcCIsIm5iZiI6MTYyNzAyODU3NH0.VQchVXxgjl5aCp3j3Uf5U2Mpk1NJNirH62Ys-8XOfnY"
    };
    // Create a new map service object with service URL and token
    let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
    // Open map
    let res = await svc.openMap({
        mapid: "sys_zp", // Map ID 
        mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometry rendering
        style: vjmap.openMapDarkStyle() // Server rendering style
    })
    if (res.error) {
        console.error(res.error)
    }
    // Create geometric projection coordinate system based on map bounds
    let prj = new vjmap.GeoProjection(res.bounds);
    // Map object
    let map = new vjmap.Map({
        container: 'map', // DIV container ID
        style: svc.vectorStyle(), // Style, vector tile style here
        center: prj.toLngLat(prj.getMapExtent().center()), // Set map center
        zoom: 2, // Set map zoom level
        pitch: 0, // Tilt angle
        renderWorldCopies: false // Do not display multi-screen map
    });
    // Associate service object and projection object
    map.attach(svc, prj);
</body>
</html>
```


## Vue and React Development

For Vue and React development, please download the sample project for reference.

Vue, React, Html [Sample code download](https://vjmap.com/download/vjmap_demo.zip)



::: warning Note
If you encounter the following error during build-based development
![image-20240923111147721](https://vjmap.com/blogimages/202409231111747.png)

This is caused by secondary obfuscation of the `vjmap` SDK by tools such as `webpack` or `vite`. Please refer to the relevant documentation to exclude `vjmap` from being bundled again.

Or add an exclamation mark when importing:

For example:
```js
import vjmap from "!vjmap"
```
:::