Skip to content
A Webview based Leaflet Component for React Native
Branch: master
Clone or download
Latest commit 2b867d7 Apr 22, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode features set Jun 17, 2018
__mocks__ initial commit May 28, 2018
__tests__ initial commit May 28, 2018
assets "publishing" Apr 19, 2019
build "publishing" Apr 19, 2019
web "publishing" Apr 9, 2019
.eslintrc.json "publishing" Apr 9, 2019
.gitignore with seperate layer control file Jul 20, 2018
.npmignore "publishing" Nov 4, 2018
.watchmanconfig initial commit May 28, 2018
Button.js initial commit May 28, 2018
DEPRECATED-.babelrc "publishing" Nov 3, 2018
LICENSE initial commit May 28, 2018
Modal_EmojiSelector.js does not consistently render map Jun 15, 2018 "publishing" Apr 19, 2019
WebViewLeaflet.js publishing Apr 18, 2019
app.json added use webkit in ios Apr 18, 2019
babel.config.js "publishing" Nov 3, 2018
base64jpg.js update webpack-dev-server Feb 16, 2019
expo-qr-code.png initial commit May 28, 2018
gulpfile.js added use webkit in ios Apr 18, 2019
index.js initial commit May 28, 2018
locations.js initial commit May 28, 2018
package.json "publishing" Apr 22, 2019
setupTests.js initial commit May 28, 2018
webpack.config.js "publishing" Jun 18, 2018
webpack.config.js-test "publishing" Jun 18, 2018
yarn-error.log publishing Apr 13, 2019
yarn.lock publishing Apr 18, 2019

React Native Webview Leaflet

A Leaflet map component with no native code for React Native applications

⚠️ This is version 4 of this library. It includes breaking changes from previous versions.

Difference Between Versions

Like version 2, version 3 builds on react-leaflet. The primary new feature is the ability to specify map tiles. See below for more details.

Why Use This Library

This component is useful if you want to display HTML elements on an interactive map. Since the elements are just HTML items, you can use SVG's, emojis, text, images, etc., and they can even be animated, updated, and changed as required.

Why Not Use This Library

You may not want to use this library if you'd rather use Google map tiles and data vice the tiles and map data from Open Street Maps.

npm npm npm npm



Install using npm or yarn like this:

npm install --save react-native-webview-leaflet


yarn add react-native-webview-leaflet


and import like so

import WebViewLeaflet from "react-native-webview-leaflet";

A typical example is shown below:

  ref={component => (this.webViewLeaflet = component)}
  // Optional: a callback that will be called when the map is loaded

  // Optional: the component that will receive map events}

  // Optional: the center of the displayed map

  // Optional: a list of markers that will be displayed on the map

  // Required: the map layers that will be displayed on the map. See below for a description of the map layers object

  // Optional: display a marker to be at a given location
    coords: this.state.currentLocation,
    icon: "❤️",
    size: [24, 24],
    animation: {
      name: "pulse",
      duration: ".5",
      delay: 0,
      interationCount: "infinite"

  // Optional (defaults to false): display a button that centers the map on the coordinates of ownPostionMarker. Requires that "ownPositionMarker" prop be set

  // Optional (defaults to false): cluster icons that are in the same area

After loading, the map expects to receive an array of map layer information objects. A sample object showing a MapBox tile layer is shown below.

    name: 'streets',  // the name of the layer, this will be seen in the layer selection control
    checked: 'true',  // if the layer is selected in the layer selection control
    type: 'TileLayer',  // the type of layer as shown at
    baseLayer: true,
    // url of tiles
    url: `{z}/{x}/{y}.png?access_token=${mapboxToken}`,
    // attribution string to be shown for this layer
      '&amp;copy <a href=&quot;;>OpenStreetMap</a> contributors'

The format of the object depends on the type of layer to be displayed, and corresponds to the Raster Layers in react-leaflet

NOTE: Image and VideoOverlay layers do not currently work.

Example objects are shown in the mockMapLayers.js file in this repository.

Communicating with the map

Listening for Events

This library supports map clicked, map marker clicked, and the map events that are exposed by Leaflet.

Map Clicked and Map Marker Clicked Events

To receive map clicked and on map marker clicked events, add the following functions to the component identified by the eventReceiver prop.

onMapClicked = ({ payload }) => {
  console.log(`Map Clicked: app received: ${payload.coords}`);
  this.showAlert("Map Clicked", `Coordinates = ${payload.coords}`);

onMapMarkerClicked = ({ payload }) => {
  console.log(`Marker Clicked: ${}`);
  this.showAlert("Marker Clicked", `Marker ID = ${}`);
Leaflet Map Events

To react to leaflet map events, you need to create functions in your component to handle them. These functions' names must be camelCased and prefixed by 'on'. For example, to listen for Leaflet's zoomlevelschange event, you will need to create a function called onZoomLevelsChange. These functions will receive the following object

  center, // center of the map
    bounds, // the bounds of the map
    zoom; // the zoom level of the map

Sending Events to the Map

The map can be be updated by sending messages from your component to the WebViewLeaflet component via its reference like so:

  zoom: 6,
  locations: this.state.locations, // an array of locations
  showAttributionControl: this.state.mapState.showAttributionControl, // a boolean controlling whether the map displays its attribution control
  showZoomControl: this.state.mapState.showZoomControl // a boolean controlling whether the map displays its zoom control

A react-leaflet component makes up the map that is rendered by WebViewLeaflet. This allows messages like the one above to be used to directly set values in the map's state.

Creating Map Markers

The map builds and displays its markers based on the value of the locations key in its own state. You can update the value of it's locations by sending a message containing an object that contains a key of locations and a value that is an array of location objects like the one shown below. An example of such a call and a location object is show below.

// sending locations to the map
  locations: [...this.state.locations]
// a location object
  id: uuidV1(), // The ID attached to the marker. It will be returned when onMarkerClicked is called
  coords: [LATITUDE, LONGITUDE], // Latitude and Longitude of the marker
  icon: '🍇', // HTML element that will be displayed as the marker.  It can also be text or an SVG string.

  // The child object, "animation", controls the optional animation that will be attached to the marker.
  // See below for a list of available animations
  animation: {
    name: animations[Math.floor(Math.random() * animations.length)],
    duration: Math.floor(Math.random() _ 3) + 1,
    delay: Math.floor(Math.random()) _ 0.5,
  // optional size for this individual icon
  // will default to the WebViewLeaflet `defaultIconSize` property if not provided
  size: [64, 64],

Available Animations

Animations for "bounce", "fade", "pulse", "jump", "waggle", "spin", and "beat" can be specified in the property of an individual location.

Animation Information

Animations are kept in the file markers.css They are just keyframe animations like this:

@keyframes spin {
  50% {
    transform: rotateZ(-20deg);
    animation-timing-function: ease;
  100% {
    transform: rotateZ(360deg);
## Changelog

### 4.3.1

* Fixed issue with using expo-asset-utils that prevented this package from working with iOS apps in simulator

### 4.2.0

* Replace Expo dependency with expo-asset-utils
* Fixed bug that caused map to not display when no ownPositionMarker was provided

### 4.1.15

* Keep own position marker from being clustered

### 4.1.0

* Added optional marker clustering using react-leaflet-markercluster
* Update preview video in readme

### 4.0.0

* Fixed map centering, and map centering button (see issue #36( )
* Center map on own current location button defaults to not being shown
* Center map on own current location button requires that a "ownPositionMarker" object be passed to the WebViewLeaflet component
* WebViewLeaflet component requires a "centerPosition" prop for initial centering
* Map tile Layers are now passed as props to the WebViewLeaflet component

### 3.1.45

* Works in production APK files.
* Renders http images as map icons.

### 3.0.0

* Introduced user specified tile layers.

### 2.0.0

* Initial release of version 2 built on React-Leaflet


You can’t perform that action at this time.