@dazik/react-native-static-map NPM

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

react-native ios android maps-static-api

query-string

@infinitebrahmanuniverse/nolb-_daz @everything-registry/sub-chunk-226 @zalastax/nolb-_daz

4 years ago

4 years ago

4 years ago

4 years ago