react-leaflet-dialog

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 | | --- | --- | | [email protected] | CodePen | | [email protected] | 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!"); | Set new content for the dialog. | 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