Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads.
Kobkrit Viriyayudhakorn, Ph.D.
CEO of iApp Technology Limited.
kobkrit@gmail.com
http://www.kobkrit.com
Thai Travel Directory App
React-Native-Maps
• https://github.com/airbnb/react-
native-maps
• React Native Map Components
for iOS + Android
• Made by...
Installation
1. $ react-native init --version=“0.35.0” l9_map
2. $ npm install react-native-maps --save
3. $ react-native ...
Android Installation Extra
Steps.
1. Google Map need an API key
2. You can get your own at https://
console.developers.goo...
Adding Google API key
Add 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...
Adding Width,Height to Map
l9_map_2Full l9_map_2 source code at the end of lecture note
• Dimensions return current 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, -...
Make it controllable by State
l9_map_3
Instead of, the fixed regions, we make it as a state.
Make it controllable by State #2
l9_map_3
• onRegionChange props will be called when the location/zoom
are changed, with t...
1. Drag on map view to move
the map.
2. Once drag, this.state.region
was updated by
onRegionChanged().
3. Text at the lowe...
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 MapView
l9_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.Marker
coordinate => L...
1. MapView.Marker creates a red-
pin marker on the map (for Apple
map), and droplet shape pin on
Google map. Place it as c...
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.

T...
Adding custom images to
markers
images/shopping.png images/music.png images/attention.png
W=56px / H=56px / Transparent Ba...
Adding custom images to
markers l9_map_7
• Load image into state,
and display it on map
using “image” prop.
• Image shall ...
l9_map_7
Nah,.. Change my mind

I 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
• ...
moveMapToLocation method
Once called,
moveMaptoLocation
method change the
state of region to
assigned latlng, and
zoom in ...
Location Button Component
l9_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...
How to reference to the
MapView (Ref)
• How we can reference to our UI in react?
• Luckily, we have Ref System!
• We can h...
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
...
Q/A
[React-Native Tutorial] Map
Upcoming SlideShare
Loading in …5
×

[React-Native Tutorial] Map

21,892 views

Published on

Learning how to add Map into your react-native mobile application in both iOS, and Android by making a simple Thai Travel Directory app.

Published in: Technology

[React-Native Tutorial] Map

  1. 1. Kobkrit Viriyayudhakorn, Ph.D. CEO of iApp Technology Limited. [email protected] http://www.kobkrit.com
  2. Thai Travel Directory App
  3. 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
  4. Installation 1. $ react-native init --version=“0.35.0” l9_map 2. $ npm install react-native-maps --save 3. $ react-native link 4. Write some code 5. $ react-native run-ios 6. For Android, we have extra steps.
  5. 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 androidappsrcmainAndroidManifest.xml 4. $ react-native run-android
  6. Adding Google API key Add meta-data tag as shown below, between <application> tag in AndroidManifest.xml
  7. Adding Basic Map Code l9_map_1 You can see full l9_map_1 source code at the end of lecture note (A4)
  8. 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
  9. Adding Width,Height to Map l9_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.
  10. 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
  11. Make it controllable by State l9_map_3 Instead of, the fixed regions, we make it as a state.
  12. Make it controllable by State #2 l9_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.
  13. 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
  14. Configure the MapView And much more.. https://github.com/airbnb/react-native-maps/blob/master/docs/mapview.md
  15. MapEvents are also catchable And much more.. https://github.com/airbnb/react-native-maps/blob/master/docs/mapview.md
  16. Let configure some MapView l9_map_4
  17. Let’s change the mapType mapType=“hybrid” mapType=“satellite” mapType=“terrain” l9_map_4 Android only
  18. Adding Map Markerl9_map_5 Let move the location to the Victory Monument, Bangkok, Thailand. MapView.Marker coordinate => LatLng Object of that marker title => Title of Information popup
 description => Description of popup
  19. 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
  20. Add More Markers! l9_map_6
  21. l9_map_6
  22. 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
  23. Adding custom images to markers images/shopping.png images/music.png images/attention.png W=56px / H=56px / Transparent Background l9_map_7
  24. Adding custom images to markers l9_map_7 • Load image into state, and display it on map using “image” prop. • Image shall be around
 56px X 56px
  25. l9_map_7
  26. Nah,.. Change my mind
 I want custom view to represent
 markers instead… l9_map_8 Place Name Normal Picture Group of View
  27. Marker as Custom View • Add View as the children of MapView.Marker l9_map_8
  28. l9_map_8
  29. That such a boring 
 Popup… I want to have 
 a photo in it. (Custom Popup) l9_map_9
  30. Custom Popup • Add MapView.Callout as the children of the MapView.Marker l9_map_9
  31. l9_map_9
  32. Drawing Circle on Map … https://github.com/airbnb/react-native-maps/blob/master/docs/circle.md l9_map_10
  33. Drawing Polyline on Map … https://github.com/airbnb/react-native-maps/blob/master/docs/polyline.md l9_map_10
  34. Drawing Polygon on Map … https://github.com/airbnb/react-native-maps/blob/master/docs/polygon.md l9_map_10
  35. Drawing Something on Map (Code) l9_map_10
  36. 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
  37. moveMapToLocation method Once called, moveMaptoLocation method change the state of region to assigned latlng, and zoom in by setting
 latitudeDelta, and longitudeDelta l9_map_travel
  38. Location Button Component l9_map_travel_locationButton
  39. Tap! l9_map_travel
  40. Tap! l9_map_travel
  41. Tap! l9_map_travel
  42. Tap! l9_map_travel
  43. 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
  44. 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
  45. l9_map_travel_smooth • We move to the new location as specified in latlng. • And zoom in, • smoothly in 3 seconds (3000 ms)
  46. Smoothly Move Map
 Demo l9_map_travel_smooth
  47. 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
  48. Q/A
https://casino-online-ua.info

casino-ua.info

×