In the age of mobile applications, interactive maps have become an essential feature for many use cases, such as location tracking, navigation, and geotagging. React Native, a popular framework for building cross-platform mobile apps, provides a powerful and easy-to-use maps component that allows developers to integrate maps into their applications seamlessly. In this blog post, we'll dive into the implementation of React Native Maps and explore its various features and functionalities.
Setting up React Native Maps
Before you can start using React Native Maps, you need to install the required dependencies. The process is slightly different for iOS and Android platforms, but the official React Native Maps documentation provides detailed installation instructions for both platforms.
For iOS, you'll need to install the react-native-maps package and link it to your project using the react-native link command or manually link it with CocoaPods. On Android, you'll need to add the Google Play Services to your project and obtain an API key from the Google Cloud Console.
Before you can start using the Google Maps Platform APIs and SDKs, you must sign up and create a billing account!
Installation
$ npm install react-native-maps# --- or ---$ yarn add react-native-mapsIOS
After installing the npm package, we need to install the pod.
$ (cd ios && pod install)
# --- or ---
$ npx pod-install
How to enable google maps(IOS)
If you want to enable Google Maps on iOS, obtain the Google API key and edit your AppDelegate.m(m) as follow
Once you've set up the dependencies, you can import the MapView component from the react-native-maps package in your React Native code.
+ #import
@implementation AppDelegate
...
(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
+ [GMSServices provideAPIKey:@"_YOUR_API_KEY_"]; // add this line using the api key obtained from Google Console
...
The app's Info.plist file must contain a NSLocationWhenInUseUsageDescription with a user-facing purpose string explaining clearly and completely why your app needs the location, otherwise Apple will reject your app submission.
Android
Add your API key to your manifest file (android/app/src/main/AndroidManifest.xml):
AndroidManifest.xml
-------------------------------
<application>
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="Your Google maps API Key Here"/>
</application>
Rendering a Basic Map
To render a basic map in your React Native app, you can use the MapView component like any other React component. Here's an example:
.png)
The link provided, "https://mapstyle.withgoogle.com/", leads to the Google Maps Style Wizard, an interactive web-based tool offered by Google for customizing the appearance of Google Maps. Here's an explanation of how the tool works:
Interactive Interface: Upon opening the link, users are greeted with an interactive map canvas displaying a default Google Maps style. The interface is user-friendly, allowing users to navigate and explore the map.
Styling Controls: The left-hand side of the interface contains various styling controls, including options to adjust the color, visibility, and saturation of map elements such as land, water, roads, parks, and more. Users can click on individual map features to customize their appearance.
Preview: As users make changes to the styling controls, the map preview on the right-hand side of the interface updates in real-time to reflect the applied customizations. This allows users to see how their changes impact the overall appearance of the map.
Theme Selection: The tool also provides predefined map themes or styles, which users can select from a dropdown menu. These themes offer different visual styles, such as retro, high contrast, or grayscale, providing users with a quick way to apply a consistent look to their maps.
Export: Once users are satisfied with their customizations, they can export the generated map style as a JSON object. This JSON object contains all the styling rules and settings applied to the map, which can be used with the Google Maps JavaScript API or other platforms to apply the custom styles to their maps.
Usage: Developers can then integrate the exported map style JSON into their web or mobile applications, allowing them to create visually appealing and customized maps that align with their brand or application's design aesthetic.
How to change theme like this first of all go to the https://mapstyle.withgoogle.com and create your own theme for you project requirement then copy the json file and save your project directory below i will show you only dark theme
Create a mapStyle.ts file and below code and paste then call in the <Mapview> with customMapStyle attribute
export const dark: any = [
{
"elementType": "geometry",
"stylers": [
{
"color": "#212121"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#212121"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "administrative.land_parcel",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#181818"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#1b1b1b"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#2c2c2c"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#8a8a8a"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#373737"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#3c3c3c"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{
"color": "#4e4e4e"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "transit",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#3d3d3d"
}
]
}
];
Example
How to add marker and circle in react native maps
Adding Circles: Use the Circle component from react-native-maps to add circles to the map. Specify the center coordinates (latitude and longitude) and the radius of the circle in meters. Customize the circle's appearance using properties like fillColor, strokeColor, and strokeWidth.
Styling and Animation: Enhance the visual appeal of markers and circles by applying custom styles and animations. Use libraries like react-native-animatable or built-in animation functions provided by react-native-maps to add animations to markers and circles.
MapView Component: The <MapView> component is the main container for displaying the map. It accepts various props, including customMapStyle, which allows you to apply a custom map style. In this case, dark likely refers to a custom map style defined elsewhere in the codebase.
Markers: Inside the <MapView> component, there's a conditional rendering logic to map through an array of places and render a <Marker> component for each item in the array. Each <Marker> is positioned at the coordinates specified by the latitude and longitude properties of the location object within each item.
Circle: After mapping through the places array, there's a <Circle> component defined. This <Circle> component renders a circular overlay on the map. It's centered at the same coordinates as the corresponding marker, with the center prop set to the latitude and longitude coordinates. The radius prop specifies the radius of the circle in meters.
Circle Styling: The <Circle> component has strokeColor and fillColor props to define the appearance of the circle's outline and fill color, respectively. These colors are conditionally set based on the value of isLight, likely representing a light/dark mode toggle in the application.
Key Prop: Both <Marker> and <Circle> components have a key prop set to index. It's crucial to provide a unique key prop to each component when rendering lists to help React identify which items have changed, added, or removed.
Fragment: The <Fragment> component is used as a wrapper to group multiple JSX elements without adding an extra node to the DOM. It's a common pattern when you need to return multiple elements from a mapping operation or conditional rendering.
Overall, this code sets up a MapView with dynamic markers and circles rendered based on data from the places array, showcasing the integration of markers and circles in a React Native map component.
This is the final look of the react native maps last time i crated a project if any query for this topic please contact to bugblitz.dev@gmail.com
Tags:
React Native