react-leaflet-magnifying-glass

    2.0.0 • Public • Published

    react-leaflet-magnifying-glass

    version react-leaflet compatibility travis build dependencies peer dependencies issues downloads MIT License

    React wrapper of Leaflet.MagnifyingGlass for react-leaflet.

    This plugin allows you to add a "magnifying glass" effect to a Leaflet map, able to display a portion of the map in a different zoom (and actually display different content).

    Screenshot

    Tested with Leaflet 1.4.0 and React-Leaflet 1.9.1, React-Leaflet 2.2.0

    Demos

    Version Demo
    react-leaflet@1.9.1 CodePen
    react-leaflet@2.x CodePen

    Installation

    Install via NPM

    npm install --save react-leaflet-magnifying-glass

    Usage example for react-leaflet v1

    import { Map, TileLayer } from 'react-leaflet';
    import MagnifyingGlassControl from 'react-leaflet-magnifying-glass';
     
    const options = {
        position: 'topleft',
        radius: 100,
        zoomOffset: 3
    };
     
    <Map center={[2.935403, 101.448205]} zoom={10}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
     
      <MagnifyingGlassControl {...options} />
    </Map>

    Usage example for react-leaflet v2

    import { Map, TileLayer, withLeaflet } from 'react-leaflet';
    import MagnifyingGlassControlDefault from 'react-leaflet-magnifying-glass';
     
    // wrap `MagnifyingGlassControl` component with `withLeaflet` HOC
    const MagnifyingGlassControl = withLeaflet(MagnifyingGlassControlDefault);
     
    const options = {
        position: 'topleft',
        radius: 100,
        zoomOffset: 3
    };
     
    <Map center={[2.935403, 101.448205]} zoom={10}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
     
      <MagnifyingGlassControl {...options} />
    </Map>

    Options

    Option Type Default Description
    position string topleft Magnifier control position. One of (topleft,topright,bottomleft,bottomright).
    radius Integer 100 The radius of the magnifying glass, in pixels.
    zoomOffset Integer 3 The zoom level offset between the main map zoom and the magnifying glass.
    fixedZoom Integer -1 If different than -1, defines a fixed zoom level to always use in the magnifying glass, ignoring the main map zoom and the zoomOffet value.

    TODO

    • Support magnifying Leaflet.markercluster layer

    Credits

    Credits goes to bbecquet and all the contributors for the original work.

    License

    MIT License

    Install

    npm i react-leaflet-magnifying-glass

    DownloadsWeekly Downloads

    18

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    251 kB

    Total Files

    6

    Last publish

    Collaborators

    • m_hasbie