Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

react-leaflet-dialog

2.0.1 • Public • Published

react-leaflet-dialog

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

React wrapper of Leaflet.Dialog for react-leaflet.

A dialog modal window that is resizable and positionable on the map.

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 react-leaflet-dialog --save

Include font-awesome css to your project.

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Usage example for react-leaflet v1

import { Map, TileLayer } from 'react-leaflet';
import Dialog from 'react-leaflet-dialog';
        
<Map center={[101.483459, 2.938926]} zoom={12}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />
 
  <Dialog ref={(ref) => { this.dialog = ref; }} id="dialog1">
    <div>Dialog content.</div>
  </Dialog>
</Map>

Usage example for react-leaflet v2

import { Map, TileLayer, withLeaflet } from 'react-leaflet';
import DialogDefault from 'react-leaflet-dialog';
 
// wrap `Dialog` component with `withLeaflet` HOC
const Dialog = withLeaflet(DialogDefault);
        
<Map center={[101.483459, 2.938926]} zoom={12}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />
 
  <Dialog ref={(ref) => { this.dialog = ref; }} id="dialog1">
    <div>Dialog content.</div>
  </Dialog>
</Map>

Options

Any props passed to Dialog are passed down to Leaflet.Dialog.

Refer Leaflet.Dialog options for a complete list of options supported.

Property Type Default Description
size [Array][width, height] [ 300, 300 ] An array of the starting width and height values (in pixels).
minSize [Array][width, height] [ 100, 100 ] An array with the minimum resize width and height (in pixels).
maxSize [Array][width, height] [ 350, 350 ] An array with the maximum resize width and height (in pixels).
anchor [Array][top, left] [ 250, 250 ] The starting point anchor location (from the upper left) in pixels.
position [String] 'topleft' The leaflet control div to place the modal inside, as a starting reference point.
initOpen [Boolean] true Whether or not to initialize in an open state.

Methods

Method Returns Example Description
open() this dialog.open(); Opens the dialog window.
close() this dialog.close(); Closes the dialog window.
destroy() this dialog.destroy(); Removes the dialog box from the window.
setLocation( [Array][top, left] anchor location ) this dialog.setLocation( [ 15, 15 ] ); Move the dialog box to the specified pixel location ( Relative to the 'position' option )
setSize( [Array][width, height] size ) this dialog.setSize( [ 150, 150 ] ); Resize the dialog window to the specified width and height.
setContent( [String node] content ) this dialog.setContent("

Hello! Welcome to your nice new dialog box!

");
lock() this dialog.lock(); Hides all visible dialog window controls.
unlock() this dialog.unlock(); Re-instates all dialog window controls.
freeze() this dialog.freeze(); Hides all visible dialog window movement/sizing controls.
unfreeze() this dialog.unfreeze(); Re-instates all dialog window movement/sizing controls.
hideClose() this dialog.hideClose(); Hides the closing 'x'
showClose() this dialog.showClose(); Shows the closing 'x'
hideResize() this dialog.hideResize(); Hides the resizing symbol
showResize() this dialog.showResize(); Shows the resizing symbol

Example

 
...
 
openDialog() {
  this.dialog.open();
}
 
closeDialog() {
  this.dialog.close();
}
 
destroyDialog() {
  this.dialog.destroy();
}
 
updateDialogContent() {
  this.dialog.setContent("<div>This is the new dialog content.</div>");
}
 
render() {
  return (
    <Map center={[101.483459, 2.938926]} zoom={12}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
 
      <Dialog ref={(ref) => { this.dialog = ref; }} id="dialog1" />
    </Map>
  );
}
 
...
 

Events

Event Data Description
onOpened this Fired when open() is called.
onClosed this Fired when close() is called or when the 'x' is clicked.
onDestroyed this Fired when destroy() is called.
onLocked this Fired when lock() is called.
onUnlocked this Fired when unlock() is called.
onFrozen this Fired when freeze() is called.
onUnfrozen this Fired when unfreeze() is called.
onUpdated this Fired when contents are set or when added to the map.
onResizeStart this Fired when the resize button is clicked.
onResizing this Fired continuously as the resize button is dragged.
onResizeEnd this Fired when the resize button click is released.
onMoveStart this Fired when the move button is clicked.
onMoving this Fired continuously as the move button is dragged.
onMoveEnd this Fired when the move button click is released.
onCloseHidden this Fired when hideClose() is called.
onCloseShown this Fired when the showClose() is called.
onResizeHidden this Fired when hideResize() is called.
onResizeShown this Fired when the showResize() is called.

Credits

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

License

MIT License

Install

npm i react-leaflet-dialog

DownloadsWeekly Downloads

14

Version

2.0.1

License

MIT

Unpacked Size

993 kB

Total Files

7

Last publish

Collaborators

  • avatar