React-Leaflet Sidebar-v2
A react-leaflet plugin for leaflet-sidebar-v2 (which is a leaflet-only fork of sidebar-v2)
The twist is the implementation of sidebar-v2 isn't very compatible with React, so this plugin actually renders all markup via React, including event handling, and just leverages the CSS from sidebar-v2.
Getting Started
You will need to include the sidebar-v2 css in your page somehow, for example via a CDN. The close icons default to fontawesome, so this will also need to be included.
You will typically include Sidebar
as a sibling component of
react-leaflet Map
, contained in a wrapper div so the sidebar is
positioned relative to the map, with whatever Tab
children are
required for your layout. This is because of event handling: if the
sidebar is a child of the map element, events will bubble up and be
handled by leaflet first (this is because React events are actually
handled by a single handler at the document root, so they will always
bubble up through leaflet first). A previous commit
(a9156e8bb7)
attempted to solve this by disabling native events at the sidebar
root, but I found too many complications. If anyone solves this I
would love a PR!
The Sidebar
component is stateless; all state information should be
passed as props, and desired state changes communicated upwards via
the onOpen
and onClose
callback. A minimal example might look
like the following (also note that to work with the default css, the
Map
needs a sidebar-map
class, and the Sidebar
needs to be
before the Map
):
import React Component from 'react';import Map TileLayer from 'react-leaflet';import Sidebar Tab from 'react-leaflet-sidebarv2'; { ; thisstate = collapsed: false selected: 'home' ; } { this; } { this } { return <div> <Sidebar ="sidebar" = = = => <Tab ="home" ="Home" ="fa fa-home"> <p>No place like home!</p> </Tab> <Tab ="settings" ="Settings" ="fa fa-cog" ="bottom"> <p>Settings dialogue</p> </Tab> </Sidebar> <Map ="sidebar-map" = = => <TileLayer ='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' ="http://{s}.tile.osm.org/{z}/{x}/{y}.png" /> </Map> </div> ; }