Vietmap GL SDK for React Native¶
A React Native library for building maps with
the Vietmap GL Native SDK for iOS & Android.
Get started¶
Install package:
Using npm:
yarn:
Check the latest version at https://www.npmjs.com/package/@vietmap/vietmap-gl-react-native
Documentation¶
We've created a demo project for Vietmap React-Native GL library, which contains sample code for the main functions of the library here.
If you're using the Expo project, follow the guide from Expo install document or this github project.
Show the map¶
const SimpleMap = () => {
return (
<View style={styles.page}>
<View style={styles.container}>
<VietmapGL.MapView styleURL={`https://maps.vietmap.vn/api/maps/light/styles.json?apikey=${YOUR_API_KEY_HERE}`} style={{flex: 1}}>
<VietmapGL.Camera
zoomLevel={10}
followUserLocation={false}
centerCoordinate={[106.800106, 10.704619]}
/>
</VietmapGL.MapView>
</View>
</View>
);
};
VIETMAP now provides many types of custom maps
| Name | Description |
|---|---|
| Raster | The map data is typically stored as raster images, which are then divided into a grid of small tiles, each containing a specific portion of the map. |
| Raster url | https://maps.vietmap.vn/api/maps/raster/styles.json?apikey=YOUR_API_KEY_HERE |
| Vector | Vector tiles are small packages of vector data that can be downloaded and rendered on a client device, such as a web browser or mobile app. The vector data can include information such as street names, building footprints, and topographic features. |
| Vector url | https://maps.vietmap.vn/api/maps/light/styles.json?apikey=YOUR_API_KEY_HERE |
| Satellite | Satellite imagery consists of photographs of Earth or other planets made by means of artificial satellites. |
| Hybrid | Hybrid maps are a combination of satellite imagery overlaid with vector data that provides a visual reference for locations and features. |
Read more about Raster and Vector
Email us to get the Satellite and Hybrid map style URL.
Map Interactions¶
The VietmapGL Maps Flutter SDK allows you to define interactions that you can activate on the map to enable gestures and click events. The following interactions are supported
Zoom Controls¶
The map supports the familiar two-finger pinch and zooms to change the zoom level as well as double tap to zoom in. Set zoom to 4 for country-level display and 18 for house number display. In this SDK the camera position plays an important role
And following operations can be performed using the CameraPosition
Target¶
The target is a single latitude and longitude coordinate that the camera centers it on. Changing the camera's target will move the camera to the inputted coordinates. The target is a LatLng object. The target coordinate is always at the center of the viewport.
Tilt¶
Tilt is the camera's angle from the nadir (directly facing the Earth) and uses unit degrees. The camera's minimum (default) tilt is 0 degrees, and the maximum tilt is 60. Tilt levels use six decimal points of precision, which enables you to restrict/set/lock a map's bearing with extreme precision.
The map camera tilt can also adjust by placing two fingertips on the map and moving both fingers up and down in parallel at the same time or
Bearing¶
Bearing represents the direction that the camera is pointing in and is measured in degrees clockwise from north.
The camera's default bearing is 0 degrees (i.e. "true north") causing the map compass to hide until the camera bearing becomes a non-zero value. Bearing levels use six decimal point precision, which enables you to restrict/set/lock a map's bearing with extreme precision. In addition to programmatically adjusting the camera bearing, the user can place two fingertips on the map and rotate their fingers.
Zoom¶
Zoom controls the scale of the map and consumes any value between 0 and 22. At zoom level 0, the viewport shows continents and other world features. A middle value of 11 will show city-level details. At a higher zoom level, the map will begin to show buildings and points of interest. The camera can zoom in the following ways:
- Pinch motion two fingers to zoom in and out.
- Quickly tap twice on the map with a single finger to zoom in.
- Quickly tap twice on the map with a single finger and hold your finger down on the screen after the second tap.
- Then slide the finger up to zoom out and down to zoom out.
Move camera¶
SDK allows various methods to move, and animate the camera to a particular location : - Create new location variable in state
- Add the Camera to MapView <Vietmap.MapView
tintColor={'#000'}
styleURL={vietmapStyle}
style={styles.map}>
<Vietmap.Camera
zoomLevel={6}
animationMode={"easeTo"} // flyTo, moveTo, linearTo, easeTo
animationDuration={6000}
centerCoordinate={this.state.location}
/>
<Vietmap.UserLocation />
</Vietmap.MapView>
Map Events¶
Map Click¶
If you want to respond to a user tapping on a point on the map, you can use an onMapClick callback.
It sets a callback that's invoked when the user clicks on the map:
<VietmapGL.MapView
styleURL={vietmapStyleUrl}
style={{flex: 1}}
onPress={onPressFunctionHere}>
...
</VietmapGL.MapView>
Map Long Click¶
- Sets a callback that's invoked when the user long clicks on the map view.
On Map Rendered callback¶
- Sets a callback that's invoked when the map is completely rendered.
- Encourage this callback to call some action on the initial, after the map is completely loaded
Map Overlays¶
Add marker (Marked a point in the map)¶
<Vietmap.MapView
styleURL={vietmapStyle}
style={{flex: 1}}
onPress={handleOnMapClick}>
<Vietmap.Camera
zoomLevel={10}
followUserLocation={false}
centerCoordinate={[106.800106, 10.704619]}
/>
<Vietmap.ShapeSource
id="marker-source"
shape={{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [106.800106, 10.704619],
},
}}>
<Vietmap.SymbolLayer
id="marker-layer"
style={{
iconImage: vietmapLogo,
iconSize: 0.2,
}}
/>
</Vietmap.ShapeSource>
</Vietmap.MapView>
Add a Line/Polyline (A line connects 2 points on the map)¶
- Define a list of coordinates to draw the line
const geoJsonFeature = { type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: [ [106.708654, 1.760325], [107.708654, 1.760325], [107.308654, 2.760325], [108.708654, 3.660325], [108.508654, 3.760325], [109.208654, 4.560325], [109.708654, 4.760325], [110.508654, 5.760325], [110.308654, 5.760325], [111.408654, 6.760325], [111.708654, 6.960325], [112.508654, 7.760325], [112.908654, 7.760325], [113.708654, 8.160325], [113.7908654, 8.760325], [114.2708654, 9.760325], [114.08654, 9.360325], [115.408654, 10.760325], [115.708654, 10.760325], [116.708654, 11.260325], [116.308654, 11.760325], [117.508654, 12.260325], [117.708654, 12.760325], [118.408654, 13.860325], [118.108654, 13.760325], ], }, }; - Draw line to the map
<Vietmap.MapView styleURL={vietmapStyle} style={{flex: 1}}> <Vietmap.Camera zoomLevel={4} followUserLocation={false} centerCoordinate={[112.908654, 7.760325]} /> <Vietmap.ShapeSource id="route-source" shape={geoJsonFeature}> <Vietmap.LineLayer id="route-layer" style={{ lineColor: 'steelblue', lineWidth: 4, lineJoin: 'round', lineCap: 'round', }} /> </Vietmap.ShapeSource> </Vietmap.MapView>
Add a Fill/Polygon¶
<Vietmap.MapView styleURL={vietmapStyle} style={{flex: 1}}>
<Vietmap.Camera
zoomLevel={3}
followUserLocation={false}
centerCoordinate={[107.708654, 1.760325]}
/>
<Vietmap.ShapeSource id="route-source" shape={geoJsonFeature}>
<Vietmap.FillLayer id="fill-layer" />
</Vietmap.ShapeSource>
</Vietmap.MapView>
Find a route between 2 or more points¶
- We've created a package to support finding a route between 2 or more points and other features, you can find the vietmap-api package to use it.
Demo code here
Demo code for expo here
Contact for support
Vietmap API document here
Have a bug to report? Open an issue. If possible, include a full log and information that shows the issue. Have a feature request? Open an issue. Tell us what the feature should do and why you want the feature.