Add Maps to Your Expo React Native App - With Draggable Markers, Custom Callouts and Custom Styles

hi everyone today I'm going to show you how to work with maps inside your Expo react native app so you're going to want to install react native maps and express sharing the express sharing is just so I can show you how to share a snapshot of your map so I'm just going to create a style first step that's going to be for my map view and it's going to just have a width and height of 100 so it's just going to take up the entire space available of my app I'm going to go ahead and I'm going to add a map view component you can do some things like Supply an initial route and also the style obviously to specify the width and height the initial route will just be where you want it to Center on otherwise it'll default to around about your location I believe so I'm in New Zealand and that's why it's centered on New Zealand now I'm just going to go ahead and show you that you can also have a Handler a function that can be called when the region changes so I'm calling my function on region change and it's going to be called when the on region change event is triggered um it's going to have a perimeter of region and I'm going to console log that region for you so you can see what it is you could do other things with it if you're listening to this event and there are other events um like when you um are dragging around the map and such so if I go ahead I'm going to open up that terminal so you can see those um regions being logged to the console and what I'm going to do is I'm basically going to use one as my initial route so I've centered it there on Australia sorry I said initial route earlier that's actually initial region um so yeah I'm just going to go ahead and Supply that based on what I've logged out there you've got the latitude longitude latitude Delta and longitude Delta so you can see now if I refresh it's going to take me back to that location that I've set as my initial route region sorry there's some other cool things you can do so you can also add markers to your map and you can also sort of add overlays and stuff like that and custom overlays for your marker so when you click on the marker it shows um whatever information you want there's also default ones as well I'm just going to create a locations of interest and use that to add some markers to the map that's gonna have a location that's basically going to be the location where the marker is pinpointed on and the title in the description are going to show when I click on the marker I'm going to want two markers just because I'm showing you how to map from a list of locations to markers and um if you were doing this in a real app you might actually like load these from an API so that you might have like some restaurants you want to show on the map and you might load those from an API in the use effect hook and then um update the state which would trigger the markets to show on the screen once I've loaded but for the purposes purposes of this example I'm just going to go ahead and specify them manually I'm creating a function here that's going to give me basically a list back of the different components that I want to render which are the markers and I'll call this function from inside the map view so this function map is basically it gives you each item and index and then you can return a component for that specific item and index I use the index as the key because I know it's going to be unique for each marker so I'm going to keep these pretty simple markers for the locations of Interest I give them a key which is the index as I know that's going to be different I'm going to go give them a coordinate which is going to be the location I can access that by item.location because the item is the location of Interest I can give it a title the same way that's going to be rendered on the little overlay when I click on the marker and I'm going to add the description the same way then I'm going to call that from inside the map view and that's going to allow me to render the two markers for my locations of Interest you can see them there on screen if I click on them it'll show my little informational overlay there are a few other types of markers that you can make so one of them would be a draggable marker so that means you can sort of move it around on the map so maybe you want people to be able to pinpoint a location you want them to be able to adjust it so you might make it draggable for this I'm going to need States so that I can allow the location to be updated so I'm going to create a state variable for the draggable marker coordinates and I'm going to have a function that will set those draggable Market coordinates when they're set it will basically trigger that redraw and I can provide a default value as well just taking a look at that initial region to identify what a good longitude and latitude would be I'm going to make it pretty close to the center of the map I'm going to set that coordinate to be that state variable so that Mark is going to be redrawn when that coordinate changes and I'm going to on drag and set that draggable marker coordinate to make sure that it stays in that new location that it's been moved to I can access that new coordinate from the event.native events.coordinate so here I go if I go drag that PIN you can see that it plops into another location but if I try and drag one of these other pins it's not going to do anything there you can see I can drag that around as many times as I like you may also want to change the pin color so to change the pin color you just specify the pin color of the marker and that just means it'll be easy to identify which one is your draggable marker you may also want to have a marker with a custom overlay so to do that you're going to want to have the opening and in tags of the marker because you're going to want to inside that put what the overlay would be you're still going to want to have the coordinates in the pin color and if you wanted to make it draggable you could make it draggable but from the purposes of this demo I'm going to just keep it in a static location I've gone ahead and saved that just to make sure that Mark is on the map and now I can go ahead and add my overlay so that's cool to call out and I'm going to specify that I want some custom text in there I'm going to actually add a state variable to hold account just to sort of show that you can do things that have quite a lot of um well not complexity it's not super complex but you can sort of use react things inside it so I've got a state variable that's going to be count I'm going to trigger that count to update on button press and it should maintain its state while I'm inside that app if I reload the app it will reload that state so I'm going to add my button now that's going to be useful for incrementing the count I'm giving it that title and on press I'm going to go ahead and set that count to the count plus one if I go ahead and save and put press on my marker you can see that I've got my count and when I click increment count it increments it if I click out and click on something else and go back it still has my count but if I go ahead and reload the application then when I press on it you can see my account has been reset I also want to show you guys how to take a snapshot of your map so I'm going to go ahead and I'm going to create a button here that's going to be called take snapshot and what it's going to do is it's going to take a snapshot and share that so I'm pressed I'm going to call this function called take snapshot and share I need to go ahead and Define that now so I've just realized I haven't imported one and installed one thing that I need for this demo and that is the Expo file system package I'm needing that so that I can save that file and make it shareable so I've just installed that I'm starting up again and I'll open on iOS so I'm going to need a reference to the map to be able to take a snapshot of it so what I'm going to do is I've used the use ref hook to create a reference and then I'm just passing that to the map view then from Woodlands take snapshot and share I can use that matte pref to access the map view and call the take snapshot function I'm making this asynchronous as this is an asynchronous call so what I do is I go maprip.current and I'll call take snapshot you can pass some options in here so some things you might want to pass are the width and height of the snapshot that you want to take and the result so for example you might want it as an image or you might want it as base64 I'm going to go with base64. that's because I can easily save that into the file system and share it that way I'm just going to console log the results that you can see it so if I click on that green pin I can click on take snapshot and share and you can see the base64 result is being output to console now I'm going to go ahead and work on saving that so I can share it I'm going to import Star as file system from Expo file system so I can go ahead and use the file system to access the directory and generate the file name and I'm also going to import share async from Expo sharing that's going to be useful for sharing my saved file so this is going to be my file path and it's going to be filesystem.documentdirectory and then I'm just going to add the name of my file which is just going to be snapshot.png so I can go ahead and save that the base64 data so I'm going to write that as a string async to the file location that I've specified and I'm specifying the encoding so that knows what encoding type I have which is base64. and I just need to pass that file URI to share so if I go ahead and click that increment now and then go ahead and take my Snapshot it's going to generate a snapshot which I could then choose to save to files as that's one of my share options and I can save it if I go ahead and look at my files it should now have my Snapshot and if I open it you can see it's a 300 pixel by 300 pixel image you can provide other options to the snapshot to get different results on detail of your snapshot and stuff like that I'm going to provide the link to the documentation in the description so you can check it out if you need now I'm going to go ahead and show you how to add a map overlay a map overlay can be just to provide information that you want the user to see I'm going to use it to show the location of the draggable PIN what I'm going to do is I'm positioning it absolute I'm giving it a position from the bottom and I'm going to center it I'm also going in a background color so that it's easy to see so I'm just going to make it white I'll give a border so that it stands out from the map itself you can style it however you like but this is just some simple styling I've added for mine um you want this overlay to be inside the map view and I'm just going to create text for mine so you can see I'm just testing it with high but now I'm going to go ahead and add that longitude and latitude of the draggable PIN just so in case people are interested to know if you wanted to you could actually add geocoding to convert it from the latitude and longitude to the actual address and show that but if you're interested in knowing how to do geocoding and reverse geocoding go ahead and check out my location tutorial so you can see when I drag the pen it updates the longitude and latitude finally I'm gonna go ahead and show you how to style your Maps so you can provide map Styles and make your map look pretty but you're going to need to provide a provider and you're going to want to set that to Google you're going to also need to provide API keys in the app.json but it's not necessary for testing on Expo go if you have a standalone app you'll need to generate it though and I'll go through the process to do that later you're going to want to open up this map Style with google.com I'll link in the description below and from here you can grab the Json to style your map so I'm going to use that Legacy Jason styling wizard I'm choosing a default and you can sort of just fiddle with the density of features so you could take away most things if you're just interested in like the main locations but you can also go a bit more fine-grained and I'll show you how to do that in a minute basically this allows you to create a look that fits with your app and your brand and might look pretty but I mean the standard is quite good because it is what people are used to seeing and so they'll be more able to use the map probably it'll be more user friendly for them but yeah as I said there are more specific options and you can edit those as you wish so you can see that I can change the stroke and fill of the highway I could change the water you can change the weight of the stroke or basically change anything here I'm gonna go ahead and change the color of the water and make it like a nice purple color just to add a bit of color to this map and it's going to contrast contrast with that yellow I don't really care what it looks like too much I'm not trying to style this I'm just trying to give you an example of how you might go about styling it if you are interested in changing the style so basically once that finishes you get this Json and you can copy that Json with that Json you can then put it inside um your a variable and then add that variable and refer to that variable from your map view component so I'm just call calling my map Json I'll just copy and paste that and then inside my map view I just provide that map style and when I did it's showing my custom map style so now I'm going to show you how to generate those API keys so first off I'm going to show you for Android and if you haven't already you're going to want to register a Google Cloud API project and enable the maps SDK for Android you can do that by opening the browser to the Google API manager and creating a project once it's created you go to the project and enable the maps SDK for Android I am also going to link this documentation in the description I'm just providing it in the video as well in case the documentation changes in the future and is out of date or is removed and so it's hard to figure out how to do these things um so after that you're going to want to go ahead and basically create a API key in the Google Cloud credential manager you're going to go create credentials and API key and then you're going to specify that you want to create it for Android in your app.json you're going to need an Android dot package value so for example from I want a Big com.m.miscoding Dot map tutorial is the package name um but your yours would be whatever your app name is and whatever your company is then you need to actually specify what the xiaowan certificate fingerprint is and there's a bit on how to do that in step two above you can just refer to that on screen then you click save and you're going to have an API key added to your project with the API key what you're going to want to do is you're going to want to add it to the app.json underneath the android.config.googlemaps.api key field you're only going to need this if you're providing a Google a custom style probably but there I think there might be a few other reasons you might include it so yeah if you're doing this you're going to need to import provider Google and set that provider inside the map view next up you're going to go ahead and basically for the same project you're going to enable the map SDK for iOS you can do it as described on screen so I don't need to explain that to you but then you're going to go to that Google Cloud credential manager and create the API key you're going to choose an IOS app and basically what you're going to do is specify your bundle identifier which should match your iOS dot bundle identifier from your app.json if you check out my app.json you're going to see the bundle identifier and I'll even add the dummy Google API keys so you can see where it would fit inside the app.json file and you're not trying to figure that out on your own much like you did for Android you're going to need to add the API key to the app.json they'll just be under the irs.confect.google maps API key field and I'm going to leave that with the dummy data inside my app.json so you can figure out where that should reside my code for this is going to be available on GitHub and you're free to use it and play around with it and make any changes you need you can test inside the Expo Go app without providing this Google Maps API key but once you want to go ahead and release it you're going to need the API key um you're also going to need to import that provider Google if you're planning on using Google Maps as a provider otherwise it's just going to default I hope you've enjoyed this tutorial today if you have please like And subscribe for more content all my code will be available on GitHub and you can even check out my locations tutorial for a bit of stuff that might relate to this

Channel: MissCoding

Views: 20,823

Keywords: react native tutorial, react-native-maps, mapview expo react native, expo react native, custom callout react native map, custom style react native map, draggable markers react native map

Id: xcn-0LyX6JY

Length: 23min 8sec (1388 seconds)

Published: Wed Feb 22 2023