npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

mapir-react-native-sdk

2.1.2 • Public • Published

Mapir SDK for React Native

What is Mapir?

See map.ir

Table of Contents

Installation

Dependencies

Npm

npm install mapir-react-native-sdk

Platform Specific Installation Guides

Here’s the complete code to display a map:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import Mapir from 'mapir-react-native-sdk'
 
 
 
type Props = {};
export default class App extends Component<{}> {
    render() {
        return (
            <View style={styles.container}>
                <Mapir
            accessToken={'YOUR ACCESS TOKEN'}
                    zoomLevel={13}
                    centerCoordinate={[51.422548, 35.732573]}
                    style={styles.container}>
                </Mapir>
            </View>
        );
    }
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

Here’s the complete code to display a map with static and dynamic marker:

 
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import Mapir from 'mapir-react-native-sdk'
 
type Props = {};
export default class App extends Component<{}> {
    constructor(props) {
        super(props);
        this.state = {
            markers: [
                { latitude: 51.422548, longitude: 35.732573},
            ],
        };
    }
 
    addMarker(coordinates) {
        this.setState({
            markers: [...this.state.markers ,{ latitude: coordinates[0], longitude: coordinates[1]}]
        });
    }
    componentDidMount() {
        {
            PermissionsAndroid.requestMultiple(
                [PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
                    PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION],
                {
                    title: 'Give Location Permission',
                    message: 'App needs location permission to find your position.'
                }
            ).then(granted => {
                console.log(granted);
                resolve();
            }).catch(err => {
                console.warn(err);
                reject(err);
            });
        }
    }
 
    render() {
        return (
            <View style={styles.container}>
                <Mapir
                    accessToken={'YOUR ACCESS TOKEN'}
                    zoomLevel={13}
                    centerCoordinate={[51.422548, 35.732573]}
                    showUserLocation={true}
                    onLongPress={e => this.addMarker(e.geometry.coordinates)}
                    style={styles.container}>
                    <Mapir.Marker
                        id={'1'}
                        coordinate={[51.422548, 35.732573]}
                    />
                    {this.state.markers.map(markers =>
                        (<Mapir.Marker
                            id={'2'}
                            key={markers.latitude}
                            coordinate={[markers.latitude, markers.longitude ]}
                        />)
                    )}
                </Mapir>
            </View>
        );
    }
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

Here’s the complete code to display a map with line:

 
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import Mapir from 'mapir-react-native-sdk'
 
type Props = {};
export default class App extends Component<{}> {
    constructor(props) {
        super(props);
        this.state = {
            route:
                {
                    "type": "FeatureCollection",
                    "features": [
                        {
                            "type": "Feature",
                            "properties": {},
                            "geometry": {
                                "type": "LineString",
                                "coordinates": [
                                    [
                                        51.422587,
                                        35.732549
                                    ],
                                    [
                                        51.442226,
                                        35.695909
                                    ]
                                ]
                            }
                        }
                    ]
                },
        };
    }
    componentDidMount() {
        {
            PermissionsAndroid.requestMultiple(
                [PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
                    PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION],
                {
                    title: 'Give Location Permission',
                    message: 'App needs location permission to find your position.'
                }
            ).then(granted => {
                console.log(granted);
                resolve();
            }).catch(err => {
                console.warn(err);
                reject(err);
            });
        }
    }
 
    render() {
        return (
            <View style={styles.container}>
                <Mapir
                    accessToken={'YOUR_ACCESS_TOKEN'}
                    zoomLevel={13}
                    centerCoordinate={[51.422548, 35.732573]}
                    showUserLocation={true}
                    style={styles.container}>
                    <Mapir.Marker
                        id={'1'}
                        coordinate={[51.422548, 35.732573]}
                    />
                   
                    <Mapir.ShapeSource id='line1' shape={this.state.route}>
                        <Mapir.LineLayer id='linelayer1' style={{lineColor:'red'}} />
                    </Mapir.ShapeSource>
                </Mapir>
            </View>
        );
    }
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

Here’s the complete code to display a map with Raster:

 
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import Mapir from 'mapir-react-native-sdk'
 
type Props = {};
export default class App extends Component<{}> {
    constructor(props) {
        super(props);
        this.state = {
            route:
                {
                    "type": "FeatureCollection",
                    "features": [
                        {
                            "type": "Feature",
                            "properties": {},
                            "geometry": {
                                "type": "LineString",
                                "coordinates": [
                                    [
                                        51.422587,
                                        35.732549
                                    ],
                                    [
                                        51.442226,
                                        35.695909
                                    ]
                                ]
                            }
                        }
                    ]
                },
        };
    }
    componentDidMount() {
        {
            PermissionsAndroid.requestMultiple(
                [PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
                    PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION],
                {
                    title: 'Give Location Permission',
                    message: 'App needs location permission to find your position.'
                }
            ).then(granted => {
                console.log(granted);
                resolve();
            }).catch(err => {
                console.warn(err);
                reject(err);
            });
        }
    }
 
    render() {
        return (
            <View style={styles.container}>
                <Mapir
                    accessToken={'YOUR_ACCESS_TOKEN'}
                    zoomLevel={13}
                    centerCoordinate={[51.422548, 35.732573]}
                    showUserLocation={true}
                    style={styles.container}>
                    <Mapir.RasterSource
                        accessToken={'YOUR_ACCESS_TOKEN'}>
                        <Mapir.RasterLayer id="shiveh-layer"/>
                    </Mapir.RasterSource>
                    <Mapir.Marker
                        id={'1'}
                        coordinate={[51.422548, 35.732573]}
                    />
                   
                    <Mapir.ShapeSource id='line1' shape={this.state.route}>
                        <Mapir.LineLayer id='linelayer1' style={{lineColor:'red'}} />
                    </Mapir.ShapeSource>
                </Mapir>
            </View>
        );
    }
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

Documentation

Mapir SDK is based on Mapbox Maps SDK for React Native v7.0.0 and provides extra API methods over Mapbox.

Components

Sources

Layers

install

npm i mapir-react-native-sdk

Downloadsweekly downloads

172

version

2.1.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability