https://github.com/map-ir/mapir-react-component

https://github.com/map-ir/mapir-react-component

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/map-ir/mapir-react-component
• Owner: map-ir
• License: mit
• Created: 2019-05-05T07:19:39.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-06T11:21:07.000Z (almost 2 years ago)
• Last Synced: 2024-10-29T06:22:18.762Z (2 months ago)
• Language: JavaScript
• Size: 2.57 MB
• Stars: 14
• Watchers: 4
• Forks: 8
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# MapirReactComponent

[![npm version](https://badge.fury.io/js/mapir-react-component.svg)](https://www.npmjs.com/package/mapir-react-component)

![Map.ir](https://map.ir/css/images/mapir-logo.png) React wrapper for mapbox-gl-js. Expose a bunch of component meant to be simple to use for React.

## Get API Key

🔑 You should first get api key from [Map.ir](https://corp.map.ir/registration/)

## Installation

```

npm i mapir-react-component

```

## Quick start

### Import module

```jsx

import Mapir from 'mapir-react-component';

import 'mapir-react-component/dist/index.css';

```

### Set API Key

```jsx

const Map = Mapir.setToken({

  transformRequest: (url) => {

    return {

      url: url,

      headers: {

        'x-api-key': 'Your_API_KEY', //Mapir api key

        'Mapir-SDK': 'reactjs',

      },

    };

  },

});

```

### Generate Component

```jsx

render () {

	return (

		

	)

}

```

[![Edit mapir-react](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/objective-ganguly-st4od?fontsize=14)

[![Edit stackblitz](./assets/stackblitz.png)](https://react-fgwfsq.stackblitz.io)

📖 [English Documentation](https://github.com/map-ir/mapir-react-component/wiki/Documentation)

📖 [Persian Documentation](https://support.map.ir/developers/components/reactjs/)