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 [email protected].