react-google-maps-geotiff-overlay

Easily overlay geotiff images on top of react google maps

Install

npm install --save react-google-maps-geotiff-overlay

Usage

GeoTIFFOverlay only needs binary image data provided as a prop.

import React, { Component } from 'react'

import GeoTIFFOverlay from 'react-google-maps-geotiff-overlay'
import { GoogleMap, LoadScript } from '@react-google-maps/api'


class Example extends Component {
  render () {
    return (
          <LoadScript
            id='script-loader'
            googleMapsApiKey={...}
          >
            <GoogleMap
              onLoad={map => {
                this.mapRef = map
              }}
              id='example'
              mapContainerStyle={{
                height: '768px',
                width: '100%'
              }}
              zoom={4}
              center={{ lat: 30.397, lng: 10.644 }}
            >
              <GeoTIFFOverlay overlayData={...} />
            </GoogleMap>
          </LoadScript >
    )
  }
}

opacity

Use opacity prop to control overlay transparence

<GeoTIFFOverlay overlayData={...} opacity={0.5}/>

draw

Use draw prop to contol overlay visibility (hide/show)

<GeoTIFFOverlay overlayData={...} draw={false}/>

License

MIT © desmoteo

react-google-maps-geotiff-overlay