Lecture 9: Mapby Making Thai Travel Directory App

Kobkrit Viriyayudhakorn, Ph.D. CEO of iApp Technology Limited.

kobkrit@gmail.com http://www.kobkrit.com

Important Links• Source Codes

https://github.com/kobkrit/learn-react-native

• Course Materials http://www.kobkrit.com/category/programming/react-native/

• Score Announcementhttp://bit.ly/its484quizscore

• Facebook Grouphttps://web.facebook.com/groups/ReactNativeThai/

Setting up a Mac in the Lab• Boot with Mac

• Press Command Line while boot

• Select the left icon (Mac HDD)

• Connect internet, Open Safari for http://kobkrit.com, Login to the SIIT System

• Open terminal and run installation script for React-Native

• $ curl -O kobkrit.com/rn.sh

• $ bash ./rn.sh

• Press Enter, and Type “student” as a password, Wait..

• Open Xcode > Preference (Command - , ) > Location > Command Line Tools

• Select Xcode 8.0 (8S174q)

Thai Travel Directory App

React-Native-Maps• https://github.com/airbnb/react-

native-maps

• React Native Map Components for iOS + Android

• Made by Airbnb

• iOS => Choose either

• Google Map

• Apple Map

• Android => Only Google Map

Installation1. $ npm install https://github.com/airbnb/react-native-maps.git --save

2. $ react-native link

3. Write some code

4.$ react-native run-ios

5.For Android, we have extra steps.

Android Installation Extra Steps.

1. Google Map need an API key

2. You can get your own at https://console.developers.google.com or using my API key. >> AIzaSyCKspSGmpYn3GxZfIc_Sccu7x-8qXQcZkI

3. Add the Google Map’s API key at android\app\src\main\AndroidManifest.xml

4. $ react-native run-android

Adding Google API keyAdd meta-data tag as shown below, between <application>

tag in AndroidManifest.xml

Adding Basic Map Code

l9_map_1

You can see full l9_map_1 source code at the end of lecture note (A4)

First try!

1. $ react-native run-ios

2. Empty screen come up!? why!?

3. Map need the width, height. Can not use flex:1 here… :(

l9_map_1

Adding Width,Height to Mapl9_map_2Full l9_map_2 source code at the end of lecture note

• Dimensions return current screen’s width and height.

• Dimensions.get(‘windows’).width • Dimensions.get(‘windows’).height • Thus, the map will be full screen.

1. Welcome to San Francisco, the home of tech companies in the world.

2. At the center point of the screen is <37.78825, -122.4324>

3. The zoom of the map is specify by *Delta.

4. At the Equator 1 LatitudeDelta => 110.57 KM 1 LongitudeDelta => 111.32 KM

0.0922 latDelta

0.0421 longDelta

(37.78825, -122.4324)

l9_map_2

Make it controllable by State

l9_map_3

Instead of, the fixed regions, we make it as a state.

Make it controllable by State #2l9_map_3

• onRegionChange props will be called when the location/zoom are changed, with the value of new location/zoom (region)

• Region props defined the current location/zoom in the map.

1. Drag on map view to move the map.

2. Once drag, this.state.region was updated by onRegionChanged().

3. Text at the lower third of the screen is updated according to the this.state.region

4.Try two fingers pinch, to zoom, to rotate the map. In simulator, press alt(option) button to two fingers pinch.

l9_map_3

Configure the MapView

And much more..

https://github.com/airbnb/react-native-maps/blob/master/docs/mapview.md

MapEvents are also catchable

And much more..

https://github.com/airbnb/react-native-maps/blob/master/docs/mapview.md

Let configure some MapViewl9_map_4

Let’s change the mapType

mapType=“hybrid” mapType=“satellite” mapType=“terrain”

l9_map_4

Android only

Adding Map Markerl9_map_5

Let move the location to the Victory Monument, Bangkok, Thailand.

MapView.Markercoordinate => LatLng Object of that marker title => Title of Information popup description => Description of popup

1. MapView.Marker creates a red-pin marker on the map (for Apple map), and droplet shape pin on Google map. Place it as children of the MapView.

2.Touch the pin to show up the popup windows, touch elsewhere to hide it.

3. The map is draggable.

4.You can add many markers you want.

Google Map

Apple Map l9_map_5

Add More Markers!l9_map_6

l9_map_6

Don’t forget to add “key”We found that there are warnings below…

It will occur every time, when we use JSX under loop. To remove it, Add key props. To distinguish each MapView.Marker from others.

l9_map_6

Adding custom images to markers

images/shopping.png images/music.png images/attention.png

W=56px / H=56px / Transparent Background

l9_map_7

Adding custom images to markers

l9_map_7

• Load image into state, and display it on map using “image” prop.

• Image shall be around56px X 56px

l9_map_7

Nah,.. Change my mindI want custom view to represent

markers instead…l9_map_8

Place Name

Normal Picture Group of View

Marker as Custom View

• Add View as the children of MapView.Marker

l9_map_8

l9_map_8

That such a boring Popup… I want to have

a photo in it. (Custom Popup)

l9_map_9

Custom Popup

• Add MapView.Callout as the children of the MapView.Marker

l9_map_9

l9_map_9

Drawing Circle on Map

…

https://github.com/airbnb/react-native-maps/blob/master/docs/circle.md l9_map_10

Drawing Polyline on Map

…

https://github.com/airbnb/react-native-maps/blob/master/docs/polyline.md l9_map_10

Drawing Polygon on Map

…

https://github.com/airbnb/react-native-maps/blob/master/docs/polygon.md l9_map_10

Drawing Something on Map (Code) l9_map_10

Travel Directory App

• Center map at the Victory Monument

• Map can be moved. • Tap on icon, show Title and

Description • Push buttons to move the map

to that specific location and zoom in and open the call out.

• Starting to modify the app from l9_map_7

App Requirements

l9_map_travel

moveMapToLocation method

Once called, moveMaptoLocation method change the

state of region to assigned latlng, and

zoom in by settinglatitudeDelta, and

longitudeDelta

l9_map_travel

Location Button Componentl9_map_travel_locationButton

Tap!

l9_map_travel

Tap!

l9_map_travel

Tap!

l9_map_travel

Tap!

l9_map_travel

The Change is so sudden! • I want to make it smoothly animate to the new location!

• MapView have a method for that called “animateToRegion”

• They accept 2 arguments, i.e., Region to move to, and, How long does the animation will need (in ms).

l9_map_travel_smooth

How to reference to the MapView (Ref)

• How we can reference to our UI in react?

• Luckily, we have Ref System!

• We can have ref props in any component, e.g., <MapView ref=“map” … >

• We can reference to the MapView Component by accessing this.ref.map

l9_map_travel_smooth

l9_map_travel_smooth

• We move to the new location as specified in latlng.

• And zoom in,

• smoothly in 3 seconds (3000 ms)

Smoothly Move Map Demo

l9_map_travel_smooth

HW: How to automatically open call out when pressing a button?

• There is a method call “showCallout()” in MapView.Marker

• Use Ref!

• This is your homework!

https://github.com/airbnb/react-native-maps/blob/master/docs/marker.md

Q/A