0.3.7 • Published 17 days ago

dh-react-native-leaflet-ts v0.3.7

Weekly downloads
-
License
MIT
Repository
gitlab
Last release
17 days ago

React Native Leaflet TS

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

npm npm npm

Installation

Npm

npm install dh-react-native-leaflet-ts

Yarn

yarn add dh-react-native-leaflet-ts

Usage

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

Usage with props

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

Release log

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

ParameterTypeDefaultStatusDescription
mapLayersLayers[]Required1 or more layers is needed
zoomnumber0Optional
maxZoomnumberOptional
minZoomnumberOptional
flyTo{ latLng: number[], zoom number }OptionalFlies to a specific marker
startInLoadingStatebooleantrueOptionalMap starts in loading state
backgroundColorstringtransparentOptionalBackgroundColor of map
onMessagefunctionOptional(event: any) => void;
onErrorfunctionOptional(event: any) => void
onLoadStartfunctionOptionalWhen webview loads starts loading

mapLayers

ParameterTypeDefaultStatusDescription
namestringRequiredName of the map, mostly useful if multiple layers
srcstringRequiredSource of the map
tileOptionsTileOptionsOptional

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

ParameterTypeDefaultStatusDescription
tileSizenumber256OptionalWidth and height of the tails in the grid
opacitynumber1OptionalOpacity of the map
updateWhenIdlebooleanOptionalLoad new tiles only when panning ends
updateWhenZoomingbooleantrueOptionalZoom animation
updateIntervalnumber200OptionalTile update speed
zIndexnumber1OptionalzIndex of tile
bounds[number[]]Optional
noWrapbooleanfalseOptionalIf map should be repeated
panestringOptional
classNamestringOptional
keepBuffernumber2Optional
detectRetinabooleanfalseOptional
attributionstringOptionalWill add attribution in the bottom right corner

Markers

ParameterTypeDefaultStatusDescription
latLngnumber[]RequiredPosition of the marker on the map
iconstringOptionalexample: "src/assets/pin.png"
iconSize{ width: number, height: number}Optionalsize of icon
disabledbooleanfalseOptionalWeather it's clickable or not
titlestring""OptionalText in textbox after clicking on a marker

GeoJSON

ParameterTypeDefaultStatusDescription
typestringRequired
featuresGeoJsonFeatures[]Required

GeoJsonFeatures

ParameterTypeDefaultStatusDescription
typestringRequired
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 patrick@weapp.se.

react-nativeleafletreact-native-leafletRN-leafletmaptilesreactmapsopenstreetmaptypescriptreact-native-indoor-mapweapprn leafletwe app
bootstrap
0.3.7

17 days ago