Skip to main content

zeroBasics2

#Create in CDN mode

1. Create a new folder​

  • Create a new folder and change the folder name to "MyFirstProject".

    show

2. Open VS Code​

  • Open VS Code, click File -> Open Folder, and select the created folder.

    showshow

3. Create html file​

  • Click the "New File" icon on the right side of MyFirstProject in the resource manager to create index.html.

    show

4. Write Hello World example​

  • Click to open index.html, enter the code in the picture, and press Ctrl + S to save.
  • Right-click anywhere on the editing page and click Open with Live Server (refer to Installation Tutorial to install the live server plug-in). If the browser pops up a page showing hello world!, it means the page is created successfully.
  • Note: If there is a small white dot next to the file name, it means that the file has not been saved. Press Ctrl + S to save the changes.
  • The specific code is as follows:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>MyFirstProject</title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
      hello world!
    </body>
    </html>
    showshowshow

5. Introduce SDK​

-Introduce the SDK through the script tag, the specific code is as follows:

<script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.3.0/mapmost-webgl-min.js"></script>
show

6. Create a map container​

  • Create a DOM element for map rendering. The specific code is as follows:

    <style>
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
        
    <body>
    <div id="map"></div>
    </body>
    show

7. Map initialization​

Authorization

You need to have an authorization code first, please refer to Apply and view authorization code.

  • Add the map initialization code and enter the URL and authorization code of the map style file.

    let map = new mapmost.Map({
      container: 'map', // map container id
      style: "<your style url>", // style file URL
      center: [120.72541613154851, 31.31171803927643], // Initial center point of the map
      zoom: 14, // Initial level of map
      userId: '***', // Authorization code
    });
    show

8. Run the project​

  • Right click on Open with Live Server to run the project.

    showshow