rizzo-next/src/components/map/interactive-map.js

The next generation of Lonely Planet's style guide and pattern library.

import $ from "jquery";
import Arkham from "../../core/arkham";
import { Component } from "../../core/bane";
import MapActions from "./actions";
import MapState from "./state";
import MapAPI from "./api";

/**
 * Wrapper around the map element
 */
class InteractiveMap extends Component {

  initialize() {
    this.launch();

    Arkham.on("map.init", () => {
      this.changeView();
    });

    Arkham.on("view.changed", () => {
      this.changeView();
    });

    Arkham.on("place.fetched", () => {
      this.changeView();
    });
  }

  launch() {
    MapAPI.launch(this.$el);
  }

  kill() {
    MapAPI.kill();
  }

  changeView() {
    let state = MapState.getState();
    let pois = [];

    if (!state.sets[state.activeSetIndex]) {
      pois.push(state.currentLocation);
    } else {
      pois = state.sets[state.activeSetIndex].items;
    }

    MapAPI.redraw(pois);
  }

  hasFetched() {
    let state = MapState.getState();
    let pois = state.sets[state.activeSetIndex].items;

    MapAPI.plot(pois);
  }

  pinClick(e) {
    let pinType = $(e.currentTarget).data("pintype");

    if(pinType === "poi") {
      let data = {
        poi: $(e.currentTarget).data("poi")
      };
      MapActions.poiOpen(data);
    } else {
      let data = {
        place: $(e.currentTarget).data("place")
      };
      MapActions.gotoPlace(data);
    }
  }

}

export default InteractiveMap;