@dazik/react-native-static-map

react-native-static-map

React Native wrapper for Google Maps Static API

Installation

npm install @dazik/react-native-static-map

yarn add @dazik/react-native-static-map

Example

Simple map

import GoogleStaticMap from "@dazik/react-native-static-map";

const styles = StyleSheet.create({
  map: {
    width: 300,
    height: 200,
  },
});


<GoogleStaticMap
  center={{
    latitude: 13.061,
    longitude: 54.177
  }}
  style={styles.map}
  zoom={10}
  size={{
    width: 300,
    height: 200
  }}
  apiKey="API_KEY"
/>

Map with markers

<GoogleStaticMap
  size={{
    height: 300,
    width: 200
  }}
  style={styles.map}
  apiKey="API_KEY"
  markers={[
    {
      scale: 2,
      locations: [
        {
          latitude: 51.5048,
          longitude: -0.0917
        }
      ],
      icon: 'https://goo.gl/5y3S82'
    }, {
      locations: ['London bridge'],
      label: 'B',
      color: 'orange'
    }
  ]}
/>

Map with custom style

<GoogleStaticMap
  size={{
    height: 300,
    width: 200
  }}
  style={styles.map}
  apiKey="API_KEY"
  zoom={15}
  center="Brooklyn"
  mapStyles={[
    {
      feature: 'road.local',
      element: 'geometry',
      color: '0x00ff00'
    },
    {
      feature: 'landscape',
      element: 'geometry.fill',
      color: '0x000000'
    },
    {
      element: 'labels',
      invert_lightness: true
    },
    {
      feature: 'road.arterial',
      element: 'labels',
      invert_lightness: false
    }
  ]}
/>

Map with paths

<GoogleStaticMap
    size={{
      height: 300,
      width: 200
    }}
    apiKey="API_KEY"
    style={styles.map}
    paths={[
      {
        color: '0x0000ff',
        weight: 5,
        points: [
          {
            latitude: 40.737102,
            longitude: -73.990318,
          },
          {
            latitude: 40.749825,
            longitude: -73.987963,
          },
          {
            latitude: 40.752946,
            longitude: -73.987384,
          },
        ],
      },
      {
        color: '0x00000000',
        weight: 5,
        fillcolor: '0xFFFF0033',
        points: [
          '8th Avenue & 34th St,New York,NY',
          '8th Avenue & 42nd St,New+York,NY',
          'Park Ave & 42nd St,New York,NY,NY',
          'Park Ave & 34th St,New York,NY,NY',
        ],
      },
    ]}
/>

Props

Accepts all props from Image except for source.

Prop	Required	Description
apiKey	yes	defines API key used to authenticate requests associated with your project. More details got to get the API key
signature	no	defines digital signature used to verify that any site generating requests using your API key is authorized to do so
center	yes if neither markers nor paths are present	defines the center of the map, equidistant from all edges of the map. This parameter takes a location as either an object {latitude: number, longitude: number} or a string address (e.g. city hall, new york, ny) identifying a unique location on the face of the earth
zoom	yes if neither markers nor paths are present	defines the zoom level of the map, which determines the magnification level of the map. This parameter takes a numerical value corresponding to the zoom level of the region desired
size	yes	defines the rectangular dimensions of the map image. This parameter takes {width: number, height: number} as argument. This parameter is affected by the scale parameter; the final output size is the product of the size and scale values.
scale	no	affects the number of pixels that are returned. scale=2 returns twice as many pixels as scale=1 while retaining the same coverage area and level of detail (i.e. the contents of the map don't change). This is useful when developing for high-resolution displays. The default value is 1. Accepted values are 1 and 2.
format	no	defines the format of the resulting image. By default, the Maps Static API creates PNG images. Accepted values are png8, png, png32, gif, jpg and jpg-baseline
mapType	no	defines the type of map to construct. Default roadmap. Accepted values are roadmap, satellite, terrain and hybrid
language	no	defines the language to use for display of labels on map tiles
region	no	defines the appropriate borders to display, based on geo-political sensitivities
markers	no	defines one or more markers (see Marker) to attach to the image at specified locations
mapStyles	no	defines one or more styles customizing the presentation of the standard map. Each style may contain feature, element and set of style rules. Read more about available options
visible	no	defines one or more locations that should remain visible on the map, though no markers or other indicators will be displayed
paths	no	defines a set of one or more paths (see Path) to overlay on the map image
ImageComponent	no	defines component used to display map. Default Image

Marker

Prop	Required	Description
size	no	specifies the size of marker from the set. Default: mid. Accepted values are tiny, mid and small
color	no	specifies a 24-bit color (example: 0xFFFFCC) or a predefined color from the set: black, brown, green, purple, yellow, blue, gray, orange, red, white
label	no	specifies a single uppercase alphanumeric character from the set {A-Z, 0-9}
scale	no	specifies value that will be multiplied with the marker image size to produce the actual output size of the marker in pixels. Default: 1. Accepted values are 1, 2 and 4
locations	no	defines one or more locations defining where to place the marker on the map. Location can be either an object {latitude: number, longitude: number} or a string address (e.g. city hall, new york, ny)
icon	no	custom icon URL
anchor	no	anchor point for the custom icon. Can be array representing [x, y] point of the icon (such as [10, 5]), or as a predefined alignment: top, bottom, left, right, center, topleft, topright, bottomleft and bottomright

Path

Prop	Required	Description
weight	no	specifies the thickness of the path in pixels. Default: 5px
color	no	specifies a 24-bit color (example: 0xFFFFCC) or a predefined color from the set: black, brown, green, purple, yellow, blue, gray, orange, red, white
fillcolor	no	indicates both that the path marks off a polygonal area and specifies the fill color to use as an overlay within that area
geodesic	no	indicates that the requested path should be interpreted as a geodesic line that follows the curvature of the earth. When false, the path is rendered as a straight line in screen space. Default: false
enc	no	specifies path as an encoded polyline
points	no	specifies two or more points that will be used to build path along them (in the specified order). Point can be either an object {latitude: number, longitude: number} or a string address (e.g. city hall, new york, ny)

To learn more about props visit official documentation.

Example

See the example in the example folder.

License

MIT