react-alkmaps/dist/index.js

React AlkMaps integration

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var PropTypes = _interopDefault(require('prop-types'));

/**
 * @param  {string} url AlkMaps script url
 * @param  {func} onLoad Invoked after script load
 * @param  {func} onError Invoked after script fail
 */
var loadScript = function loadScript(url, onLoad, onError) {
  var existingScript = document.getElementById("mainMap");
  if (url) {
    // if (!existingScript) {
    var script = document.createElement("script");
    script.src = url;
    script.id = "alkmaps";
    document.head.appendChild(script);

    script.onload = function () {
      if (onLoad) onLoad(window.ALKMaps);
    };

    script.onerror = function (error) {
      if (onError) onError(error);
    };
    // }

    if (existingScript && onLoad) onLoad();
  } else {
    if (onError) onError({ code: "E404", msg: ERROR_CODES.E404 });
    throw new Error("E404" + "- " + ERROR_CODES.E404);
  }
};

var ERROR_CODES = {
  E404: "Script URL not provided"
};
Object.freeze(ERROR_CODES);

var _this = undefined;
/**
 * @param  {String} type LayerType
 * @param  {String} name LayerName
 */
var createLayer = function createLayer(type, name) {
  switch (type) {
    case LAYER_TYPES.VECTORLAYER:
      {
        return new ALKMaps.Layer.Vector(name);
      }
    case LAYER_TYPES.MARKER_LAYER:
      {
        return new ALKMaps.Layer.Markers(name);
      }
    default:
      {
        throw new Error("L404" + "- " + MAP_ERRORS.L404);
      }
  }
};

var createBaseMap = function createBaseMap() {
  return new ALKMaps.Layer.BaseMap("ALK Maps", {}, { displayInLayerSwitcher: false });
};

/**
 * @param  {ref} mapRef Alkmap refernce
 * */
var createInitMapProjection = function createInitMapProjection(mapRef) {
  return new ALKMaps.Map(mapRef, {
    displayProjection: new ALKMaps.Projection("EPSG:4326")
  });
};

/**
 * @param  {Object} map AlkMap Instance
 * @param  {object} center lat long object
 * @param  {integer} zoom map zoom level
 */
var setCenter = function setCenter(map, center, zoom) {
  map.setCenter(new ALKMaps.LonLat(center.lat, center.long).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject()), zoom);
};
/**
 * @param  {array} children Array of React elements
 * @param  {object} props Extra props to child
 */
var addPropsToChildren = function addPropsToChildren(children, props) {
  return React__default.Children.map(children, function (child) {
    var childProps = props;
    var childWithExtraProps = React__default.cloneElement(child, childProps);
    return childWithExtraProps;
  }.bind(_this));
};

var LAYER_TYPES = {
  VECTORLAYER: "vector",
  MARKER_LAYER: "marker"
};

var MAP_ERRORS = {
  L404: "No such Layer type found"
};
Object.freeze(LAYER_TYPES);
Object.freeze(MAP_ERRORS);

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

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 _extends = Object.assign || function (target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];

    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }

  return target;
};

var inherits = function (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 possibleConstructorReturn = function (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;
};

var VectorLayer = function (_Component) {
  inherits(VectorLayer, _Component);

  function VectorLayer() {
    classCallCheck(this, VectorLayer);
    return possibleConstructorReturn(this, (VectorLayer.__proto__ || Object.getPrototypeOf(VectorLayer)).apply(this, arguments));
  }

  createClass(VectorLayer, [{
    key: "render",
    value: function render() {
      var _window = window,
          ALKMaps = _window.ALKMaps;

      if (ALKMaps) {
        var _props = this.props,
            children = _props.children,
            parent = _props.parent,
            label = _props.label;

        var vectorLayer = createLayer("vector", label);
        var props = _extends({}, parent, { currentLayer: vectorLayer });
        var childrenWithProps = addPropsToChildren(children, props);
        parent.map.addLayers([vectorLayer]);
        return childrenWithProps;
      } else {
        return null;
      }
    }
  }]);
  return VectorLayer;
}(React.Component);

VectorLayer.propTypes = {
  children: PropTypes.array,
  parent: PropTypes.object,
  label: PropTypes.string
};

VectorLayer.defaultProps = {
  label: "VectorLayer"
};

/**
 * @param  {object} map alkmap object
 * @param  {object} latlong latlong object
 * @param  {object} data vector point data
 * @param  {string} type type of vector
 */
var createPointFeature = function createPointFeature(map, latlong, data, type) {
  var featureData = null;
  var pointAndImgData = null;
  switch (type) {
    case VECTOR_TYPES.SVG:
      {
        featureData = {
          svg: {
            content: data.svg
          }
        };
        pointAndImgData = null;
        break;
      }
    default:
      {
        featureData = null;
        pointAndImgData = _extends({}, data);
      }
  }
  try {
    return new ALKMaps.Feature.Vector(new ALKMaps.Geometry.Point(parseFloat(latlong.lat), parseFloat(latlong.long)).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject()), featureData, pointAndImgData);
  } catch (error) {
    console.log(error);
  }
};

var VECTOR_TYPES = {
  SVG: "svg"
};

Object.freeze(VECTOR_TYPES);

var VectorPoint = function (_Component) {
  inherits(VectorPoint, _Component);

  function VectorPoint() {
    classCallCheck(this, VectorPoint);
    return possibleConstructorReturn(this, (VectorPoint.__proto__ || Object.getPrototypeOf(VectorPoint)).apply(this, arguments));
  }

  createClass(VectorPoint, [{
    key: "render",
    value: function render() {
      var _window = window,
          ALKMaps = _window.ALKMaps;

      if (ALKMaps) {
        var _props = this.props,
            map = _props.map,
            latlong = _props.latlong,
            data = _props.data,
            currentLayer = _props.currentLayer,
            type = _props.type;

        var pointFeature = createPointFeature(map, latlong, data, type);
        currentLayer.addFeatures([pointFeature]);
      }
      return null;
    }
  }]);
  return VectorPoint;
}(React.Component);

VectorPoint.propTypes = {
  latlong: PropTypes.shape({
    lat: PropTypes.number.isRequired,
    long: PropTypes.number.isRequired
  }),
  map: PropTypes.object,
  data: PropTypes.object.isRequired,
  currentLayer: PropTypes.object,
  type: PropTypes.string
};

VectorPoint.defaultProps = {};

var MarkerLayer = function (_Component) {
  inherits(MarkerLayer, _Component);

  function MarkerLayer() {
    classCallCheck(this, MarkerLayer);
    return possibleConstructorReturn(this, (MarkerLayer.__proto__ || Object.getPrototypeOf(MarkerLayer)).apply(this, arguments));
  }

  createClass(MarkerLayer, [{
    key: "render",
    value: function render() {
      var _window = window,
          ALKMaps = _window.ALKMaps;

      if (ALKMaps) {
        var _props = this.props,
            children = _props.children,
            parent = _props.parent,
            label = _props.label;

        var markerLayer = createLayer("marker", label);
        console.log(children);
        var props = _extends({}, parent, { currentLayer: markerLayer });
        var childrenWithProps = addPropsToChildren(children, props);
        parent.map.addLayers([markerLayer]);
        return childrenWithProps;
      } else {
        return null;
      }
    }
  }]);
  return MarkerLayer;
}(React.Component);

MarkerLayer.propTypes = {
  children: PropTypes.array,
  parent: PropTypes.object,
  label: PropTypes.string
};

MarkerLayer.defaultProps = {
  label: "MarkerLayer"
};

/**
 * @param  {object} map alkmap object
 * @param  {object} latlong latlong object
 * @param  {object} data marker data
 * @param  {string} type type of marker
 */
var createMarker = function createMarker(map, latlong, data, type) {
  var iconFav = new ALKMaps.Icon(ALKMaps.IMAGE.FAVORITE, new ALKMaps.Size(30, 30));
  var mouseOverObj = {
    map: map,
    mouseOver: false
  };
  if (data.mouseOver) {
    mouseOverObj = _extends({}, mouseOverObj, {
      mouseOver: true
    });
  }
  try {
    return new ALKMaps.Marker(new ALKMaps.LonLat(parseFloat(latlong.lat), parseFloat(latlong.long)).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject()), iconFav.clone(), data.label, mouseOverObj);
  } catch (error) {
    console.log(error);
  }
};

var Marker = function (_Component) {
  inherits(Marker, _Component);

  function Marker() {
    classCallCheck(this, Marker);
    return possibleConstructorReturn(this, (Marker.__proto__ || Object.getPrototypeOf(Marker)).apply(this, arguments));
  }

  createClass(Marker, [{
    key: "render",
    value: function render() {
      var _window = window,
          ALKMaps = _window.ALKMaps;

      if (ALKMaps) {
        var _props = this.props,
            map = _props.map,
            latlong = _props.latlong,
            data = _props.data,
            currentLayer = _props.currentLayer,
            type = _props.type;

        var newMarker = createMarker(map, latlong, data, type);
        currentLayer.addMarker(newMarker);
      }
      return null;
    }
  }]);
  return Marker;
}(React.Component);

Marker.propTypes = {
  latlong: PropTypes.shape({
    lat: PropTypes.number.isRequired,
    long: PropTypes.number.isRequired
  }),
  map: PropTypes.object,
  data: PropTypes.object.isRequired,
  currentLayer: PropTypes.object,
  type: PropTypes.string
};

Marker.defaultProps = {};

var ALKMaps$1 = null; // ! Alk Maps Global Object
var map = null; //! Alk Map instance

var ReactAlkMaps = function (_Component) {
  inherits(ReactAlkMaps, _Component);

  function ReactAlkMaps(props) {
    classCallCheck(this, ReactAlkMaps);

    var _this = possibleConstructorReturn(this, (ReactAlkMaps.__proto__ || Object.getPrototypeOf(ReactAlkMaps)).call(this, props));

    _this.onLoad = function () {
      _this.setState({
        scriptLoaded: true
      });
    };

    _this.mapInit = function () {
      var _this$props = _this.props,
          apikey = _this$props.apikey,
          center = _this$props.center,
          zoom = _this$props.zoom;

      if (apikey) {
        ALKMaps$1 = window.ALKMaps;
        map = createInitMapProjection(_this.mainMap.current);
        _this.map = map;
        ALKMaps$1.APIKey = apikey;
        var layer = createBaseMap();
        map.addLayers([layer]);
        setCenter(map, center, zoom);
      } else {
        throw new Error("No Api Key provided");
      }
    };

    _this.mainMap = React__default.createRef();

    _this.state = {
      scriptLoaded: false,
      scriptError: false
    };
    return _this;
  }

  createClass(ReactAlkMaps, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      loadScript(this.props.url, this.props.onLoad, this.props.onError);
    }
  }, {
    key: "render",
    value: function render() {
      var _window = window,
          ALKMaps = _window.ALKMaps;
      var children = this.props.children;

      var childProps = {
        parent: this
      };
      var childrenWithProps = addPropsToChildren(children, childProps);
      console.log(childrenWithProps);
      if (childrenWithProps) {
        childrenWithProps = childrenWithProps.filter(function (child) {
          return child.type.name === MAP_ITEMS.VECTORLAYER || child.type.name === MAP_ITEMS.MARKERLAYER;
        });
      }
      return React__default.createElement(
        "div",
        null,
        React__default.createElement(
          "div",
          {
            id: "mainMap",
            ref: this.mainMap,
            style: {
              width: "calc(100% - 1px)",
              height: "100vh",
              position: "relative"
            }
          },
          childrenWithProps
        ),
        ALKMaps && this.mapInit()
      );
    }
  }]);
  return ReactAlkMaps;
}(React.Component);

ReactAlkMaps.propTypes = {
  text: PropTypes.string
};

ReactAlkMaps.propTypes = {
  url: PropTypes.string,
  onLoad: PropTypes.func,
  onError: PropTypes.func,
  apikey: PropTypes.string,
  center: PropTypes.shape({
    lat: PropTypes.number.isRequired,
    long: PropTypes.number.isRequired
  }),
  zoom: PropTypes.number
};

ReactAlkMaps.defaultProps = {
  onLoad: function onLoad() {},
  onError: function onError() {},
  url: "https://maps.alk.com/api/1.2/alkmaps.js",
  apikey: "",
  center: {
    lat: -74.655522,
    long: 40.367494
  },
  zoom: 2
};

var MAP_ITEMS = {
  VECTORLAYER: "VectorLayer",
  MARKERLAYER: "MarkerLayer"
};
Object.freeze(MAP_ITEMS);

exports.default = ReactAlkMaps;
exports.VectorLayer = VectorLayer;
exports.VectorPoint = VectorPoint;
exports.MarkerLayer = MarkerLayer;
exports.Marker = Marker;
//# sourceMappingURL=index.js.map