Use iClient React MapboxGL to browse maps in iPortal

iClient React-MapboxGL is a React component library based on MapboxGL, which supports the following three installation methods:

• Use npm to install the library for modular development (Recommend)
• In the file, import the provided cdn address of the library
• Download iClient JavaScript development package (v10.1.0) from the SuperMap iClient official website for local offline development

This example will use the npm installation method to introduce how to access the maps in iPortal using iClient React MapboxGL. Before starting to develop, we assume you've known the React and Node.js related basic knowledge.

The basic flow of browsing iPortal maps using iClient React-MapboxGL components is:

1. Build the development environment;

2. Install the iClient React-MapboxGL library;

3. Write the function codes;

4. At last, check the running effect in a browser.

Step 1: Build development environment

Before development, you need to install the Node.js environment, requirement: Node >=8.10 and npm >=5.6.

Execute the following command to create a React project named "my-app"：

npx create-react-app my-app

The sdirectory structure of the new created React project looks like the picture below. Creat React App is the best way to start building a new single-page application in React. It sets up your environment so that you can use the latest JavaScript features, and optimizes your app for procution. Under the hood, it uses Babel and webpack.

Step 2: Install Client React-MapboxGL library

Enter the newly created project directory, install React-iClient-MapboxGL, the command is as follows:

cd my-app

npm install @supermap/react-iclient-mapboxgl

Step 3: Write function codes

In the src directory, create WebMap.jsx file, and imprt the React-iClient-MapboxGL library, write the code as below. The following code implements accessing the online map (id = 801571284,) from the website: https://iportal.supermap.io/iportal.

import React, { Component } from "react";

import { SmWebMap } from "@supermap/react-iclient-mapboxgl";

class WebMap extends Component {

  mapLoaded(e) {

    this.map = e.map;

    console.log(this.map);

  }

  render() {

    return (

      <div style={{ height: "900px" }}>

        <SmWebMap

          mapId={"801571284"}

          serverUrl={"https://iportal.supermap.io/iportal"}

          onLoad={this.mapLoaded.bind(this)}

        ></SmWebMap>

      </div>

    );

  }

}

export default WebMap;

And you also need to import the new created WebMap component in the index.js file. Modify the content of index.js as below:

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import WebMap from './WebMap';

import reportWebVitals from './reportWebVitals';

ReactDOM.render(

  <React.StrictMode>

    <WebMap/>

  </React.StrictMode>,

  document.getElementById('root')

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

Step 4: Run and view the map in a browser

Exectue the command to see the running effect:

npm start

Open the browser, access http://localhost:3000, you can see the following running effect:

Step 5: Publish the Web GIS project. After finishing all the development tasks, you can run the build command to package the React project:

npm run build

after that, you can publish your packaged project to middleware such as Tomcat, to access using the HTTP protocol. While the specific process is not the focus of this demonstration, please check the relevant material by yourself.