English feliratok

← Configuring the map with XML

Beágyazókód kérése
5 Languages

Showing Revision 3 created 05/25/2016 by Udacity Robot.

  1. With the basic app you've just built,
  2. you can configure the initial state
    of the map in a number of ways.
  3. For documentation on all of the ways you
    can configure it, using XML attributes,
  4. look in the instructor notes below.
  5. But for now we'll configure
    a few attributes to show
  6. something interesting.
  7. So here's the layout that you had
    just created with your fragment
  8. containing the maps fragment.
  9. And this gave you the default Google
    maps that you've been using throughout.
  10. But what we're going to do is
    we're going to change this.
  11. So we're going to take a look at
    New York City with a flyover type view.
  12. So first of all, there's going to be
    a number of attributes on the fragment
  13. that we're going to need to set.
  14. And we're going to do these
    using the Maps namespace.
  15. So we need to tell the XML
    about the Maps namespace first.
  16. So I'm going to do that up here.
  17. And you see,
    we have XML namespace tool equals this.
  18. We're going to create a new
    XML namespace for our map.
  19. And here are the details for
    the XML namespace for map.
  20. As you can see, xmlns:map is equal to
  21. http://schemas.android.com/apk/res-au-
    to/.
  22. So this will give us the map attributes
    that we can now add to our fragment.
  23. Map attributes will consist of
    things such as the latitude and
  24. the longitude of what
    you want to look at.
  25. So the latitude and
  26. longitude of the area in New York City
    we're going to look at a la now.
  27. Here you can see, I've added
    the map camera target latitude and
  28. map camera target longitude.
  29. Don't worry about the red
    underlines on them at the moment.
  30. Now, when you're looking at a map,
  31. you actually look at a map
    through a virtual camera.
  32. So you tell the camera
    the target latitude and
  33. longitude that it's going to look at.
  34. So the latitude of downtown
    New York City is 40.7484 and
  35. the longitude is negative 73.9857.
  36. But what this is going to do is, if you
    remember when you first run the map,
  37. you had a view from high in
    orbit looking down on the Earth.
  38. And this will do that, but it will
    be looking down on New York City.
  39. But all it's going to
    do is shift the camera.
  40. From being high in orbit looking down on
  41. the equator to being high in orbit
    looking down on New York City.
  42. So we also want to move the camera so
    we zoom down onto New York City.
  43. And we'll change a couple of things.
  44. I'm going to add them and
    then talk through them one by one.
  45. So these are the three
    attributes that I've added.
  46. The first is the Camera-Bearing.
  47. The Camera-Bearing is the direction
    that the camera is looking at,
  48. with zero degrees being looking north,
    180 degrees being looking south.
  49. So as a result, you can see I'm
    looking at 112.5 degrees, so
  50. I'm kind of looking east
    with my camera bearing.
  51. Next is going to be the camera tilt, so
    if you can imagine the camera when it's
  52. looking straight down,
    it's going to be tilted at 90 degrees.
  53. But if I can change that to 65 degrees,
  54. then the camera is going to be appearing
    somewhat at an angle looking down, so
  55. we have a nice 3-D isometric
    view of the world beneath us.
  56. And then finally is the Camera ZOOM.
  57. The larger the number, the closer
    you are to the surface of the Earth.
  58. So if you can imagine a Camera ZOOM 0,
    that's what we've had all along,
  59. where the camera is way up.
  60. Looking down on the Earth.
  61. But with a Camera ZOOM 17, I'm going
    down really close to the Earth.
  62. And as you'll see, because I've
    got a camera tilt of 65 degrees,
  63. I'm getting a 3D view of
    the skyscrapers in New York City.
  64. And with the Camera ZOOM being 17,
  65. I'm actually lower than the level
    of some of these skyscrapers.
  66. So, let's run the application and
    see what it looks like.
  67. So, now here we see the application
    running on my tablet.
  68. It gives us a view of downtown New York,
    and I can actually scroll around and
  69. see the city in three dimensions.
  70. So I can see some of the skyscrapers
    that are cylindrical in shape.
  71. And as we had an earlier on,
  72. we were actually looking the base of the
    Empire State Building, and here you can
  73. see the Empire State Building rising
    out of the view of the camera.
  74. Because the camera is actually lower
    than the height of the building.
  75. And as I zoom around New York City and
    I pan around, we can take a look at some
  76. of the interesting features
    in some of the buildings.
  77. For example, here is the United Nations
    headquarters, overlooking the river.
  78. Here are things like some of
    the islands in the river itself, and
  79. we can see the skyscrapers on them.
  80. Sometimes, it takes a little while for
    them to show up.
  81. So you've effectively gotten
    all of this for free,
  82. you didn't need to set up anything to
    get the 3D views or anything like that.
  83. Just basically by the fact
    that you tilted the camera and
  84. were close enough into the earth,
    to be able to see the 3D views.
  85. If I were to zoom out you'll see,
  86. I'm just going to see now a pan-view
    of New York City without the 3D.
  87. As I zoom out, you can see we
    were facing towards the East,
  88. looking out over Long Island.
  89. When I zoom in over the city again, once
    I get close enough we'll start seeing
  90. the buildings and
    the skyscrapers popping up.
  91. And there they are.
  92. Pretty simple,
  93. just all of this was done just by
    setting attributes on the map fragment.
  94. Pretty cool, right?