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.

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

• [2024-03-16] [v0.3.4] - Fixed example
• [2024-03-16] [v0.3.3] - Added example of ref
• [2024-03-16] [v0.3.2] - Fixed export of type
• [2024-03-16][v0.3.1] - Added attribution, added ref to programmically clear markers & trigger flyTo.
• [2023-02-16][v0.2.18] - Fixed map for Android
• [2023-02-15][v0.2.16] - Added multiple layers & geoJSON
• [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.

Ref usages

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

const App = () => {
  const leafletRef = useRef<RNLeafletRef>(null);

  return (
    <SafeAreaView style={{ backgroundColor: 'gray', flex: 1 }}>
      <Leaflet
        ref={leafletRef}
        mapLayers={[
          {
            name: 'mapoverview',
            src,
            tileOptions: {
              attribution: 'hello! this is the attribution',
            },
          },
        ]}
        markers={[
          {
            latLng: [0, 0, -20],
            disabled: false,
            title: 'test',
            icon: 'https://link-to-image.com/image/4389219412.png',
          },
        ]}
      />

      <Button
        onPress={() =>
          leafletRef.current?.flyTo({ latLng: [0, 0, -20], zoom: 5 })
        }
        title="flyto" />

      <Button
        onPress={() => leafletRef.current?.clearMarkers()}
        title="clear markers" />
    </SafeAreaView>
  );
}

API Reference

Leaflet

Parameter	Type	Default	Status	Description
mapLayers	Layers[]		Required	1 or more layers is needed
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

mapLayers

Parameter	Type	Default	Status	Description
name	string		Required	Name of the map, mostly useful if multiple layers
src	string		Required	Source of the map
tileOptions	TileOptions		Optional

Example usage:

const options: TileOptions = {
  noWrap: true,
  detectRetina: true,
  attribution: 'hello!',
};

const mapLayers: Layers[] = [
  {
    name: 'Floor 1',
    src: 'https://cdn.myIndoorMap.com/maps/0faebe50-19e5-4445-9177-a09903973304/rev0/{z}/{x}/{-y}.png',
    tileOptions: options,
  },
  {
    name: 'Floor 2',
    src: 'https://cdn.myIndoorMap.com/maps/71b328d0-d85a-43a9-87ca-bf7c145d145b/rev0/{z}/{x}/{-y}.png',
    tileOptions: options,
  },
];

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
attribution	string		Optional	Will add attribution in the bottom right corner

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

GeoJSON

Parameter	Type	Default	Status	Description
type	string		Required
features	GeoJsonFeatures[]		Required

GeoJsonFeatures

Parameter	Type	Default	Status	Description
type	string		Required
geometry	{ type: string, coordinates: any[] }		Required
properties	{ name: string }		Optional

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',
  },
];

const options: TileOptions = {
  noWrap: true,
  detectRetina: true,
};

const mapLayers: Layers[] = [
  {
    name: 'Floor 1',
    src: 'https://cdn.myIndoorMap.com/maps/0faebe50-19e5-4445-9177-a09903973304/rev0/{z}/{x}/{-y}.png',
    tileOptions: options,
  },
  {
    name: 'Floor 2',
    src: 'https://cdn.myIndoorMap.com/maps/71b328d0-d85a-43a9-87ca-bf7c145d145b/rev0/{z}/{x}/{-y}.png',
    tileOptions: options,
  },
];

<Leaflet
  mapLayers={mapLayers}
  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].