Skip to main content

Show Map Local Style

Customize ornaments of the map(logo, compass, scalebar, attribution)

import { useEffect } from 'react';
import { Alert } from 'react-native';
import Mapbox from '@rnmapbox/maps';

import sheet from '../../styles/sheet';
import { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc

const style = JSON.stringify(require('../../assets/map-styleURL-style.json'));

const ShowMap = () => {
useEffect(() => {
Mapbox.locationManager.start();

return (): void => {
Mapbox.locationManager.stop();
};
}, []);

const onUserMarkerPress = (): void => {
Alert.alert('You pressed on the user location annotation');
};

return (
<Mapbox.MapView styleURL={style} style={sheet.matchParent}>
<Mapbox.Camera followZoomLevel={3} followUserLocation />

<Mapbox.UserLocation onPress={onUserMarkerPress} />
</Mapbox.MapView>
);
};

export default ShowMap;


ShowMapLocalStyle.png}