geolocation-simulator.js

import EventEmitter from "events";

let priv = new WeakMap();
let simulatorCoords = [
  [40.678178, -73.944158],
  [40.678181, -73.943267],
  [40.678083, -73.941593],
  [40.678034, -73.940649],
];
let index = 0;

export default class extends EventEmitter {
  constructor(options) {
    super();

    let state = {
      period: 1000 / (options.frequency || 100),
      interval: null,
      paused: null,
      latitude: null,
      longitude: null,
    };

    priv.set(this, state);

    this.resume();
  }
  pause() {
    let state = priv.get(this);
    if (state.interval) {
      clearInterval(state.interval);
      state.interval = null;
    }
  }
  resume() {
    let state = priv.get(this);
    state.interval = setInterval(() => {
      // This sort of simulates a hardware request.
      let [latitude, longitude] = simulatorCoords[index];

      state.latitude = latitude;
      state.longitude = longitude;

      index++;

      if (index === simulatorCoords.length) {
        index = 0;
      }
      // Now that the "simulated" hardware request has been made,
      // simulate the async request with a setImmediate to emit the new data...
      setImmediate(() => this.emit("data", {latitude, longitude}));

    }, state.period);
  }
  get values() {
    let {latitude, longitude} = priv.get(this);
    return [
      latitude,
      longitude,
    ];
  }
  get latitude() {
    return priv.get(this).latitude;
  }
  get longitude() {
    return priv.get(this).longitude;
  }
  static read() {
    // index scoped to module
    index = Math.round(Math.random() * 3);

    let [latitude, longitude] = simulatorCoords[index];
    return Promise.resolve({
      latitude, longitude
    });
  }
};

map-component-index.js

import React from "react";
import Geolocation from "./geolocation-simulator";
import { header } from "./styles.css";
import Title from "react-title-component";

let handlers = new Map();
let geo = new Geolocation({ frequency: 4 });
geo.pause();
geo.on("data", coords => {
  console.log(`Data Event; received: ${coords.latitude} ${coords.longitude}`);
  handlers.forEach(handler => handler(coords));
});

export default React.createClass({
  getInitialState() {
    return {
      latitude: null,
      longitude: null,
    };
  },
  componentDidMount() {
    geo.resume();
    handlers.set(this, coords => {
      this.setState({ ...coords });
    });
  },
  componentWillUnmount() {
    geo.pause();
    handlers.clear();
  },
  render() {
    return (
      <div>
        <Title render="Map"/>
        <h2 className={header}>Longitude & Latitude</h2>
        <ul>
          <li>Latitude: {this.state.latitude}</li>
          <li>Longitude: {this.state.longitude}</li>
        </ul>
      </div>
    )
  }
});