Skip to content
MapView Component that displays Maps from the tile server of your choice
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
marker-icons
MapView.js
Marker.js
README.md
lib.js

README.md

Easy React-Native Map-Component

react-native-simplemaps

THIS COMPONENT IS A DRAFT - IF YOU LIKE TO USE IT: PLEASE IMROVE IT

This Component does not use any native Code. It simply renders map tiles from a tile server onto a View.

You can pan the map via touch, zoom via buttons. No touch zoom supported yet.

You can set an array of markers that will be shown on the map and can be pressed.

Components

MapView

Example

<MapView
  ref={ch => { this.map = ch }}

  style={{flex:1}}

  markers={[
    {
      lat:marker.lat,
      lon:marker.lon,
      color:'red',    // use default icon
      data: marker_data
    },
    {
      lat:48.5643,
      lon:7.2114,
      icon: {
        source:require('./marker-icons/pointto.png'),
        width: 32,
        height: 32,
        pinX:16,
        pinY:16
      },
      data: marker2_data
    },
  ]}

  center={{ lat: 48.09237, lon:  7.96257, }}

  zoom={2}

  getTileUrl={(z,x,y)=>'http://b.tile.openstreetmap.de/tiles/osmde/'+ z + "/"+ x +"/"+ y + '.png'}

  onMarkerPress={this.onMarkerPress}

  onRegionChange={this.onRegionChange}

/>
You can’t perform that action at this time.