Mastering Map Magic: Jetpack Compose GroundOverlay Tutorial & Code!

chiao welcome back to the channel in today's video we're going through uh drawing on the map with a ground overlay the ground overlay is another function from the Google Map support uh Library this is the the definition of the function it has a few parameters position image anchor be ring clickable tag transparency visible Z index and don't click the only two required parameters are position and image all the other ones arore B ring clickable and whatever have default parameters the position parameter defines where to place the image on the map the image actually is the image and the anchor defines how to center the image on the map by default it's set by offset 0.5 0.5 which basically tells the function to draw the image starting from the center of the image in the position that you defined the B ring represent the rotation of the image on the map clickable and don't click are self-explanatory as well as transparency and visible the tag is the tag to let you recognize it and the Z index defines where it's draw the image will be drawn on the maps allowing you to basically Place one ground overlay on top of the other or draw anything else like circle square polygons and whatever in the order that you that you prefer let's see what the ground overlay position is the ground overlay position it's a class with a private Constructor that can be created in two ways the first one is to provide a lot long bound to the create function and the second one is to provide a location a width and a height the lat long bounds accept two lat long positions one being the Southwest or the bottom left of your image and the northeast or the top right of your image and those three are used all together with the anchor that you provide to the ground overlay position in order to place the image in the correct way now let's see how you could actually use this function in order to implement your image so here we have the ground overlay that accept a position an anchor an image a transparency and a z index the Z index could be defined as one just to have the ground overlay be above the Google Map representation the transparency we could use 0.5f in order to not completely obscure the maps below I always like to Define this the offset as offset zero in order to specify to the ground overlay that the starting drawing point is the top left of my image then for the image I have created a function that accept a drawable ID and returns a bitmap descriptor from that drawable what this function does is simply get the drawable from the context gather the withd and ha create a bit map with that withd and he create a canvas based on that bit map set the bounds of that canvas and draw the drawable on the canvas and then returns a bit bcri Pro from the bit map so let's go ahead and use it what we need here is the local context current and the drawable so our drawable overlay overlay two for example which is an image that draws something on the map now we need a position so we need a ground overlay position create function here as I say we have two option either providing a location with a width and a Flo or a bounce this is the trickiest part of using a ground overlay I've used this previously on my work and the image usually comes with a known offset zero position and also you usually have the pixel perameters that is used in your image so with those three information you should be able to to gather the offset zero position width and height based on the width and height of the bit map that you have then for this video thought I had to guess the top left position of my overlays and estimate their width and height on the map which is tricky due to the Runing of the hair a flat image withd won't be the same when applied on a globe and for this you would need to take this into consideration when Gathering the width and height luckily enough the L longer class of Google Maps has a spherical distance which can give you a double that represent the distance spherical distance between two L long position so if you have the various corner of your image that needs to be set on the map you can calculate the spherical distance and provide those as well once you have all the data that you want you can create a ground overly position instance for example here I created one using the southwest and North East position of this that will be drawing on the map another way is to create a location which will be used Al together with this anchor and a width and a height which are calculated based on the size of the bit map and it's scaling to draw on the map with this done we can launch our application and see how those overlays are drawn on the map as you can see I haded an overlay with an alpha of 0.5 as you can see that it's almost half transparent and it draws the buau limits the London map now it's not really too precise as you can see if I zoom in it's not really perfect but that's because I got her myself the top left of this image just trying to place it on a Google map now let's go ahead and draw something else the image will be almost the same as before with a few areas colored this time I went ahead and set the transparency to zero in order to have the image completely cover the map underneath it and as you can see from the emulator now the image completely covers the map and has a few colored buau in London and the last example I want to show you is the one that actually use the other way to create the ground overlay position defining the southwest and Northeast of the position and if I run the app now you will see that we have this image overlay on the map which draws the London overground map on top of it and again this isn't too much precise but if you look at the station they are actually quite well positioned on the overlay and thanks for watching this was a short tutorial if you enjoyed it please consider giving it a like and until the next time see you

Channel: Luca Nicoletti

Views: 130

Keywords:

Id: FOiuuhORvxQ

Length: 8min 20sec (500 seconds)

Published: Sun Mar 31 2024