imobile_for_javascript/README.md

iMobile for JavaScript，是SuperMap iMobile推出的一款基于React-Native框架的移动应用开发工具。基于该开发工具，用户可以使用JavaScript开发语言，开发出在Android和IOS操作系统下运行的原生移动GIS应用，入门门槛低，一次开发，处处运行。

# imobile_for_javascript

## Getting started

`$ npm install imobile_for_javascript --save`

### Mostly automatic installation

`$ react-native link imobile_for_javascript`

### Manual installation


#### iOS

Supermap SDK base on RN for IOS is coming soon...

1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `imobile_for_javascript` and add `Supermap.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libSupermap.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<

#### Android

1. Open up `android/app/src/main/java/[...]/MainActivity.java`
  - Add `import com.supermap.rnsupermap.SupermapPackage;` to the imports at the top of the file
  - Add `new SupermapPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
  	```
  	include ':supermap'
  	project(':supermap').projectDir = new File(rootProject.projectDir, 	'../node_modules/supermap/android')
  	```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
  	```
      compile project(':supermap')
  	```

## Usage

For this Example.After install the pack we offered,  You will easily make a project of map inflating the whole screen by following the steps below.

1. Setup the liscense file into the path "./Supermap/licsence".
2. Setup the Sample Data into a specified path that will be refer as a 
argument in the function setServer() of WorkspaceConnection object in the next step;
3. type the follow codes in an initiated React Native Project

```javascript

...
import {
  Workspace,
    SMMapView,
} from 'imobile_for_javascript';

class XXX extends Component {

  //Required funtion for obtaining the MapView object.
  _onGetInstance = (mapView) => {
    this.mapView = mapView;
    this._addMap();
  }

  /**
   * 初始化地图  Function for initiating the Map
   * @private
   */
  _addMap = () => {
    try {
      //创建workspace模块对象
      //Create workspace object
      var workspaceModule = new Workspace();

      //加载工作空间等一系列打开地图的操作
      //Operations for loading workspace and opening map
      (async function () {
        try {
          this.workspace = await workspaceModule.createObj();

          await this.workspace.open("/SampleData/City/Changchun.smwu");

          this.mapControl = await this.mapView.getMapControl();
          this.map = await this.mapControl.getMap();

          await this.map.setWorkspace(this.workspace);
          var mapName = await this.workspace.getMapName(0);

          await this.map.open(mapName);
          await this.map.refresh();
        } catch (e) {
          console.error(e);
        }
      }).bind(this)();
    } catch (e) {
      console.error(e);
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <SMMapView ref="mapView" style={styles.map} onGetInstance={this._onGetInstance}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  map: {
    flex: 1,
    alignSelf: 'stretch',
  },
});

AppRegistry.registerComponent('XXX', () => XXX);

```