[React-Native Tutorial] Map
40 likesā¢26,304 views
The document provides a step-by-step guide on creating a Thai travel directory app using React Native Maps. It includes installation instructions, code for adding various features like map markers, custom images, and popups, along with details on how to manipulate the map view with state. Additionally, it discusses methods to animate map movements smoothly and handle user interactions with the map.
![[React-Native Tutorial] Map](https://image.slidesharecdn.com/l9map-161025035523/85/React-Native-Tutorial-Map-36-320.jpg)
[React-Native Tutorial] Map
- 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 ļ¬ex: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 ļ¬xed 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 deļ¬ned 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 ļ¬ngers pinch, to zoom, to rotate the map. In simulator, press alt(option) button to two ļ¬ngers pinch. l9_map_3
- 14. Conļ¬gure 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 conļ¬gure 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
- 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
- 37. 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 speciļ¬c location and zoom in and open the call out. ā¢ Starting to modify the app from l9_map_7 App Requirements l9_map_travel
- 38. 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
- 44. 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
- 45. 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
- 46. l9_map_travel_smooth ā¢ We move to the new location as speciļ¬ed in latlng. ā¢ And zoom in, ā¢ smoothly in 3 seconds (3000 ms)
- 48. 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
- 49. Q/A