Proof of concept mapzen map native UI Component for React Native
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
__tests__
android
assets
ios
.gitignore
README.md
TangramMap.js
TangramMapMarker.js
TangramMapPoint.js
TangramMapPolygon.js
TangramMapPolyline.js
android_screenshot.jpg
app.json
config.example.js
index.android.js
index.ios.js
ios_screenshot.jpg
package.json
yarn.lock

README.md

Mapzen React Native

This is a React Native UI Component that provides a map view with Mapzen's Tangram.

This component is currently in the proof of concept phase and is not available via npm.
Follow the platform specific instructions below to install and use the component in your project.

Android iOS
Android Screenshot iOS Screenshot

iOS

  1. Copy ios/Podfile to your project's ios/ folder

  2. Edit the podfile and replace target in line 4 to match your project name.

  3. Run pod install

  4. open ProjectName.xcworkspace

  5. Copy ios/MapzenReactNative/TangramMap* files to your ios/ folder

  6. In XCode, Special click -> Add Files to

  7. Add the 6 TangramMap files (don't create bridging header)

  8. Open the project's "Build Settings" tab and find the "Swift Compiler - General" section.

  9. Add "ProjectName/TangramMap-Bridging-Header.h" to the Objective-C Bridging Header item (2nd column pencil & brush icon).

  10. Copy config.example.js to config.js, and add your mapzen api key to it.

  11. Copy components/TangramMap.js to desired location in your react native codebase

  12. Use the "TangramMap" component see index.[ios/android].js files for examples

  13. In Project > General, set deployment target to 9.3

Android

  1. In the app build.gradle file, add the following to the dependencies section
compile('com.mapzen:mapzen-android-sdk:1.4.0'){
    exclude module: 'okhttp'
}
  1. In the app build.gradle file, change

compileSdkVersion 23 to compileSdkVersion 25

  1. In the app build.gradle file, change

compile "com.android.support:appcompat-v7:23.0.1" to compile "com.android.support:appcompat-v7:25.3.1"

  1. Copy ImmediateMapView.java, Tls12SocketFactory.java, and all Tangram... files from android/app/src/main/java/com/mapzenreactnative/ into the matching folder under android/ in your react native project.

  2. Open each file and update package name

  3. In MainApplication.java, add the new react native package to getPackages

,new TangramMapPackage()
  1. Copy config.example.js to config.js, and add your mapzen api key to it.

How to add your own map style

TODO

How to add marker(s) to the map

First, import the TangramMapMarker component and an image resource.

import TangramMapMarker from './TangramMapMarker'
import flagPinkImg from './assets/flag-pink.png'

Then render a TangramMapMarker element.

<TangramMapMarker 
onPress={(e) => { console.log("~~ pink marker onPress ") }}
coordinate={{latitude: 38.536927, longitude: -105.998294}} 
image={resolveAssetSource(flagPinkImg).uri}
imagewidth={ 32 }
imageheight={ 32 }
/>

How to add line(s) to the map

First, import the TangramMapPolyline and TangramMapPoint components.

import TangramMapPolyline from './TangramMapPolyline'
import TangramMapPoint from './TangramMapPoint'

Then use them to render a line.

<TangramMapPolyline 
color="#FF0000"
linewidth="13px"
onPress={(e) => { console.log("~~ line onPress ") }}
>

    <TangramMapPoint coordinate={{latitude: 38.534433, longitude: -106.003467}} />
    <TangramMapPoint coordinate={{latitude: 38.541990, longitude: -106.002093}} />
    <TangramMapPoint coordinate={{latitude: 38.536966, longitude: -105.996748}} />

</TangramMapPolyline>

How to add polygon(s) to the map

First, import the TangramMapPolygon and TangramMapPoint components.

import TangramMapPolygon from './TangramMapPolygon'
import TangramMapPoint from './TangramMapPoint'

Then use them to render a polygon.

<TangramMapPolygon 
color="#0000FF"
onPress={(e) => { console.log("~~ polygon onPress ") }}
>

    <TangramMapPoint coordinate={{latitude: 38.540104, longitude: -106.003279}} />
    <TangramMapPoint coordinate={{latitude: 38.541394, longitude: -106.010705}} />
    <TangramMapPoint coordinate={{latitude: 38.534803, longitude: -106.010754}} />
    <TangramMapPoint coordinate={{latitude: 38.535338, longitude: -106.007414}} />
    <TangramMapPoint coordinate={{latitude: 38.536861, longitude: -106.007678}} />
    <TangramMapPoint coordinate={{latitude: 38.537384, longitude: -106.003858}} />

</TangramMapPolygon>