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

Lonely Planet's Components

"use strict";

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

var _defineProperty2 = require("babel-runtime/helpers/defineProperty");

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _keys = require("babel-runtime/core-js/object/keys");

var _keys2 = _interopRequireDefault(_keys);

var _extends4 = require("babel-runtime/helpers/extends");

var _extends5 = _interopRequireDefault(_extends4);

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp;

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 _leaflet = require("leaflet");

var _leaflet2 = _interopRequireDefault(_leaflet);

var _styles = require("./styles");

var _icons = require("./icons");

var _icons2 = _interopRequireDefault(_icons);

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

var mapSettings = {
  accessToken: "pk.eyJ1IjoibG9uZWx5cGxhbmV0IiwiYSI6Imh1ODUtdUEifQ.OLLon0V6rcoTyayXzzUzsg",
  attribution: "<span title=\"Map data &copy; OpenStreetMap contributors,\n    CC-BY-SA, Imagery &copy; Mapbox\">&copy;</span>",
  maxZoom: 17,
  popupOptions: {
    className: "InteractiveMap-popup",
    closeButton: false,
    maxWidth: 150,
    offset: _leaflet2.default.point(0, 0),
    autoPan: false
  },
  projectId: "lonelyplanet.b963d424",
  url: "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}"
};

var InteractiveMap = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(InteractiveMap, _Component);

  function InteractiveMap() {
    (0, _classCallCheck3.default)(this, InteractiveMap);
    return (0, _possibleConstructorReturn3.default)(this, (InteractiveMap.__proto__ || (0, _getPrototypeOf2.default)(InteractiveMap)).apply(this, arguments));
  }

  (0, _createClass3.default)(InteractiveMap, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.initMap();
      InteractiveMap.setMarkerStyles();
      this.initTiles();
      this.initMarkers();
      this.setMapBounds();
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.activeMarker !== this.props.activeMarker) {
        if (this.props.activeMarker !== null) {
          InteractiveMap.markers[this.props.activeMarker].closePopup();
        }
        if (nextProps.activeMarker !== null) {
          InteractiveMap.markers[nextProps.activeMarker].openPopup();
        }
      }
    }
  }, {
    key: "setMapBounds",
    value: function setMapBounds() {
      var places = this.props.places;

      var placesCoords = places.map(function (place) {
        return [place.lat, place.long];
      });
      this.leafletMap.fitBounds(placesCoords, {
        padding: [30, 30]
      });
    }
  }, {
    key: "initMarkers",
    value: function initMarkers() {
      var _this2 = this;

      var _props = this.props,
          places = _props.places,
          markerSize = _props.markerSize;

      places.map(function (place, index) {
        var marker = _leaflet2.default.marker([place.lat, place.long], {
          opacity: 1,
          icon: _leaflet2.default.divIcon({
            className: "leaflet-div-icon-see",
            iconSize: markerSize,
            html: _icons2.default.see
          }),
          id: "marker-" + index,
          riseOnHover: true
        }).addTo(_this2.leafletMap);
        InteractiveMap.markers.push(marker);
        return InteractiveMap.addPopupToMarker(marker, place.title);
      });
    }
  }, {
    key: "initTiles",
    value: function initTiles() {
      _leaflet2.default.tileLayer(mapSettings.url, {
        accessToken: mapSettings.accessToken,
        attribution: mapSettings.attribution,
        id: mapSettings.projectId,
        maxZoom: mapSettings.maxZoom
      }).addTo(this.leafletMap);
    }
  }, {
    key: "initMap",
    value: function initMap() {
      this.leafletMap = _leaflet2.default.map("map", {
        scrollWheelZoom: false,
        zoomControl: false,
        attributionControl: false
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _props2 = this.props,
          width = _props2.width,
          height = _props2.height,
          style = _props2.style;

      return _react2.default.createElement(
        "div",
        {
          className: "InteractiveMap-container",
          style: [_styles.styles.container.base, { width: width, height: height }, style]
        },
        _react2.default.createElement(_radium.Style, {
          scopeSelector: ".InteractiveMap-container",
          rules: (0, _extends5.default)({}, _styles.scopedStyles, _styles.markerStyles)
        }),
        _react2.default.createElement("div", { id: "map", style: _styles.styles.map.base })
      );
    }
  }], [{
    key: "addPopupToMarker",
    value: function addPopupToMarker(marker, title) {
      marker.bindPopup(title);
      marker.on("mouseover", function () {
        marker.openPopup();
      });
      marker.on("mouseout", function () {
        marker.closePopup();
      });
    }
  }, {
    key: "setMarkerStyles",
    value: function setMarkerStyles() {
      (0, _keys2.default)(_styles.markerColors).forEach(function (type) {
        if (type === "center") {
          (0, _extends5.default)(_styles.markerStyles, (0, _defineProperty3.default)({}, ".leaflet-div-icon-" + type, (0, _styles.markerStylesMixin)(_styles.markerColors[type], "")));
        } else {
          var _extends3;

          (0, _extends5.default)(_styles.markerStyles, (_extends3 = {}, (0, _defineProperty3.default)(_extends3, ".leaflet-div-icon-" + type, (0, _styles.markerStylesMixin)(_styles.markerColors[type], "")), (0, _defineProperty3.default)(_extends3, ".leaflet-div-icon-" + type + ".is-active", (0, _styles.markerStylesMixin)(_styles.markerColors[type], "", "active")), _extends3));
        }
      });
    }
  }]);
  return InteractiveMap;
}(_react.Component), _class.markers = [], _temp);


InteractiveMap.propTypes = {
  places: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    title: _propTypes2.default.string,
    lat: _propTypes2.default.number,
    long: _propTypes2.default.number
  })).isRequired,
  width: _propTypes2.default.number,
  height: _propTypes2.default.number,
  activeMarker: _propTypes2.default.number,
  markerSize: _propTypes2.default.arrayOf(_propTypes2.default.number),
  style: _propTypes2.default.objectOf(_propTypes2.default.object)
};

InteractiveMap.defaultProps = {
  width: 628,
  activeMarker: null,
  height: 400,
  markerSize: [20, 20],
  style: null
};

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