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

react-image-leaflet

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

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