React-leaflet-dialog NPM

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
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	300, 300	An array of the starting width and height values (in pixels).
minSize	Array	100, 100	An array with the minimum resize width and height (in pixels).
maxSize	Array	350, 350	An array with the maximum resize width and height (in pixels).
anchor	Array	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 anchor location )	this	dialog.setLocation( 15, 15 );	Move the dialog box to the specified pixel location ( Relative to the 'position' option )
setSize( Array 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.