react-native-leaflet-map

A React Native component that provides Leaflet MapView using the WebView

Installation

npm install react-native-leaflet-map

Usage

import LeafletMapView from 'react-native-leaflet-map';

// ...

<View style={{ flex: 1 }}>
  <LeafletMapView
    mapLayers={[
      {
        baseLayer: true,
        url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        minNativeZoom: 11,
        maxNativeZoom: 18,
        minZoom: 11,
        maxZoom: 20,
      },
    ]}
    mapMarkers={[
      {
        id: 'location-marker',
        icon: 'https://cdn-icons-png.flaticon.com/64/2776/2776067.png',
        size: [64, 64],
        iconAnchor: [32, 64],
        position: {
          lat: 1.305587412732045,
          lng: 103.83318545292657,
        },
      },
    ]}
    onMessage={onLeafletMessageReceivedHandler}
    mapCenterPosition={{ lat: 1.358479, lng: 103.815201 }}
  />
</View>;

Props

| property | required | type | purpose | | ----------------- | -------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | mapLayers | optional | MapLayer array | An array of map layers *** Current only suppport 1 layer | | mapMarkers | optional | MapMarker array | An array of map markers | | mapCenterPosition | optional | {lat: [Lat], lng: [Lng]} object | The center position of the map. This coordinate will not be accurate if the map has been moved manually. However, calling the map's setMapCenterPosition function will cause the map to revert to this location | | onMessageReceived | required | function | This function receives messages in the form of a WebviewLeafletMessage object from the map | | zoom | optional | number | Desired zoom int value of the map. Typically (1 to 22) |

Map Layer

mapLayer Prop Type

type MapLayer = {
  url?: string;
  baseLayer?: boolean;
  baseLayerIsChecked?: boolean;
  baseLayerName?: string;
  bounds?: LatLngBoundsLiteral;
  id?: string;
  opacity?: number;
  pane?: string;
  subLayer?: string;
  zIndex?: number;
}

Example with OpenStreetMap

{
  "baseLayer": true,
  "url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
  "minNativeZoom": 11,
  "maxNativeZoom": 18,
  "minZoom": 11,
  "maxZoom": 20
}

Screenshot

Example with Singapore's OneMap

{
  "baseLayer": true,
  "url": "https://www.onemap.gov.sg/maps/tiles/Default/{z}/{x}/{y}.png",
  "minNativeZoom": 11,
  "maxNativeZoom": 18,
  "minZoom": 11,
  "maxZoom": 20
}

Screenshot

Map Markers & Marker Cluster

For regular Map Markers without clustering, simply use the mapMarkers prop

mapClustermarkers Prop Type

type MapClusterMarkers = {
  mapMarkers: Array<MapMarker>;
  maxClusterRadius?: number;
  clusterIcon: string;
  clusterIconAnchor?: PointTuple;
  clusterIconSize?: PointTuple;
  clusterCountStyle?: {
    backgroundColor?: string; // Default: #880123
    color?: string; // text color Default: #FFF
    topPos?: number; // Absolute top position Default: -5
    rightPos?: number; // Absolute right position Default: -5
    width?: number; // Default: 20
    height?: number; // Default: 20
    borderRadius?: number; // Default: 9999
  };
};

MapMarker Type

type MapMarker = {
  icon: string;
  iconAnchor?: PointTuple;
  id: string;
  position: LatLngLiteral;
  size?: PointTuple;
  zIndexOffset?: number;
  popup?: {
    id: string;
    content: string;
    offset?: PointExpression;
    className?: string;
    defaultOpen?: boolean;
  };
};

Example Usage

mapClusterMarkers={{
  mapMarkers: hawkersJSON.SrchResults.map((data) => {
    const [lat, lng] = data.LatLng.split(',').map((d) => Number(d));
    return {
      id: data.LatLng,
      icon: 'https://cdn-icons-png.flaticon.com/128/5193/5193665.png',
      size: [40, 40],
      iconAnchor: [20, 40],
      position: {
        lat: lat,
        lng: lng,
      },
    } as MapMarker;
  }),
  maxClusterRadius: 100,
  clusterIcon:
    'https://cdn-icons-png.flaticon.com/128/5193/5193665.png',
  clusterIconSize: [40, 40],
  clusterIconAnchor: [40 / 2, 40],
  clusterCountStyle: {
    borderRadius: 3,
    backgroundColor: '#001f55',
  },
}}

Demo Video

Acknowledgement & References

This project incorporates tailored integrations of functionalities sourced from various open-source repositories. The author extends sincere appreciation to the following repositories for their invaluable contributions. This project owes its success to their foundational support:

Leaflet js

react-leaflet

Leaflet.markercluster

react-native-webview-leaflet

expo-leaflet

react-native-leaflet

react-leaflet-cluster

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library