docs: update readme with proper usage example section and Acknowledge…

…ment
weishenho · Mar 30, 2024 · 9127864 · 9127864
1 parent 5263cb0
commit 9127864
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -11,13 +11,61 @@ npm install react-native-leaflet-map
 ## Usage
 
 ```js
-import { LeafletMapView } from "react-native-leaflet-map";
+import LeafletMapView from 'react-native-leaflet-map';
 
 // ...
 
-<LeafletMapView color="tomato" />
+<View style={{ flex: 1 }}>
+  <LeafletMapView
+    mapLayers={[
+      {
+        baseLayer: true,
+        url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        attribution:
+          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        minNativeZoom: 11,
+        maxNativeZoom: 18,
+        minZoom: 11,
+        maxZoom: 20,
+        // bounds: ONEMAP_MAX_BOUNDS,
+      },
+    ]}
+    mapMarkers={[
+      {
+        id: 'location-marker',
+        icon: 'https://cdn-icons-png.flaticon.com/64/2776/2776067.png',
+        size: [64, 64],
+        iconAnchor: [32, 64],
+        position: {
+          lat: 1.305587412732045,
+          lng: 103.83318545292657,
+        },
+      },
+    ]}
+    onMessage={onLeafletMessageReceivedHandler}
+    mapCenterPosition={{ lat: 1.358479, lng: 103.815201 }}
+  />
+</View>;
 ```
 
+## Acknowledgement & References
+
+This project incorporates tailored integrations of functionalities sourced from various open-source repositories. The author extends sincere appreciation to the following repositories for their invaluable contributions. This project owes its success to their foundational support:
+
+[Leaflet js](https://leafletjs.com/)
+
+[react-leaflet](https://react-leaflet.js.org/)
+
+[Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster)
+
+[react-native-webview-leaflet](https://github.com/reggie3/react-native-webview-leaflet)
+
+[expo-leaflet](https://github.com/Dean177/expo-leaflet)
+
+[react-native-leaflet](https://github.com/pavel-corsaghin/react-native-leaflet)
+
+[react-leaflet-cluster](https://github.com/akursat/react-leaflet-cluster)
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -32,23 +32,24 @@ export default function App() {
         mapLayers={[
           {
             baseLayer: true,
-            url: 'https://www.onemap.gov.sg/maps/tiles/Default/{z}/{x}/{y}.png',
-            // attribution: attribution,
-            // bounds: ONEMAP_MAX_BOUNDS,
+            url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+            attribution:
+              '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
             minNativeZoom: 11,
             maxNativeZoom: 18,
             minZoom: 11,
             maxZoom: 20,
+            // bounds: ONEMAP_MAX_BOUNDS,
           },
         ]}
         mapMarkers={
           selectedLocation?.coordinate
             ? [
                 {
-                  id: 'selected-location-marker',
-                  icon: 'https://www.kindpng.com/picc/m/117-1171223_placeholder-map-marker-position-pinpoint-white-map-marker.png',
-                  size: [40, 55],
-                  iconAnchor: [20, 55],
+                  id: 'location-marker',
+                  icon: 'https://cdn-icons-png.flaticon.com/64/2776/2776067.png',
+                  size: [64, 64],
+                  iconAnchor: [32, 64],
                   position: selectedLocation?.coordinate,
                 },
               ]