fix: 2

aroshanzamir · Jan 30, 2023 · eb204a7 · eb204a7
1 parent c1a6013
commit eb204a7
Show file tree

Hide file tree

Showing 13 changed files with 951 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 # react-native-osmdroid [![npm version](https://img.shields.io/npm/v/@splicer97/react-native-osmdroid.svg?style=flat)](https://www.npmjs.com/package/@splicer97/react-native-osmdroid) [![Downloads](https://img.shields.io/npm/dm/@splicer97/react-native-osmdroid.svg)](http://www.npmtrends.com/@splicer97/react-native-osmdroid)
 
-This is unofficial React Native wrapper for osmdroid maps
+React Native Open Street Maps components for Android
+This is unofficial React Native wrapper for Osmdroid SDK
 
 ## Installation
 
@@ -51,14 +52,40 @@ osmdroid requires the following dangerous permissions:
 WRITE_EXTERNAL_STORAGE and ACCESS_COARSE_LOCATION/ACCESS_FINE_LOCATION.
 See [OpenStreetMapViewer's implementation](https://github.com/osmdroid/osmdroid/blob/master/OpenStreetMapViewer/src/main/java/org/osmdroid/MainActivity.java#L83) or [Google Documentation on Permissions](https://developer.android.com/training/permissions/requesting)
 
+## Component API
+
+[`<MapView />` Component API](docs/mapview.md)
+
+[`<Marker />` Component API](docs/marker.md)
+
+[`<Callout />` Component API](docs/callout.md)
+
+[`<Polygon />` Component API](docs/polygon.md)
+
+[`<Polyline />` Component API](docs/polyline.md)
+
+[`<Circle />` Component API](docs/circle.md)
+
+[`<Overlay />` Component API](docs/overlay.md)
+
+[`<Heatmap />` Component API](docs/heatmap.md)
+
+[`<Geojson />` Component API](docs/geojson.md)
+
 ## Usage
 
 ```js
-import { OsmdroidView } from 'react-native-osmdroid';
+import MapView from '@splicer97/react-native-osmdroid';
 
 // ...
-
-<OsmdroidView color="tomato" />;
+<MapView
+  initialRegion={{
+    latitude: 37.78825,
+    longitude: -122.4324,
+    latitudeDelta: 0.0922,
+    longitudeDelta: 0.0421,
+  }}
+/>;
 ```
 
 ## Contributing

diff --git a/docs/callout.md b/docs/callout.md
@@ -0,0 +1,38 @@
+# `<Callout />` Component API
+
+## Props
+
+| Prop | Type | Default | Note |
+|---|---|---|---|
+| `tooltip` | `Boolean` | `false` | If `false`, a default "tooltip" bubble window will be drawn around this callouts children. If `true`, the child views can fully customize their appearance, including any "bubble" like styles. 
+| `alphaHitTest` | `Boolean` | `false` | If `true`, clicks on transparent areas in callout will be passed to map. **Note**: iOS only.
+
+## Events
+
+| Event Name | Returns | Notes
+|---|---|---|
+| `onPress` |  | Callback that is called when the user presses on the callout
+
+
+
+---
+
+
+
+# `<CalloutSubview />` Component API
+
+**Note**: Supported on iOS only.
+Use to handle press on specific subview of callout.
+Put this component inside `<Callout />`.
+
+## Events
+
+| Event Name | Returns | Notes
+|---|---|---|
+| `onPress` |  | Callback that is called when the user presses on this subview inside callout
+
+## Notes
+Native press event has property `action`, which is:
+- `callout-press` (or `marker-overlay-press` for GoogleMaps on iOS) for press on `<Callout />`
+- `callout-inside-press` (or `marker-inside-overlay-press` for GoogleMaps on iOS) for press on `<CalloutSubview />`
+
diff --git a/docs/circle.md b/docs/circle.md
@@ -0,0 +1,28 @@
+# `<Circle />` Component API
+
+## Props
+
+| Prop | Type | Default | Note |
+|---|---|---|---|
+| `center` | `LatLng` | (Required) | The coordinate of the center of the circle
+| `radius` | `Number` | (Required) | The radius of the circle to be drawn (in meters)
+| `strokeWidth` | `Number` | `1` | The stroke width to use for the path.
+| `strokeColor` | `String` | `#000`, `rgba(r,g,b,0.5)` | The stroke color to use for the path.
+| `fillColor` | `String` | `#000`, `rgba(r,g,b,0.5)` | The fill color to use for the path.
+| `zIndex` | `Number` | 0 | The order in which this tile overlay is drawn with respect to other overlays. An overlay with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays with the same z-index is arbitrary. The default zIndex is 0. (Android Only)
+| `lineCap` | `String` | `round` | The line cap style to apply to the open ends of the path. Other values : `butt`, `square`
+| `lineJoin` | `String` |  | The line join style to apply to corners of the path. possible value: `miter`, `round`, `bevel`
+| `miterLimit` | `Number` |  | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees.
+| `geodesic` | `Boolean` |  | Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection. A geodesic is the shortest path between two points on the Earth's surface. The geodesic curve is constructed assuming the Earth is a sphere.
+| `lineDashPhase` | `Number` | `0` | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap.
+| `lineDashPattern` | `Array<Number>` | `null` | (iOS only) An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the  line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on.
+
+
+## Types
+
+```
+type LatLng {
+  latitude: Number,
+  longitude: Number,
+}
+```
diff --git a/docs/examples-setup.md b/docs/examples-setup.md
@@ -0,0 +1,8 @@
+# Examples Setup
+
+* Clone or download the repository.
+* From the root of the project run `yarn bootstrap`
+* `cd example`
+* `yarn android` or `yarn ios`
+
+**Please note that if you are trying out Android or using Google Maps on iOS, it's very likely that you will have to add your own API key for Google Maps to work. Check out the [Installation Instructions](./installation.md) to see how this is done, and make sure to run `yarn bootstrap` again after adding your personal API key.**
diff --git a/docs/geojson.md b/docs/geojson.md
@@ -0,0 +1,53 @@
+# `<Geojson />` Component API
+
+## Props
+
+| Prop      | Type | Default                                                | Note |
+| --------- | ---- | ------------------------------------------------------ | ---- |
+| `geojson` |  `GeoJSON`    |  | [Geojson](https://geojson.org/) description of object. |
+| `strokeColor` | `String`     | `stroke` property in GeoJson if present else `#000` | The stroke color to use for polygons and polylines.  |
+| `fillColor` | `String`     | `fill` property in GeoJson | The fill color to use for polygons. |
+| `strokeWidth` | `Number`     | `stroke-width` property in Geojson if present else `1` | The stroke width to use for polygons and polylines. |
+| `color` | `String`     | `marker-color` property in GeoJson | The color to use for points.  |
+| `lineDashPhase` | `Number`     |  |  (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap. |
+| `lineDashPattern` | `Array<Number>`     |  | An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the  line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on. |
+| `lineCap` |  `'butt' | 'round' | 'square'`     |  |  The line cap style to apply to the open ends of the path. Possible values are `butt`, `round` or `square`.  Note: lineCap is not yet supported for GoogleMaps provider on iOS. |
+| `lineJoin` | `'miter'| 'round' | 'bevel'`     |  |  The line join style to apply to corners of the path. Possible values are `miter`, `round` or `bevel`. |
+| `miterLimit` | `Number`     |  | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees. |
+| `zIndex` | `Number`     |  | Layer level of the z-index value |
+| `onPress` | `Function`     |  | returns the selected overlay value with the onPress functionality |
+| `markerComponent` | `React Node`     |  | Component to render in place of the default marker when the overlay type is a `point` 
+| `title` | `string`     |  | The title of the marker. This is only used if the <Marker /> component has no children that  are a `<Callout />` 
+| `tracksViewChanges` | `Boolean` | true | Sets whether this marker should track view changes. It's recommended to turn it off whenever it's possible to improve custom marker performance. This is the default value for all point markers in your geojson data. It can be overriden on a per point basis by adding a `trackViewChanges` property to the `properties` object on the point.
+
+## Example
+
+```
+import React from 'react';
+import MapView, {Geojson} from 'react-native-maps';
+
+const myPlace = {
+  type: 'FeatureCollection',
+  features: [
+    {
+      type: 'Feature',
+      properties: {},
+      geometry: {
+        type: 'Point',
+        coordinates: [64.165329, 48.844287],
+      }
+    }
+  ]
+};
+
+const Map = props => (
+  <MapView>
+    <Geojson 
+      geojson={myPlace} 
+      strokeColor="red"
+      fillColor="green"
+      strokeWidth={2}
+    />
+  </MapView>
+);
+```
diff --git a/docs/heatmap.md b/docs/heatmap.md
@@ -0,0 +1,34 @@
+# `<Heatmap />` Component API
+
+**Note**: Supported on Google Maps only.
+
+## Props
+
+| Prop | Type | Default | Note |
+|---|---|---|---|
+| `points` | `Array<WeightedLatLng>` |  | Array of heatmap entries to apply towards density.
+| `radius` | `Number` | `20` | The radius of the heatmap points in pixels, between 10 and 50.
+| `opacity` | `Number` | `0.7` | The opacity of the heatmap.
+| `gradient` | `Object` |  | Heatmap gradient configuration (See below for *Gradient Config*).
+
+
+## Gradient Config
+
+[Android Doc](https://developers.google.com/maps/documentation/android-sdk/utility/heatmap#custom) | [iOS Doc](https://developers.google.com/maps/documentation/ios-sdk/utility/heatmap#customize)
+
+| Prop | Type | Default | Note |
+|---|---|---|---|
+| `colors` | `Array<String>` |  | Colors (one or more) to use for gradient.
+| `startPoints` | `Array<Number>` |  | Array of floating point values from 0 to 1 representing where each color starts. Array length must be equal to `colors` array length.
+| `colorMapSize` | `Number` | `256` | Resolution of color map -- number corresponding to the number of steps colors are interpolated into.
+
+
+## Types
+
+```
+type WeightedLatLng = {
+  latitude: Number;
+  longitude: Number;
+  weight?: Number;
+}
+```