react-primitives-mapquest-static-map
Version:
A wrapper for MapQuest's Static Map API
245 lines (185 loc) • 8.41 kB
JavaScript
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 _reactPrimitives = require('react-primitives');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': 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; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var defaultMapScale = function defaultMapScale() {
return 2;
};
var values = function values(obj) {
return Object.keys(obj).map(function (key) {
return obj[key];
});
};
var IMAGE_FORMATS = {
//png specifies the PNG format.
PNG: 'png',
//gif specifies the GIF format.
GIF: 'gif',
//jpg (default) specifies the JPEG compression format at 100% quality.
JPG: 'jpg',
//jpg70 specifies the JPEG compression format at 70% quality.
JPG70: 'jpg70',
//jpg80 specifies the JPEG compression format at 80% quality.
JPG80: 'jpg80',
//jpg90 specifies the JPEG compression format at 90% quality.
JPG90: 'jpg90'
};
var MAP_TYPES = {
// map (default) specifies a standard MapQuest map image, as is normally shown on the MapQuest website.
MAP: 'map',
// hybrid specifies a hybrid of the satellite and road image,
// showing a transparent layer of major streets and place names on the satellite image.
HYBRID: 'hyb',
// satellite specifies a satellite image.
SATELLITE: 'sat',
// light specifies a white backed map with grey streets and place names.
LIGHT: 'light',
// dark specifies a black backed map with grey streets and place names.
DARK: 'dark'
};
var IMAGE_FORMATS_VALUES = values(IMAGE_FORMATS);
var MAP_TYPES_VALUES = values(MAP_TYPES);
// the Image's source should be ignored
var _Image$propTypes = _reactPrimitives.Image.propTypes,
source = _Image$propTypes.source,
imagePropTypes = _objectWithoutProperties(_Image$propTypes, ['source']);
/**
* A wrapper for MapQuest's Static Map API
*
* @see https://developer.mapquest.com/documentation/static-map-api/v5/map/
*
* @example: https://developer.mapquest.com/documentation/static-map-api/v5/examples/basic/map-with-center/
*/
var MapQuestStaticMap = function (_Component) {
_inherits(MapQuestStaticMap, _Component);
function MapQuestStaticMap() {
_classCallCheck(this, MapQuestStaticMap);
return _possibleConstructorReturn(this, (MapQuestStaticMap.__proto__ || Object.getPrototypeOf(MapQuestStaticMap)).apply(this, arguments));
}
_createClass(MapQuestStaticMap, [{
key: 'render',
value: function () {
function render() {
return _react2['default'].createElement(_reactPrimitives.Image, {
style: [this.props.style, this.props.size],
source: { uri: this.staticMapUrl }
});
}
return render;
}()
}, {
key: 'staticMapUrl',
get: function () {
function get() {
var _props = this.props,
latitude = _props.latitude,
longitude = _props.longitude,
zoom = _props.zoom,
size = _props.size,
scale = _props.scale,
format = _props.format,
mapType = _props.mapType;
var width = size.width,
height = size.height;
var rootUrl = this.constructor.RootUrl;
var scaleParameter = '';
if (scale === 2) {
scaleParameter = '@2x';
}
return String(rootUrl) + '?center=' + String(latitude) + ',' + String(longitude) + '&zoom=' + String(zoom) + '&size=' + String(width) + ',' + String(height) + scaleParameter + '&type=' + String(mapType) + '&format=' + String(format) + '&' + String(this.locationsParam) + '&' + String(this.apiKeyParam);
}
return get;
}()
}, {
key: 'locationsParam',
get: function () {
function get() {
var _props2 = this.props,
latitude = _props2.latitude,
longitude = _props2.longitude,
hasCenterMarker = _props2.hasCenterMarker,
locations = _props2.locations;
var allLocations = locations;
if (hasCenterMarker) {
allLocations.push({ latitude: latitude, longitude: longitude });
}
var locationList = allLocations.map(function (_ref) {
var latitude = _ref.latitude,
longitude = _ref.longitude;
return String(latitude) + ',' + String(longitude);
}).join('||');
return 'locations=' + locationList;
}
return get;
}()
}, {
key: 'apiKeyParam',
get: function () {
function get() {
var apiKey = this.constructor.ApiKey;
return apiKey ? 'key=' + String(apiKey) : '';
}
return get;
}()
}]);
return MapQuestStaticMap;
}(_react.Component);
/**
* https://developer.mapquest.com/user/register
*/
MapQuestStaticMap.ApiKey = null;
MapQuestStaticMap.RootUrl = 'https://www.mapquestapi.com/staticmap/v5/map';
MapQuestStaticMap.ImageFormats = IMAGE_FORMATS;
MapQuestStaticMap.MapTypes = MAP_TYPES;
MapQuestStaticMap.propTypes = Object.assign({}, imagePropTypes, {
latitude: _react2['default'].PropTypes.string.isRequired,
longitude: _react2['default'].PropTypes.string.isRequired,
size: _react2['default'].PropTypes.shape({
width: _react2['default'].PropTypes.number.isRequired,
height: _react2['default'].PropTypes.number.isRequired
}),
locations: _react2['default'].PropTypes.arrayOf(_react2['default'].PropTypes.shape({
latitude: _react2['default'].PropTypes.number.isRequired,
longitude: _react2['default'].PropTypes.number.isRequired
})),
/**
* Defines the zoom level of the map
*
* @see //https://developer.mapquest.com/documentation/static-map-api/v5/map/#request_parameters-zoom
*/
zoom: _react2['default'].PropTypes.number.isRequired,
/**
* scale affects the number of pixels that are returned.
* scale=2 returns twice as many pixels as scale=1 while retaining the same coverage area and level of detail
* @see https://developer.mapquest.com/documentation/static-map-api/v5/map/#request_parameters-size
*/
scale: _react2['default'].PropTypes.number,
/**
* @see https://developer.mapquest.com/documentation/static-map-api/v5/map/#request_parameters-format
*/
format: _react2['default'].PropTypes.oneOf(IMAGE_FORMATS_VALUES),
/**
* @see https://developer.mapquest.com/documentation/static-map-api/v5/map/#request_parameters-type
*/
mapType: _react2['default'].PropTypes.oneOf(MAP_TYPES_VALUES),
/**
* Add a marker to the center of the map
*/
hasCenterMarker: _react2['default'].PropTypes.bool
});
MapQuestStaticMap.defaultProps = {
scale: defaultMapScale(),
format: IMAGE_FORMATS.JPG,
mapType: MAP_TYPES.MAP,
hasCenterMarker: false,
locations: []
};
exports['default'] = MapQuestStaticMap;