Mapbric NPM | npm.io

mapbric

Map implementation for new architecture

Installation

npm install mapbric

Android setup

Add your google map api key For simple:

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="your api key here" />
<meta-data
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />

For security: Add this line to your android/build.gralde:

  buildscript{
    ....
    dependencies{
      ....
      classpath "com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1"
    }
  }

and this line in app/build.gralde:

  apply plugin: "com.google.android.libraries.mapsplatform.secrets-gradle-plugin"

add your key in local.properties

  
  MAPS_API_KEY= your api key 
  # eg MAPS_API_KEY=AIzaSyDKIzSjooso9Zcn5LNeewUFc0q9eGK6GhZ

Then define api key in AndroidManifest.xml:

<meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="${MAPS_API_KEY}" />
<meta-data
  android:name="com.google.android.gms.version"
  android:value="@integer/google_play_services_version" />

Usage

import { MarkerView, MapbricComponent } from 'mapbric';

// ...

 <MapbricComponent
          ref ={mapbricComponentRef}
          showsUserLocation
          focusRegion={region}
          style={styles.box}
        >
          {
            markers.map((marker) => {
              return   <MarkerView
              title= {marker.title}
              coordinate={{
                longitude: marker.longitude,
                latitude:marker.latitude,
              }}
              description={marker.description}
              style={{ height: 100, width: 50, backgroundColor: 'red' }}
            >
              <Text style={{ top: 30}}>Demo</Text>
            </MarkerView>
            })
          }
 </MapbricComponent>
 <TouchableOpacity style={{width: 200, height: 80,backgroundColor: 'red',}}
        onPress={() => {
            mapbricComponentRef?.current?.moveToCurrentLocation()
        }}
      >
        <Text>Move To Current Location</Text>
      </TouchableOpacity>
/>