# react-fmap

> fengmap for react

Latest version **0.5.0** (published 2019-05-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-fmap
pnpm add react-fmap
yarn add react-fmap
bun add react-fmap
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2019-05-02 |
| First published | 2018-05-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 975.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | vincent |
| Maintainers | kairi1227 |
| Keywords | react, fengmap |

## Links

- npm: https://www.npmjs.com/package/react-fmap
- Repository: https://github.com/wafersystems/react-fmap
- Homepage: https://github.com/wafersystems/react-fmap#readme
- Issues: https://github.com/wafersystems/react-fmap/issues
- npm.io page: https://npm.io/package/react-fmap

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.8.6
- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.5.0 (latest) — 2019-05-02
- 0.4.12 — 2018-12-12
- 0.4.11 — 2018-08-02
- 0.4.10 — 2018-07-20
- 0.4.9 — 2018-06-29
- 0.4.8 — 2018-06-29
- 0.4.7 — 2018-06-22
- 0.4.6 — 2018-06-08
- 0.4.5 — 2018-06-08
- 0.4.4 — 2018-06-08
- 0.4.3 — 2018-06-08
- 0.4.2 — 2018-05-31
- 0.4.1 — 2018-05-30
- 0.3.8 — 2018-05-18
- 0.3.7 — 2018-05-18
- … 17 more at https://npm.io/package/react-fmap/versions

## README

# react-fmap
fengmap for react

[![npm](https://img.shields.io/npm/v/react-fmap.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/react-fmap)
[![NPM downloads](http://img.shields.io/npm/dm/react-fmap.svg?style=flat-plastic)](https://npmjs.org/package/react-fmap)


## Using

  * install

  `npm i react-fmap`

   * using in react

   ```js
   import FMap from 'react-fmap';
   class App extends Component {
    render() {
    	const mapProps = {
    		fmapID: 'wafer-beijing',
    			appName:'北京威发新世纪',
    			mapKey:'3e7dba2418ac46e1af5a1abf17082db2',
    			height: 'calc(100vh - 254px)'
    		};

    		return (
    			<div className="App">
    				<FMap {...mapProps}/>
    			</div>
    		);
    	}
   }
   ```

   > notice: mapKey is key of FengMap.

## Props

| Prop | default value  |  is required  | description |
|------|-----|-----|----------------------------------|
|url|  [dome url](https://www.fengmap.com/fmAPI/demo/FMDemoBaseMap/lib/fengmap.min.js)   | false | fengmap.min.js                     |
|fmapID|     | true | feng map id                     |
|appName|    | false| application name                |
|mapKey|     | true | feng map key                    |
|onClick|    | false | a callback for click map       |
|className|  | false | map mount dom's class name     |
|width|      | false | map mount dom's width          |
|height|     | false | map mount dom's height         |
|defaultViewMode|`top`|false| 3d or 2d, value of ['3d', 'top']|
|mapOptions| | false |  new FMMap's other props       |
|textMarkers|`[]`| false | text marker eg: {x, y, name[, z, ...]}|
|imageMarkers|`[]`| false | image marker eg: {x, y, url[, z, ...]}|
|toolControl|`null`| false | map control tool. eg: 2d or 3d tool |
|controlOptions|`null`| false | map control options, eg: position or offset |
|offLineOptions| [object](#offlineoptions) | false | off line map props |
|popMarkers| `null` | false | pop marker. props is controlOptions. |
|initialPosition| `null` | false | initial move to position. |
|loadComplete| `null` | false | map load complete function. |
|drawNaviLines| `null` | false | `[{lineStyle, startPoint, endPoint}]` |
|rotate| `0` | false | set map rotate angle |
|mapServerURL|  | false | set map server url |
|mapThemeURL|  | false | set map theme url |
|defaultThemeName| | false | set map theme name |


#### offLineOptions

```js
	offLineOptions: {
		mapServerURL: '',
		mapThemeURL: '',
		defaultThemeName: ''
		[,
		...other props
		]
	}
```


### function

|  name  |  props  |   return  |        description   |
|------|-----|-----|----------------------------------|
| setViewMode | mode: string `['top', '3d']` | this.map |  return fengmap object   |
|setTheme|themeName: string| void | set map theme name |
|setPopMarker|options: `{}`| `popMarker` | pop mark on map. call `popMarker.close()` close pop marker |
|getSearchReq|(request, callback)| Array: FMap | search map. request is object.eg: {ID: ''}  |
|onNavigation|options: `{}`| FMap | get navigation object  |
|onMapFunction|name[, options]| null | apply map function  |

### add text marker

```js
	this.map.getSearchReq({ID: 61}, v => {
		this.map.addTextMarker([{
		x: 12958819.3,
		y: 4852556.59,
		z: 0,
		name: '3F04'
		}], v.groupID);
	});
```
### add image marker

```js
 this.map.addImageMarker([{
		x:  12958819.3,
		y: 4852556.59,
		z: 0,
		name: '3F01',
		url: '/static/media/logo.5d5d9eef.svg'
	}], v.groupID);
```

### onMapFunction
```js
	this.map.onMapFunction('moveTo', {x: 12958819.3, y: 4852556.59, groupID: 1, z: 0});
```


### fengmap.min.js

	if localize fengmap.min.js, then copy `node_modules/react-fmap/js/fengmap.min.js` to src(or can reach at a dir).

	then set `url`.

---
_Source: https://npm.io/package/react-fmap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._