0.1.5 • Published 11 months ago
react-native-azure-map v0.1.5
react-native-azure-maps
react native component for microsoft azure maps unofficial
Installation
npm install react-native-azure-mapUsage
import { AzureMap } from 'react-native-azure-map';
// ...
<AzureMap apiKey={} latitude={31.5} longitude={10} zoom={10} >
<AzureMarker position={} htmlIcon={}></AzureMarker>
</AzureMap>AzureMap Props
| Prop Name | Type | Required | Default | Description |
|---|---|---|---|---|
latitude | number | Yes | null | The longitude of the map's initial center. |
longitude | number | Yes | null | The latitude of the map's initial center. |
style | object | No | {} | The style object to customize the map container. |
onMapReady | func | No | null | Callback function that is called when the map has finished loading. |
apiKey | string | Yes | null | Azure Maps subscription key required for authenticating API requests. |
zoom | number | No | 7 | The initial zoom level of the map. |
mapStyleMode | string | No | grayscale | The visual style of the map. Can be one of: 'grayscale', 'road', 'satellite', 'night', etc. |
baseUri | string | No | null | The base URI for loading the Azure Maps JavaScript SDK. |
baseCssUri | string | No | null | The base URI for loading the Azure Maps CSS. |
children | node | No | null | Child components such as markers, which can be added to the map. |
AzureMarker Props
| Prop Name | Type | Required | Default | Description |
|---|---|---|---|---|
position | array | Yes | [0, 0] | The [latitude, longitude] array that defines the position of the marker. |
htmlIcon | string | Yes | null | The HTML content that will be displayed inside the marker. |
injectJavaScript | func | Yes | null | A function to inject JavaScript into the WebView to create the marker. |
draggable | boolean | No | false | Determines if the marker can be dragged. |
color | string | No | '#1A73AA' | The primary color of the marker. |
secondaryColor | string | No | 'white' | The secondary color of the marker (e.g., for borders or other elements). |
anchor | string | No | 'bottom' | Determines how the marker is anchored relative to its position. Can be one of 'center', 'left', 'right', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'. |
Example
<AzureMap apiKey={} latitude={31.5} longitude={10} zoom={10} >
</AzureMap>
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT