Skip to main content

Create using NPM

This method is suitable for projects built through npm (such as Vue, React, etc.). For Vue project construction, please refer to the tutorial: https://cli.vuejs.org/zh/. After creating a new project, follow these steps:

1. Set source​

  • Add the .npmrc file in the Vue project directory and enter the following content:
    registry = "https://registry.npmjs.org/"
    @mapmost:registry="https://npm.mapmost.com/"
    show

2. Install SDK​

  • Click Terminal -> New Terminal, enter the following command in the terminal and press Enter.

    npm install @mapmost/mapmost-webgl
    showshow

3. Create vue file​

  • Create the HelloMapmost.vue file and introduce the SDK through import. The specific code is as follows:

    <template>
      <div class="hello">
        <div id="map"></div>
      </div>
    </template>

    <script>
    import mapmost from '@mapmost/mapmost-webgl';

    export default {
      name: 'HelloMapmost',
    }
    </script>
    show

4. Map initialization​

Authorization

You need to have an authorization code first. To obtain the authorization code, please refer to Authorization Application.

  • Create a dom element for map rendering in the HelloMapmost.vue file.

  • Add map initialization code.

  • Enter the URL and authorization code of the map style file. -The complete code is as follows:

    <template>
      <div class="hello">
        <div id="map"></div>
      </div>
    </template>

    <script>
    import mapmost from '@mapmost/mapmost-webgl';

    let map = new mapmost.Map({
      container: 'map', // map container id
      style: "https://www.mapmost.com/cdn/styles/sample_data.json", // Style file URL
      center: [120.71923008473078, 31.29446443371741], // Initial center point of the map
      zoom: 14, // Initial level of map
      userId: '***', // Authorization code
    });

    export default {
      name: 'HelloMapmost',
    }
    </script>

    <style scoped>
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
    </style>
    show

5. Run the project​

  • Enter the following command in the terminal and press Enter to start the project.

    npm run serve
    show

6. Effect view​

  • After the project is started, hold down the Ctrl key and click the local address in the terminal (the URL in the yellow box in the picture below) to open the web page

    showshow