Lessons

Lesson Info

Searching for an Address and Map Overlays

So now that we have everything set up on the map view, we can let users search for addresses and then show them on the map, which is our next step. So once they find an address out of that geo coder, we want to get the geo point, the latitude and longitude and tell the map to display with a nice little red dot um, on there, which is an overlay that we're gonna be making. So what's talk about that? Geo Coder returns a list of addresses. We just looked at this so you can get from location, which searches address near latitude and longitude, which is reverse geo coding. Or you can do get from location name, which looks up, addresses and finds. If it knows about the address, what that latitude, longitude that addresses. And then you can also box the search by a geo fence, which is like the top left in the bottom, right corners of a of a set of coordinates that define a box to search in C. Comptel say that I want to limit search results to like five miles or something, which is, um, so I ca...

n find all Starbucks within five miles or something. Which is all This is all part of the Google A p I, um, for location. But like I said, what we're gonna do is just be kind of dumb. So we can show the get some example code up there That doesn't take all the cases into account. And we're just gonna assume that the user's gonna find something or put in an address that actually exists. And we're just gonna pop the 1st 1 off the list that returns and say that that's the one that we want to use. And, uh, does anybody recognize this address, By the way, it's anybody know what that addresses four dio. It's Google headquarters. Somebody in the audience. Yep. So what? She's that one? Because that's a good good one to use. All right, let's get working on this set of features. So back here in the ad location, map activity. Um, the next step after we get the location, um, from the name that the user searches for, we've got an address. We're just gonna blindly get the 1st 1 off the list on. And also, by the way, we also only searched for one by saying my specifying here that we only wanted one result. Um Ah. What we want to do next is to create what's called an overlay, and I'm going to call it an address. Overlay and overlay is what you use to decorate a map, put pointers, put things put anything on top of a map and overlay, gives you a way to do some custom drawing and also to, um to translate. Um, Earth, uh, Earth style coordinates like LAT longs into the pixels that need to be displayed at a certain point on a map that corresponded. Oh, slat longs, Which is nice of it, because that's probably a lot of complex math that you wouldn't want to deal with. So I'm gonna create an address overlay class which will extend overlay and taken address, which is going to, ah, plot on a map. So I'm gonna create this class now. Um, the super classes overlay the safest will get in four. Did Oh do that? Well, it seems to be working with Google maps, but not the other one. So I want to extend an overlay hit finish, and now I have a new class. When an eclipse wakes up. Okay, Address, overlay extends overlay. And so we popped up in my sample code here. Um, you know what? I want to change this to hear me show you something about Eclipse to actually want to put this in the views package. So what I could do is change this right here, and it's gonna complain because it created inside just the tax task manager so I can hover over here and say, Move, address, overlay Java, two views. And now it's in the right place. I think at location map activity is gonna complain now, because it doesn't know where that is. But I can hover over here and say import, that's an easy way to, um, to ah, fix and fix a package. But now back here in ad location map activity. Um, it's gonna complain because I don't have this constructor. So I'm going to create this constructor, which takes an address inside address overlay. Save some typing there. Okay, So address overlay looks a little bit like this in the constructor. Um, first of all, um, let's do some housekeeping. We need to call to the No Argh! Constructor, Because you need to call a constructor. Uh, we're gonna make sure that the address is not know because of run time, If it's if it is No. Then I'm going Teoh do two things, Um, going to use this convenience method. Ah. Said address. I'm gonna do a lot of work when the address is set on passing address and we'll do some working there in just a second. And the next thing I need to do is I need to create a geo point, and I'm going to do that on the based on the latitude and longitude, the address that has passed in So I'm going to do is also have another method which will do some work for me. Set geo point. Actually. Ah, I misspoke. No, no, no. That is that is not a a p I method. Sorry. Yeah, that that's something that I'm gonna implement here in a second, just to keep track of it, Um, and also to allow Ah, um this is kind of a public ap I that I'm setting up here, but I'm gonna create a geo point based on ah, the latitude and longitude out of the address that we get past in. But the problem is that the Geo point constructor takes, um two integers and that is the latitude and longitude expressed as an imager. And the problem is that an address has latitude and longitude. Um, see if it shows up in these docks. No. Well, in any case, the address has a latitude and longitude. But it is, um, there expressed as a floating point. Numbers there doubles, in fact. So what I'm gonna do is get the largest, even longitude. Aziz doubles off of the address and then multiply them out to the resolution that I need them to be. This is basically like moving the decimal point. What? Seven places? I'm bad with math. It's moving the decimal place and then I'm going to in the Geo point constructors say, um, converted latitude comes first, Uh, get the value off of that double and then here converted longitude didn't work, converted longitude and value because I need to pass an imagers. I'm not sure why there is this sort of impedance mismatch between these two Google classes here, but these need to be imagers, not double. So I need Teoh. Keep the full resolution by moving the decimal place and then lopping off the the floating point part and just passing an energy is here to this geo point constructor. Okay, hopefully, does that make sense, Everybody. That's just like a simple conversion. Okay, so I'm gonna ah, set up on set address. Yeah, a, uh, field. The start address equals address. And I geo point this. Sorry about that. The study Geo point equals geo points. Sonal. These need to be created as fields this dot geo point. Ah, yes. What was the question that you have this dot Get point and oh, yeah. Typing and talking at the same time is a is a skill that that I've seen some people show, and it's pretty impressive when they could do it, but I'm not one of those people yet. Okay? So that's why I copy and paste a lot. Um Okay. So sorry. We got a little sidetracked there. Um, but I don't have an address and have a geo point. Geo point is which you need to express the latitude and longitude, Um, in the correct way to the map, um, so that it can draw it at the correct pixel location. That that corresponds to that latitude and longitude and all that is done. And this is the most important method in an overlay. Inside of a draw method that looks like this and takes a couple arguments, it takes a canvas. It takes a map view in this in this overlay case, and it takes an arguments, and we'll show what this means in just a second. That is a Boolean. And it's called Shadow when that's all pretty interesting. When I think eclipses gonna complain now because I said override and their errors it just gets the order of operations wrong. And then I could say override once it knows that that method exists up. Maybe not. It's still gonna complain, so canvass can't be resolved to a type. Um, getting that same import problem here. I'm just gonna chunkin all the imports at once up to the top here, and I should set us up. Okay, Now, the draw method looks like that. The first thing we want to do is to let super draw itself with those same arguments. Then what we want to do is create a point which is just like an X y. Let me talk through this and then what kind of talk? But you have all but you have some or higher little questions about drawing things in general. Because this is, by the way, just using the two d drawing a p I The android has but applied to a map view. So this this draw method, you confined whenever you do custom drawing code. Um, in fact, let's look at the hierarchy just just since I got sidetracked there, I'm gonna look at the hierarchy of this abstract class overlay by hovering over it and saying a right click and and saying, Um ah, open, quick, tight. Oh, actually could use the quick type Iker hierarchy which should just pop up right here. And then it shows, um that it is part of Ah, um actually, I thought that it extended of you. OK, I was wrong about that. But But there are views that you can draw custom, um, of programmatically drawn views that you can use to draw things on the screen that followed this same convention. This this implementing draw this weighing doing the same kind of stuff with he's drawing a p I classes that I imported here like point, which is an X Y coordinate. And these air on the graphics package paint deals with color, um are actually drawing color on the screen. And then you could describe a color with a class called color. And then, um, what we're doing here is an overlay is is do it, using all those two D methods to draw something. But then, ah, overlay knows how to apply those to a map view and, ah, actually draw on top of the map view. So let's let's keep on with this and then we'll see how that's done. So first thing I need to do is create this point because I'm gonna put the X Y coordinate of the latitude into that latitude and longitude. And the way that I do that is by on the map view. Getting a projection production is what does the conversion between a Digeo coordinate of the latitude and longitude to the pixel value on the map and the way it does that is by taking a geo point and putting those ah, whatever the X Y coordinates are into the map, um, into a point which I've set up right here location point. Um, so I need to implement this. Get geo point. By the way, I think I said Thies getters and centers up this way because I was going to reuse this class, Um, this overlay and make this overlay move around a different points. If you wanted to animate this overlay or references overlay and change things about it at runtime than you could use these this type of an a p I, and then you'd have toe decent invalidation and stuff. But in this, in this case, I don't think I had strictly needed it. But any case, this will make it work. So now the geo point, um, once again is the LAT Long and this projection two pixels method changes. The latter figures out what the thea the pixel point needs to be for a particular geo point on a map view, and it will put that X Y coordinate into this point that we've created here. Um, now we'll save that for just a little bit. Now we're gonna start to color the dot that we're gonna put on the map. We're gonna use a paint to do that. So I'm gonna create a paint. I want the paint to be anti a list. So it doesn't look too Jaggi. That would just smooth things out a little bit. And then the container X and the container. Why? I'm gonna need Teoh set up here on and using some calculations in just a second. So the container x and container, why are the that? We just went through this process of figuring out the x and Y coordinates of a particular set of geo coordinates on the map, and now we're gonna use those to draw the dot on the map. And I'm just gonna make that a simple circle. So let me show you the drawing code for showing actual dot first, and then I will tell you what this shadow argument is for. I'm gonna go about it this way. If I just want to draw the red dot Here's what I would do. I would say, um, set the colors of red inside the paint and then I would say canvas, draw me a circle at this X and this. Why with this radius that I'll set up in just a second as a constant and use this paint to do it. In fact, let's just run that so that we can see some working code here. And then we'll come back and talk about shadow. Um, so educated, constant here, container radius the radius. Let's make the radius for be a nice sized circle for how big we expect it to be. So the shadow argument tells this draw method, it basically gets called twice. It first gets called once with shadow off. And then, actually, I think it may be in the order in the reverse order, so it gets called with shadow on. And if you want to draw a shadow, um, you have specific code to draw the shadow inside of, like, a conditional statement. And then there's code that you used to draw the shadow the way you want it to look, and then it will get called with shadow off, and then you will drive the way that you want it to look when the shadow is off. And that way you get, um, control over how the shadow looks, and you can choose whether or not to actually draw when the, um if you actually want to draw a shadow, and we do because it looks cool in this case. So basically, I just have. If the shadow is true, then we want to draw the shadow. So what I'm gonna do is have an offset of let's say, like one pixel appear for the shadow. So I'm gonna come right and down from the shadow by one pixel and then set the paint Teoh a black completely black color with 90% transparency and then draw a circle of the same size as the red circle and that will sit underneath the the red circle and provide a shadow. So that's a choice that you get to make whether or not you want a shadow for your overlay and how you want it to look. Okay, so now the, uh, the overlay has a shadow on it. Let's go back to the map activity and actually make a draw. All right, so the way that we do that is, we create the overlay. So now that's already to be drawn. And what we need to do is to add that to the map view. Um, overlays has a set of overlays. Oh, I didn't get the map overlays yet, so I need to get that set of overlays with list overlays from the map and then import overlay. Now, I have a list of all the overlays that the map few uses Have my overlay put my overlay into the overlays and then I need to call invalidate on the map view which should make the map view redraw itself and that will get our over late, actually show up. And now, um, this next bit of code I'm just gonna paste in and, um then explain what it does because in the situation we're in before when we're looking at Pakistan and we searched for a, uh, address in California, it ah, it would show the address in California as a is an overlay, but it wouldn't actually move the map there. So now what we want to do is, once we find an address, put it on the map and then zoom the map over to the right zoom level and to display that overlay on the screen so that it user sees what they just put on the screen. So you do that with a map controller. I need to grab the map controller off of the map view. I need to make it final, cause I'm gonna refer to it inside of this anonymous class here, this run herbal. Um, and what I need to do is there's a method to animate a, uh, the map, and you can animate it to a certain geo point. Um, I guess I made that private and said the the address overlay. So there is one reason that he did have the together as well. So I'm getting the geo point off of the address overlay, which is a latitude and longitude are telling a map controller to added to animate to that latitude and longitude. And the way it does that is by spinning off a threat in the background that calls this run herbal. Um, hopefully out. Everybody understands that from a job of perspective, but I can answer questions in a little bit. And what I wanted to do is, um, as part of the animation process of moving the map, it will pan the map to that geo point. But I also want to zoom into to level 12 zoom level 12 which is just a number that I picked to be around city level. Um, I don't know if there's constants anywhere that would make that a little bit less air prone. But I want to zoom in to that level to because if you remember, we started off the application at the at the national level or the continental level of North America. That's the default view of the map view. So if we started from that position, I would also wanted to zoom into the city level of wherever you chose so that you could actually see something interesting on the screen instead of just a dot in the middle of the North American continent. Okay, so now I should be all set to actually run this code. So let's give it a look. And I was gonna pace our copy that well, I had a chance, but I have to re type it now. Okay, Now that's ask location to task. Search for amphitheater way and Mountain View map the address and it zooms, reloads the tiles. And I was there at about the right to zoom level. It also panned in There is the Google headquarters on the map. So there we go. Um, I think there is just one more step that I want to enable before we go to the next step. And that is once I have actually found an address. This is indication that I found the address that I want here. I want to enable this use location, but so I'll do that right here. Okay, those are the steps, um, to get the overlay displayed on the screen and Teoh get the map showing what the user just picked for a location. Any questions about that before we go into the next step? Yeah, I have. Ah, have a few questions, Ma. Actually, nobody in the chat room asked this. Um, But I have this question. Why doesn't Google just give you one of their cool little pins that you can use out of the box? Um, I think they I'm not sure. I I didn't even look for that because, um well, first of all, even if they did for this class, I still want to show how to do it. So you could make something custom. Um, but they may. I'm not sure if they do or not. Actually, it's a good question. I've always made custom ones because I always wanted to make um, for whatever applications that I've done in the past that needed to do this kind of stuff. We needed to make a custom one. So I just started off doing that from the start. I guess that's a good question. It's a damn thing to go through this. Yeah, it's cool to know how to do it, but I just because they had they have that pin thing. So I figured, um, so a couple of questions from the audience one was why air we could we also use the my location overlay class provided by Google and related to my question about the pin? Does that give you a default view off the overlay? Yeah, it comes with an overly We're actually going to do the my location overlay next week, and the my location overlay for anybody is not familiar with That actually shows the the location of the current device on the map, and it has its own overlay view, which is like a little blue dot that you can see on Google Maps application. Right now, I see. So it's not associated with a specific address. Its wherever you're always located. Yeah, where you're at right now. Where your were the devices right now? Okay. And then I think you answered this question already, but the overlay can handle a list of addresses so we could put back coal pins on the on the map at the same time, right? Yeah, that would actually be a list of overlays, not a list of addresses. So we'd have to create an overlay for every address, and then add those all to the overlays on the map. And I think there is also another class that you can use. Um, So when I did that quick hierarchy with command t, it showed an itemized overlay. And I think that's what you would use, um, by implementing this thing called item or a sub class. So we would I think we would work with some sort of system like that. And that would say, Here's a whole list of things that I want to put on the map, and it would deal with that for us. Okay. And somebody asked about using, um, get from location name in a separate thread to avoid blocking the you I Would that make sense to you if you were interacting with the map, it would certainly make sense. And I didn't mention that because, Well, somebody asked earlier about another set of classes that we may be doing. And yes, we're working on another set of classes. I'm gonna be talking about threads and and working with things in the background, especially network operations. And that was set of classes. But, um, so what? What they're saying is, while in the emulator, it won't really show up too much, but well, it's searching for an address. The your eyes blocked during that network. Coal because I have called get from location name right here in this current actually executing code, uh, which is executed when you click a map current address. Ah, Button. And while it's doing a network operation inside of this function, it stops right there. And the u I, um will freeze, and it will be a bad user experience, and they'll wonder why their app doesn't work for a little bit and they'll be confused. And it's just not good for anybody. So, yeah, you'd want to do that in a thread, But we're not talking about that during this set of classes. Okay? Just two more questions from me. Um, one is can use an image file instead of a draw. Um, I think you can Yeah. There during the there's there's a way to do that, I'm sure because I would definitely simplify. Yep. And then when you zoom in on the dot when you zoom in on the map, the dot scales with zoom factor. Right? So you're not zooming the dot too, right? Um, yes. Let's zoom out. Oops. That's not out. That's in. Um, yeah. See, it stays a constant size. Um, um, relative to the few port. Okay. All right. All right. Ruth and Sarah, do you have any questions? Real quickly. What is a map controller? It's the it controls the math. Um, you could do things like animation. Well, I mean, we could look at the Hewlett utility class to manage panning and zooming of a map. So basically, that's that's what it does. It controls animating the position of the map on the screen so that a physician of the tiles inside the map, you know the position that the user is looking at on the map. Well, the radius sizing be relative to the phone's display capability, Or do we have to manually adjust that? Um, so, yeah, when you're drawing pixels, that's a good question. I think that it won't be so. The higher the resolution, pixel. Um, we're doing everything of pixels here, so that would be a a smaller thing on a higher resolution device. Uh, yeah. You might want to look up some constants or passing some things based on your information that you can get, um, in the activities about the the geometry of the device and then, um, scale yer your drawings by whatever you know, you know looks good on those on those devices. That's one way to go about it. What is the purpose of the map view? Invalidate. Um, well, the purpose is to tell it to redraw and that you see that a lot in programmatic drawing code. There's a method called invalidate that you probably want to call, and you see it like swing and you'll see it in in the flash components and invalidate. Usually, this means, like, hey, you, you are There's something changed about your state, such that you'll need to redraw. So Adam asks if he if he enters in a second address. It adds an additional point on the map. Is there a mechanism to remove older points? Ah, yeah. You would have to go remove. Um, you could go through our way. You could go through this list of overlays or either, um, or you could try to reuse that overlay. I think you could try to do that. Or you could go remove this overlay from the map. If it's no longer relevant. Let's go. I didn't, uh I didn't test for that case, obviously.