react-image-leaflet

A React library based on leaflet that adds pan and zoom features to images.

View demo View Github

Features

  • Pan & Zoom
  • Adjust image size according to parent containers
  • Provided with Type Difinitions

Usage

Install

$ npm install react-image-leaflet

then in your jsx or tsx ...

import React from 'react';
import ReactDOM from 'react-dom';

import PanZoom from 'react-image-leaflet';

const App = () => {
  const [url, setUrl] = React.useState('https://source.unsplash.com/random');

  return (
    <div style={{ width: '80vw', height: '80vh' }}>
      <PanZoom
        url={url}
        attribution='<a target="_blank" href="https://source.unsplash.com/">source.unsplash.com</a>'
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Props

  • url: Image URL (required)
  • bgColor: string (default: '#ddd')
  • margin: string | number (default: 0)
  • padding: string | number (default: 0)
  • zIndex: number | 'inherit' (default: 'inherit')
  • doubleClickReset: boolean (default: false, overrides doubleClickZoom)
  • fitSmallImage: boolean (default: false)
  • attribution: string (The HTML text)

Props inherited from Leaflet

see leaflet's documents for more details ...

  • preferCanvas: boolean (default: false)
  • attributionControl: boolean (default: true)
  • zoomControl: boolean (default: true)
  • zoomSnap: number (default: 1)
  • zoomDelta: number (default: 1)
  • boxZoom: boolean (default: true)
  • doubleClickZoom: boolean | 'center' (default: true)
  • dragging: boolean (default: true)
  • maxZoom: number (default: 3)
  • zoomAnimation: boolean (default: true)
  • zoomAnimationThreshold: number (default: 4)
  • fadeAnimation: boolean (default: true)
  • keyboard: boolean (default: true)
  • keyboardPanDelta: number (default: 80)
  • scrollWheelZoom: boolean | 'center' (default: true)
  • wheelDebounceTime: number (default: 40)
  • wheelPxPerZoomLevel: number (default: 60)
  • tap: boolean (default: true)
  • tapTolerance: number (default: 15)
  • touchZoom: boolean | 'center' (default: true)
  • bounceAtZoomLimits: boolean (default: true)

GitHub