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

Lonely Planet's Components

"use strict";

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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 }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

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 = function (_Component) {
  _inherits(InteractiveMap, _Component);

  function InteractiveMap() {
    _classCallCheck(this, InteractiveMap);

    return _possibleConstructorReturn(this, (InteractiveMap.__proto__ || Object.getPrototypeOf(InteractiveMap)).apply(this, arguments));
  }

  _createClass(InteractiveMap, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.initMap();
      InteractiveMap.setMarkerStyles();
      this.initTiles();
      this.initMarkers();
      this.setMapBounds();
    }
  }, {
    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;
      var places = _props.places;
      var 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);

        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;
      var width = _props2.width;
      var height = _props2.height;
      var 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: Object.assign(_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() {
      Object.keys(_styles.markerColors).forEach(function (type) {
        if (type === "center") {
          Object.assign(_styles.markerStyles, _defineProperty({}, ".leaflet-div-icon-" + type, (0, _styles.markerStylesMixin)(_styles.markerColors[type], "")));
        } else {
          var _Object$assign2;

          Object.assign(_styles.markerStyles, (_Object$assign2 = {}, _defineProperty(_Object$assign2, ".leaflet-div-icon-" + type, (0, _styles.markerStylesMixin)(_styles.markerColors[type], "")), _defineProperty(_Object$assign2, ".leaflet-div-icon-" + type + ".is-active", (0, _styles.markerStylesMixin)(_styles.markerColors[type], "", "active")), _Object$assign2));
        }
      });
    }
  }]);

  return InteractiveMap;
}(_react.Component);

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

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

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