React-native-leaflet-ts-beta NPM

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 - Fixed webview dependency
2022-10-17 - Added prop for detecting retina-screens
2022-10-17 - Fixed loading issue for iOS
2022-10-11 - Fixed support for Android
2022-10-06 - Fixed path for custom icon.
2022-10-06 - Minor changes to readme-file.
2022-10-04 - Support for custom icons & increased performance.
2022-10-04 - Added webview to peerDependencies.
2022-10-04 - 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"
/>