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 _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _settings = require("../../../settings.json");

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 " + _settings.timing.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: _settings.color.lightText,
      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;
  var location = _ref.location;
  var size = _ref.size;
  var sidebar = _ref.sidebar;
  var hideAttribution = _ref.hideAttribution;
  var name = _ref.name;
  var url = _ref.url;

  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 + ",10/" + 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,
        style: [styles.image.base, sidebar && styles.image.sidebar]
      },
      _react2.default.createElement("img", {
        className: "StaticMap-image",
        src: mapImageUrl,
        alt: ""
      })
    ),
    !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"
    }),
    !hideAttribution && _react2.default.createElement(
      "small",
      {
        className: "StaticMap-attribution",
        style: styles.attribution.base
      },
      "© ",
      _react2.default.createElement(
        "a",
        { style: styles.attribution.link, href: "https://www.mapbox.com/map-feedback/" },
        "Mapbox"
      ),
      "© ",
      _react2.default.createElement(
        "a",
        { style: styles.attribution.link, href: "http://www.openstreetmap.org/copyright" },
        "OpenStreetMap contributors"
      )
    )
  );
}

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

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

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

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

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

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

  /**
   * URL string to wrap an anchor link around the map image
   */
  url: _react2.default.PropTypes.string
};

var token = "pk.eyJ1IjoibG9uZWx5cGxhbmV0IiwiYSI6Imh1ODUtdUEifQ.OLLon0V6rcoTyayXzzUzsg";

StaticMap.defaultProps = {
  token: token,

  location: "",

  size: "640x480",

  sidebar: false,

  hideAttribution: false,

  name: "",

  url: ""
};

StaticMap.styles = styles;

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