Map Panel

This is a React/Typescript component for adding a responsive, mobile-ready panel over a map. The implementation is just one file, it can be styled, and it has only peer dependencies.

Install

• Npm: npm install map-panel
• Yarn: yarn add map-panel

Basic Example

import React from "react";
import MapPanel from "map-panel";

const MyComponent = () => (
  <div style={{ position: "relative", width: "100%", height: "70vh" }}>
    <MapPanel>
      <div style={{ flex: 1 }}>{`Panel Content`}</div>
    </MapPanel>
    <Map />
  </div>
);

Scrolling & Controls Example

import React from "react";
import MapPanel, { InnerScrollDiv } from "map-panel";

const MyComponent = () => {
  const breakpoint = 1024;
  const [panelY, setPanelY] = React.useState(0);
  const [isOpen, setIsOpen] = React.useState(null);
  return (
    <div style={{ position: "relative", width: "100%", height: "70vh" }}>
      <MapPanel
        breakpoint={breakpoint}
        onScroll={newPanelY => {
          setPanelY(newPanelY);
          newPanelY === 1 && setIsOpen(true);
          newPanelY === 0 && setIsOpen(false);
        }}
        isOpen={isOpen}
      >
        <InnerScrollDiv breakpoint={breakpoint} panelY={panelY}>
          <div style={{ height: "200vh" }}>
            <button onClick={() => setIsOpen(!isOpen)}>
              {isOpen ? "Close" : "Open"} Panel
            </button>
          </div>
        </InnerScrollDiv>
      </MapPanel>
      <Map />
    </div>
  );
};

See the examples and the examples source code for more snippets to copy.

Help

If there are any examples you'd like to see or use cases I didn't cover, please file an issue.