CODEWITHSUNDEEP
javascriptreactjsreact-nativegoogle-mapsopenstreetmap
Oliver D
Oliver D

Reputation: 2889

How to integrate Open Street map in react native?

I want to use Open Street Map instead of Google maps, so i use react-native-maps-osmdroid to handle it

but i can't see any Map in my View so should i add something when setup it?

"I don't have Google key cuz react-native-maps require it so that's reason to use react-native-maps-osmdroid"

screenshot

screenshot

Code

import React, {Component} from 'react';
import {Text, View} from 'react-native';
import MapView, {Marker} from 'react-native-maps-osmdroid';

class MapTest extends Component {
  render() {
    return (
      <View>
        <MapView
          style={{flex: 1}}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>
          <Marker
            title="Home"
            color="#f00"
            coordinate={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }}
          />
        </MapView>
      </View>
    );
  }
}

export default MapTest;

Upvotes: 3

Views: 4236

Answers (2)

Shahed Mehbub
Shahed Mehbub

Reputation: 581

MapView seems to have loaded. You'll still require an api-key as their installation instructions suggest.

If that's okay then check that if your AndroidManifest.xml file contains 

<uses-permission android:name="android.permission.INTERNET" />

If not add this line to AndroidManifest.xml and for iOS, you have to configure App Transport Security in your app.

Upvotes: 0

Superblar
Superblar

Reputation: 136

You still need API key with react-native-maps-osmdroid.

The actual map implementation depends on the platform. On Android, one has to use >Google Maps, which in turn requires you to obtain an API key for the Android SDK.

You can get API key for free. Just follow this tutorial

Upvotes: 2

Related Questions