Integrating MapKit with SwiftUI – Bucket List SwiftUI Tutorial 4/12

[Music] maps have been a core part of iphone ever since the very first device shipped way back in 2007 and the underlying framework has been available to developers almost as long even better apple wraps up that framework for use with swift ui meaning we can use maps and annotations right alongside text images and more as part of our swift ui view hierarchy let's start with something nice and simple placing a map onto the screen means having some programmed state to store the map's center location but also its zoom level to dictate what's currently visible on the screen this is all stored inside a new type called an mk coordinate region and the mk part comes from the name map kit which is where the whole framework powering maps lives and so our first step is going to be to import map kit into content view so we can use all that maps functionality and now we can make a property in here to store the maps state we can say at state private var map region is an mk coordinate region and this consists of two values each which have their own types the sensor is a cl location coordinate 2d so it allows you to longitude so i'll say c allocation coordinate 2d latitude i'm going to do 51.5 and longitude i'll do minus 0.12 and the span is the zoom level and the degrees of how many degrees should be visible left and right and above and below as well so we'll say there's an mk coordinate span again latitude delta delta will be 0.2 and 0.2 so 0.2 degrees uh latitude 0.2 degrees longitude and that'll center on the city of london now all these values are measured in degrees but in practice what it equates to at actual meters or kilometers really uh varies because of the way you know the earth's round and so forth and so as you move away from the equator you're gonna find uh that longitude uh shrinks and shrinks and shrinks down to effectively zero and you hit the north pole um and up to maximum value i think it's like 66 kilometers or so at the equator but it'll take some experimentation to what i'm saying to find the exact zoom level and starting point for your preferred location just just noodle around so you can come up with anyway with that in place we can now make our map because there's a map here with a coordinate region of dollar map region like that and it has a two-way binding so it can update as the user moves around the map panning around or pinching to zoom and so forth it'll rewrite the map region if i press command r now to build and run our code all being world we can see it running in action the preview isn't very helpful by the way you won't see very much but the live version you can see there we go the city of london now there are a variety of extra options we can pass in here when making maps but by far the most important and most useful is the ability to add annotations to the map which are markers that represent various locations of our choosing we want to pick out to the user somehow to do this takes at least three steps depending on your goal first you want to define a new data type that will contain your location uh second make an array of those with all your annotations you want to show and third pass that into your map view telling it as well how to convert one location into some kind of annotation you can render on the screen for example we might say that our underlying data is a struct chord location which is identifiable and it needs to be identifiable here because you'll dynamically make map markers there could be many of them and so uh you've got to loop over these and know which is which and that's where identifiable comes in useful anyway we'll say that id is a uuid so everyone's unique it'll be a name string but also a coordinate to be another cl location coordinate 2d and now we can go ahead and define an array of locations wherever we want to add map annotations to our appear so we'll say let locations be an array of a location here and i'll use the name of buckingham palace and that has a cl location coordinate 2d with attitude of 51.501 and longitude of minus 0.141 4 1 1. there we go that's buckingham palace and another one location we'll do the name tower of london off to the east and that has a c allocation coordinate 2d with latitude of 51 0.508 and longitude of minus 0.076 obviously you'd add more here but that's enough for now uh step three is the important part because we want to feed this array of locations into our map view and then provide a function that converts one location into some kind of visible annotation on the map now swifty y provides us with a couple of different ways of rendering those annotations but the simplest one is called a map marker which is a little balloon with a last two longitude coordinate attached it's all israeli and so we can say uh have that coordinate region that's fine then use annotation items our locations array and for the function that converts one location to annotation we'll say give me the location and then put that immediately into a map marker with location dot coordinate uh location in there we go and we're saying just draw a map marker little balloons at those two locations and now if i press command r again we should see our little dots there we go so this one on the left here next to james's down here uh this is the uh buckingham palace right here and over here to the east along the thames is boom the tower of london so we're now pointing at particular places in our thing here which is really really nice um they don't show any useful information i mean yeah you can see um bloody tower and treacherous gate and uh these are real by the way they really are there um but the pin itself i can press and nothing actually appears you know i'm actually pressing right now and there's no information there because we just gave this thing a coordinate there's no information there at all um to add the extra information to actually show us the title you know buckingham palace and tower london whenever um we've got to make a different kind of annotation marker here because this one isn't going to cut it instead we've got to use a different type called a map annotation helpfully enough nice and easy let's accept the same coordinate map marker does but rather than just showing a system style balloon every time we get to pass in whatever custom swift ui view we want anything you like at all and so we could say um i want to have little uh red circles around particular hotspots i could say as a map annotation with a coordinate of our location.coordinate and then inside there the square to r50y view i could say there'll be a circle that is stroked in red with line width of three and then a frame width of 44 height of 44. so a totally custom swift ui view so i'll just go ahead and press command r and now it should have been well no longer see the balloons but see circles like that instead which is great and you know once you're using map annotation you can pass in any swift ui views you want it's really a a great customization point um you could add titles here as well for example you know with a a v stack and more it's really down to you so you could have said uh there's a v stack with our circle and then below that a text of our location name for example and that's also gonna work really really well it might be a bit hard to read against the map though uh let's find out how see how it looks there we go so yeah it's a little bit hard to read but you get the idea um and of course it make it interactive we could have said you know rather than adding that information there instead i want the circle to do something when it's tapped like i said you have an on tap gesture and we'll just print out uh tapped on location dot name when it's uh tapped in the circle also works i mean it's really really flexible here so i'll tap on this thing now and you'll see tap the bucket path appears various times and that's happened this a few times and there we go so you can see it prints out both of them work great you could even if you wanted to put your whole swifty wire view of your annotation inside navigation link therefore directing the users somewhere else may tap on a particular place in your map so we could have said for example our map here is inside a navigation view let's go ahead and push it all in there one level perhaps give this thing a custom title like a london explorer for example and now we're on having on tap gesture we'll instead say there's a navigation link here and that's going to point to the text of location.name as a simple little placeholder and then uh the label for that will be our circle again so when they tap on this thing show the location name as its own text view on the screen sliding it in and make the label for that our circle let's give that a try and see how it looks there we go uh start happening on this one over here there we go tower london and then pressing the one over here boom buckingham palace the point is that you get to decide whether you want something simple like i just want a lot of balloons that's fine brilliant or add your own custom layouts with map annotation and then go above and beyond add all the interactivity you want as well using tap gestures navigation links and more all the swift ui tools and techniques you already know can be put to use right here

Channel: Paul Hudson

Views: 377

Keywords: xcode, swift, swiftui, ui, ios, programming, tutorial, example, project, code, uikit

Id: CHFlWHPvY_M

Length: 11min 9sec (669 seconds)

Published: Wed Dec 08 2021