Skip to content

Commit 1510e6b

Browse files
pavel-corsaghinpavel-corsaghin
authored
Merge pull request #63 from CarlosSTS/feat/hide-map-controls
Feat/hide map controls
2 parents f5b27fc + 9b7707f commit 1510e6b

File tree

3 files changed

+43
-23
lines changed

3 files changed

+43
-23
lines changed

‎README.md‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ yarn add react-native-leaflet-view
2525
```
2626

2727
## react-native configuration
28-
29-
Before installing `react-native-leaflet-view`, you need to install [react-native-webview](https://github.com/react-native-webview/react-native-webview), which is a core dependency for this package to work. You can install it using yarn or npm:
28+
This package is required for proper file handling and WebView functionality in React Native:
29+
- [react-native-webview](https://github.com/react-native-webview/react-native-webview). You can install it using yarn or npm:
3030

3131
```sh
3232
npm install --save react-native-webview
@@ -42,20 +42,16 @@ yarn add react-native-webview
4242

4343
For Expo projects, you'll need to add additional dependencies:
4444

45-
### Step one
46-
4745
```sh
48-
expo install react-native-webview expo-asset expo-file-system
46+
npx expo install react-native-webview expo-asset expo-file-system
4947
```
5048

5149
These packages are required for proper file handling and WebView functionality in Expo:
5250
- [react-native-webview docs](https://docs.expo.dev/versions/latest/sdk/webview/)
5351
- [expo-asset docs](https://docs.expo.dev/versions/latest/sdk/asset/)
5452
- [expo-file-system docs](https://docs.expo.dev/versions/latest/sdk/filesystem/)
5553

56-
### Step two
57-
58-
Copy the required HTML file from the package with this one-liner:
54+
You need to do this in the root of your project: Copy the required HTML file from the package with this one-liner
5955

6056
```sh
6157
cp node_modules/react-native-leaflet-view/android/src/main/assets/leaflet.html assets
@@ -148,21 +144,23 @@ export default App;
148144

149145
## Props
150146

151-
| property | required | type | purpose |
152-
| ------------------- | -------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
153-
| loadingIndicator | optional | React.ReactElement | custom component displayed while the map is loading |
154-
| onError | optional | function | Will receive an error event |
155-
| onLoadEnd | optional | function | Called when map stops loading |
156-
| onLoadStart | optional | function | Called when the map starts to load |
157-
| onMessageReceived | required | function | This function receives messages in the form of a WebviewLeafletMessage object from the map |
158-
| mapLayers | optional | MapLayer array | An array of map layers |
159-
| mapMarkers | optional | MapMarker array | An array of map markers |
160-
| mapShapes | optional | MapShape[] | An array of map shapes |
147+
| property | required | type | purpose |
148+
| ------------------- | -------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
149+
| loadingIndicator | optional | React.ReactElement | custom component displayed while the map is loading |
150+
| onError | optional | function | Will receive an error event |
151+
| onLoadEnd | optional | function | Called when map stops loading |
152+
| onLoadStart | optional | function | Called when the map starts to load |
153+
| onMessageReceived | required | function | This function receives messages in the form of a WebviewLeafletMessage object from the map |
154+
| mapLayers | optional | MapLayer array | An array of map layers |
155+
| mapMarkers | optional | MapMarker array | An array of map markers |
156+
| mapShapes | optional | MapShape[] | An array of map shapes |
161157
| mapCenterPosition | optional | {lat: [Lat], lng: [Lng]} object | The center position of the map. This coordinate will not be accurate if the map has been moved manually. However, calling the map's setMapCenterPosition function will cause the map to revert to this location |
162-
| ownPositionMarker | optional | Marker | A special marker that has an ID of OWN_POSTION_MARKER_ID |
163-
| zoom | optional | number | Desired zoom value of the map |
164-
| doDebug | optional | boolean | A flag for debug message logging |
165-
| source | optional | WebView["source"] | Loads static html or a uri (with optional headers) in the WebView. |
158+
| ownPositionMarker | optional | Marker | A special marker that has an ID of OWN_POSTION_MARKER_ID |
159+
| zoom | optional | number | Desired zoom value of the map |
160+
| doDebug | optional | boolean | A flag for debug message logging |
161+
| source | optional | WebView["source"] | Loads static html or a uri (with optional headers) in the WebView. |
162+
| zoomControl | optional | boolean | Controls the visibility of the zoom controls on the map. |
163+
| attributionControl | optional | boolean | Controls the visibility of the attribution control on the map. |
166164

167165
## Contributing
168166

‎android/src/main/assets/leaflet.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/LeafletView/index.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ export type LeafletViewProps = {
5252
webviewStyle?: WebViewProps;
5353
injectedJavaScript?: string;
5454
source?: WebViewProps['source'];
55+
zoomControl?: boolean;
56+
attributionControl?: boolean;
5557
};
5658

5759
const LeafletView: React.FC<LeafletViewProps> = ({
@@ -71,6 +73,8 @@ const LeafletView: React.FC<LeafletViewProps> = ({
7173
webviewStyle,
7274
injectedJavaScript,
7375
source,
76+
zoomControl = true,
77+
attributionControl = true,
7478
}) => {
7579
const webViewRef = useRef<WebView>(null);
7680
const [initialized, setInitialized] = useState(false);
@@ -118,6 +122,24 @@ const LeafletView: React.FC<LeafletViewProps> = ({
118122
}
119123
startupMessage.zoom = zoom;
120124

125+
if (!zoomControl) {
126+
const hideZoomControlsJS = `
127+
document.querySelectorAll('.leaflet-bar a').forEach(element => {
128+
element.style.display = 'none';
129+
});
130+
`;
131+
webViewRef.current?.injectJavaScript(hideZoomControlsJS);
132+
}
133+
134+
if (!attributionControl) {
135+
const hideAttributionControlsJS = `
136+
document.querySelectorAll('.leaflet-control-attribution').forEach(element => {
137+
element.style.display = 'none';
138+
});
139+
`;
140+
webViewRef.current?.injectJavaScript(hideAttributionControlsJS);
141+
}
142+
121143
sendMessage(startupMessage);
122144
setInitialized(true);
123145
logMessage('sending initial message');

0 commit comments

Comments
 (0)