Farmblocks Map Balloon

A React component to display pictures and a caption over a map. See [Storybook](https://cravefood.github.io/farmblocks/index.html?selectedKind=Map Balloon)

Installation

npm install @crave/farmblocks-map-balloon

Usage

import React from "react";
import ReactDOM from "react-dom";
import MapBalloon from "@crave/farmblocks-map-balloon";

const root = document.createElement("div");

ReactDOM.render(
  <div
    style={{
      position: "relative",
      width: 500,
      height: 500,
      background: "lightcyan",
    }}
  >
    <MapBalloon
      x={50}
      y={400}
      open
      caption="My Farm"
      imageSet={[
        {
          name: "Strawberries",
          image: "https://source.unsplash.com/eCre0iMGtEA/800x800",
          // Photo by Clem Onojeghuo
        },
      ]}
    />
  </div>,
  root,
);

document.body.appendChild(root);

API

• x: number (default: 0). The x position of the pin, in pixels.
• y: number (default: 0). The y position of the pin, in pixels.
• align: string (default: 'left') The alignment of the balloon relative to the pin. You can use our constants by importing the alignments object:
  • import MapBalloon, { alignments } from "@crave/farmblocks-map-balloon";
• singleImage: string. Path for a single image to be displayed in a smaller balloon without caption.
• caption: string (required if singleImage is not used). Text to show under the images.
• imageSet: array (required if singleImage is not used). The list of images to be displayed on a balloon. Items should be objects with the following properties:
  • name: string (required). Text to show over the the image.
  • image: string (required). Path to product image.
• open: boolean (default: 0). Defines if the balloon wil be visible. Otherwise only the pin will be rendered
• animated: boolean (default: false). Defines if the balloon is animated or not
• balloonSize: number (default: 260). Balloon size
• borderRadius: string (default: 8px). Defines the balloon border radius
• pinColor: string (default: #f1c618). Color to be set to the pin icon
• pinHighlightColor: string (defaults to the pinColor value). Color to be set to the highlighted pin
• pinSize: number (default: 40). Size to be set to the pin icon
• opacity: number (default: 1)
• captionSize: number (default: 18), Size of the caption text.
• imageTextSize: number (default: 28), Size of the text overlay on images.
• onPinClick: function. Called when the pin is clicked. If set, changes the pin visual into a round button
• onBalloonClick: function. Called when the balloon is clicked. If set, adds an indicator to the balloon text.
• value: any. A value that will be passed as first argument for onPinClick and onBalloonClick calls. This can be handy to identify which pin/balloon was clicked.

License

MIT