react-native-leaflet-ts-beta

React Native Leaflet TS

Please show your support by adding a star! :)

react-native-leaflet-ts is a library with Typescript support that let's you to render a Leaflet in a WebView.

NOTE! Library is new, this will be updated & more stuff will be added.

Installation

Npm

npm install react-native-leaflet-ts

Yarn

yarn add react-native-leaflet-ts

Usage

import Leaflet from 'react-native-leaflet-ts';

Usage with props

import Leaflet, { Markers, TileOptions } from 'react-native-leaflet-ts';

Release log

• [2022-12-01][v0.2.12] - Fixed webview dependency
• [2022-10-17][v0.2.9] - Added prop for detecting retina-screens
• [2022-10-17][v0.2.8] - Fixed loading issue for iOS
• [2022-10-11][v0.2.6] - Fixed support for Android
• [2022-10-06][v0.2.1] - Fixed path for custom icon.
• [2022-10-06][v0.2.0] - Minor changes to readme-file.
• [2022-10-04][v0.1.8] - Support for custom icons & increased performance.
• [2022-10-04][v0.1.7] - Added webview to peerDependencies.
• [2022-10-04][v0.1.6] - Added dependencies to peerDependencies to prevent useRef crash.

API Reference

Leaflet

Parameter	Type	Default	Status	Description
map	src: string, tileOptions: TileOptions		Required
zoom	number	0	Optional
maxZoom	number		Optional
minZoom	number		Optional
flyTo	{ latLng: number[], zoom number }		Optional	Flies to a specific marker
startInLoadingState	boolean	true	Optional	Map starts in loading state
backgroundColor	string	transparent	Optional	BackgroundColor of map
onMessage	function		Optional	(event: any) => void;
onError	function		Optional	(event: any) => void
onLoadStart	function		Optional	When webview loads starts loading

map

Parameter	Type	Default	Status	Description
src	string		Required	Source to "{z}/{x}/{-y}.png" tile url
options	TileOptions		Optional

TileOptions

https://leafletjs.com/reference.html#tilelayer

Parameter	Type	Default	Status	Description
tileSize	number	256	Optional	Width and height of the tails in the grid
opacity	number	1	Optional	Opacity of the map
updateWhenIdle	boolean		Optional	Load new tiles only when panning ends
updateWhenZooming	boolean	true	Optional	Zoom animation
updateInterval	number	200	Optional	Tile update speed
zIndex	number	1	Optional	zIndex of tile
bounds	[number[]]		Optional
noWrap	boolean	false	Optional	If map should be repeated
pane	string		Optional
className	string		Optional
keepBuffer	number	2	Optional
detectRetina	boolean	false	Optional

Markers

Parameter	Type	Default	Status	Description
latLng	number[]		Required	Position of the marker on the map
icon	string		Optional	example: "src/assets/pin.png"
iconSize	{ width: number, height: number}		Optional	size of icon
disabled	boolean	false	Optional	Weather it's clickable or not
title	string	""	Optional	Text in textbox after clicking on a marker

Examples

const markerList: Markers[] = [
  {
    latLng: [-38.31571580761326, -23.735463483398522],
    iconSize: {
      width: 25,
      height: 25,
    },
    icon: './src/assets/mapPin.png',
    title: 'Title 1',
    disabled: true,
  },
  {
    latLng: [-58.31571543253336, -43.535453281293517],
    iconSize: {
      width: 25,
      height: 25,
    },
    title: 'Title 2',
  },
];

<Leaflet
  map={{
    src: source,
    tileOptions: {
      noWrap: true,
    },
  }}
  minZoom={1}
  zoom={2}
  maxZoom={6}
  flyTo={{
    latLng: [-38.31571580761326, -23.735463483398522],
    zoom: 5,
  }}
  markers={markerList}
  backgroundColor="green"
/>

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Links

We App GitHub

Help / Info

If you need any of the other Leaflet properties just let me know and I'll add them in. Send me a mail at [e-mail].