React Native Webview Leaflet
A Leaflet map component with no native code for React Native applications.
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 know 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.
Installation
Install using npm or yarn like this:
or
Usage
and import like so
Add the following component to your code.
Additionally, for Version 3, you must handle the map's onLoad event manually as shown below in order pass the map layers to the map:
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.
The format of the object depends on the type of layer to be displayed, and corresponds to the Raster Layers in react-leaflet
https://react-leaflet.js.org/docs/en/components.html#raster-layers
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 that contains the WebViewLeaflet.
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 the zoomlevelschange
event, you will need to create a function
called onZoomLevelsChange
. These functions will receive the following object
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:
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 containing 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.
Available Animations
Animations for "bounce", "fade", "pulse", "jump", "waggle", "spin", and "beat" can be specified in the animation.name property of an individual location.
Animation Information
Animations are kept in the file markers.css They are just keyframe animations like this:
Working with Tile Layers
In Version 3 you must set the map