backpack-ui/dist/components/staticMap/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _grid = require("../../utils/grid");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var styles = {
  container: {
    base: {
      fontSize: "10px",
      opacity: 1,
      transition: "opacity " + _timing2.default.default
    },

    sidebar: {
      marginTop: 35 / 10 + "em"
    }
  },

  image: {
    base: {
      display: "block"
    },

    sidebar: {
      height: "auto",
      maxHeight: 90 / 10 + "em",
      maxWidth: 278 / 10 + "em",
      width: (0, _grid.percentage)("278px", "" + (0, _grid.span)(3, "static"))
    }
  },

  attribution: {
    base: {
      color: _colors2.default.textSecondary,
      display: "inline-block",
      fontSize: 9 / 10 + "em",
      letterSpacing: ".1px",
      marginTop: 4 / 10 + "em"
    },

    link: {
      color: "currentColor"
    }
  }
};

/**
 * Generate a static map
 */
function StaticMap(_ref) {
  var token = _ref.token,
      location = _ref.location,
      size = _ref.size,
      sidebar = _ref.sidebar,
      hideAttribution = _ref.hideAttribution,
      name = _ref.name,
      url = _ref.url,
      zoom = _ref.zoom,
      qaHook = _ref.qaHook;

  var mapBaseUrl = "http://api.tiles.mapbox.com/v4/lonelyplanet.b963d424";
  var customMarkerUrl = "https://assets.staticlp.com/assets/mapPin-primary-small.png";
  var customMarker = "url-" + encodeURIComponent(customMarkerUrl) + "(" + location + ")";
  var mapImageUrl = mapBaseUrl + "/" + customMarker + "/" + location + "," + zoom + "/" + size + ".png?access_token=" + token;

  return _react2.default.createElement(
    "div",
    {
      className: "StaticMap",
      style: [styles.container.base, sidebar && styles.container.sidebar]
    },
    url && _react2.default.createElement(
      "a",
      {
        href: url,
        "data-testid": qaHook ? "static-map-link" : null,
        style: [styles.image.base, sidebar && styles.image.sidebar]
      },
      _react2.default.createElement("img", {
        className: "StaticMap-image",
        src: mapImageUrl,
        alt: "",
        "data-pin-nopin": true
      })
    ),
    !url && _react2.default.createElement("img", {
      className: "StaticMap-image",
      style: [styles.image.base, sidebar && styles.image.sidebar],
      src: mapImageUrl,
      alt: name && "Location of " + name + " on map",
      "data-pin-nopin": true
    }),
    !hideAttribution && _react2.default.createElement(
      "small",
      {
        className: "StaticMap-attribution",
        style: styles.attribution.base
      },
      "\xA9 ",
      _react2.default.createElement(
        "a",
        { style: styles.attribution.link, href: "https://www.mapbox.com/map-feedback/" },
        "Mapbox"
      ),
      "\xA9 ",
      _react2.default.createElement(
        "a",
        { style: styles.attribution.link, href: "http://www.openstreetmap.org/copyright" },
        "OpenStreetMap contributors"
      )
    )
  );
}

StaticMap.propTypes = {
  /**
   * Mapbox API token
   */
  token: _propTypes2.default.string.isRequired,

  /**
   * Location string as lontxlat
   */
  location: _propTypes2.default.string.isRequired,

  /**
   * Size for the static image in width x height
   * Defaults to 640x480
   */
  size: _propTypes2.default.string,

  /**
   * If the static map is located within the sidebar (POI)
   */
  sidebar: _propTypes2.default.bool,

  /**
   * Hide the map's attribution and copyright notice
   */
  hideAttribution: _propTypes2.default.bool,

  /**
   * Name of location; this can be POI or place
   */
  name: _propTypes2.default.string,

  /**
   * URL string to wrap an anchor link around the map image
   */
  url: _propTypes2.default.string,

  /**
   * Zoom Level for Map
   */
  zoom: _propTypes2.default.string,

  /**
   * QA Hook
   */
  qaHook: _propTypes2.default.bool
};

var token = "pk.eyJ1IjoibG9uZWx5cGxhbmV0IiwiYSI6Imh1ODUtdUEifQ.OLLon0V6rcoTyayXzzUzsg";

StaticMap.defaultProps = {
  token: token,
  location: "",
  size: "640x480",
  sidebar: false,
  hideAttribution: false,
  name: "",
  url: "",
  zoom: "10",
  qaHook: false
};

StaticMap.styles = styles;

exports.default = (0, _radium2.default)(StaticMap);