Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
pigeon-maps
Advanced tools
pigeon-maps - npm Package Compare versions
Comparing version 0.15.0 to 0.16.0
@@ -10,2 +10,7 @@ # Change Log | ||
| ## 0.16.0 - 2020-08-10 | ||
| ### Changes | ||
| - Rewritten in TypeScript without changing any functionality | ||
| - Attribution links now open in a new tab | ||
| ## 0.15.0 - 2020-03-03 | ||
@@ -12,0 +17,0 @@ ### Changes |
824
lib/index.js
@@ -7,7 +7,15 @@ 'use strict'; | ||
| var React__default = _interopDefault(React); | ||
| var PropTypes = _interopDefault(require('prop-types')); | ||
| function _inheritsLoose(subClass, superClass) { | ||
| subClass.prototype = Object.create(superClass.prototype); | ||
| subClass.prototype.constructor = subClass; | ||
| subClass.__proto__ = superClass; | ||
| } | ||
| function parentPosition(element) { | ||
| var rect = element.getBoundingClientRect(); | ||
| return { x: rect.left, y: rect.top }; | ||
| return { | ||
| x: rect.left, | ||
| y: rect.top | ||
| }; | ||
| } | ||
@@ -20,3 +28,4 @@ | ||
| } | ||
| element = element.offsetParent; | ||
| element = element.offsetParent; // TODO remove cast to `HTMLElement` | ||
| } | ||
@@ -28,5 +37,5 @@ | ||
| function debounce(func, wait) { | ||
| var timeout = void 0; | ||
| var timeout; | ||
| return function () { | ||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
| for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
@@ -43,8 +52,2 @@ } | ||
| 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 ANIMATION_TIME = 300; | ||
@@ -60,12 +63,16 @@ var DIAGONAL_THROW_TIME = 1500; | ||
| var NOOP = function NOOP() {}; | ||
| var NOOP = function NOOP() { | ||
| return true; | ||
| }; | ||
| function stamenToner(x, y, z, dpr) { | ||
| return 'https://stamen-tiles.a.ssl.fastly.net/toner/' + z + '/' + x + '/' + y + (dpr >= 2 ? '@2x' : '') + '.png'; | ||
| } | ||
| function wikimedia(x, y, z, dpr) { | ||
| var retina = typeof dpr !== 'undefined' ? dpr >= 2 : typeof window !== 'undefined' && window.devicePixelRatio >= 2; | ||
| return "https://maps.wikimedia.org/osm-intl/" + z + "/" + x + "/" + y + (retina ? '@2x' : '') + ".png"; | ||
| } // https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames | ||
| // https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames | ||
| var lng2tile = function lng2tile(lon, zoom) { | ||
| return (lon + 180) / 360 * Math.pow(2, zoom); | ||
| }; | ||
| var lat2tile = function lat2tile(lat, zoom) { | ||
@@ -91,9 +98,7 @@ return (1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom); | ||
| return t * (2 - t); | ||
| } | ||
| } // minLat, maxLat, minLng, maxLng | ||
| // minLat, maxLat, minLng, maxLng | ||
| var absoluteMinMax = [tile2lat(Math.pow(2, 10), 10), tile2lat(0, 10), tile2lng(0, 10), tile2lng(Math.pow(2, 10), 10)]; | ||
| var hasWindow = typeof window !== 'undefined'; | ||
| var performanceNow = hasWindow && window.performance && window.performance.now ? function () { | ||
@@ -108,7 +113,15 @@ return window.performance.now(); | ||
| var requestAnimationFrame = hasWindow ? window.requestAnimationFrame || window.setTimeout : function (callback) { | ||
| return callback(); | ||
| var requestAnimationFrame = function requestAnimationFrame(callback) { | ||
| if (hasWindow) { | ||
| return (window.requestAnimationFrame || window.setTimeout)(callback); | ||
| } else { | ||
| callback(new Date().getTime()); | ||
| return null; | ||
| } | ||
| }; | ||
| var cancelAnimationFrame = hasWindow ? window.cancelAnimationFrame || window.clearTimeout : function () {}; | ||
| var cancelAnimationFrame = function cancelAnimationFrame(animFrame) { | ||
| return hasWindow && animFrame ? (window.cancelAnimationFrame || window.clearTimeout)(animFrame) : false; | ||
| }; | ||
| function srcSet(dprs, url, x, y, z) { | ||
@@ -118,15 +131,39 @@ if (!dprs || dprs.length === 0) { | ||
| } | ||
| return dprs.map(function (dpr) { | ||
| return url(x, y, z, dpr) + (dpr === 1 ? '' : ' ' + dpr + 'x'); | ||
| return url(x, y, z, dpr) + (dpr === 1 ? '' : " " + dpr + "x"); | ||
| }).join(', '); | ||
| } | ||
| var Map = function (_Component) { | ||
| _inherits(Map, _Component); | ||
| var Map = /*#__PURE__*/function (_Component) { | ||
| _inheritsLoose(Map, _Component); | ||
| function Map(props) { | ||
| _classCallCheck(this, Map); | ||
| var _ref, _props$defaultZoom, _ref2, _props$defaultCenter, _ref3, _props$width, _ref4, _props$height; | ||
| var _this = _possibleConstructorReturn(this, _Component.call(this, props)); | ||
| var _this; | ||
| _this = _Component.call(this, props) || this; | ||
| _this._dragStart = null; | ||
| _this._mouseDown = false; | ||
| _this._moveEvents = []; | ||
| _this._lastClick = null; | ||
| _this._lastTap = null; | ||
| _this._lastWheel = null; | ||
| _this._touchStartPixel = null; | ||
| _this._touchStartMidPoint = null; | ||
| _this._touchStartDistance = null; | ||
| _this._secondTouchEnd = null; | ||
| _this._warningClearTimeout = null; | ||
| _this._isAnimating = false; | ||
| _this._animationStart = null; | ||
| _this._animationEnd = null; | ||
| _this._zoomStart = null; | ||
| _this._centerTarget = null; | ||
| _this._zoomTarget = null; | ||
| _this._zoomAround = null; | ||
| _this._animFrame = null; | ||
| _this._boundsSynced = false; | ||
| _this._minMaxCache = null; | ||
| _this.updateWidthHeight = function () { | ||
@@ -141,14 +178,20 @@ if (_this._containerRef) { | ||
| }); | ||
| return true; | ||
| } | ||
| } | ||
| return false; | ||
| }; | ||
| _this.wa = function (e, t, o) { | ||
| return window.addEventListener(e, t, o); | ||
| _this.wa = function () { | ||
| var _window; | ||
| return (_window = window).addEventListener.apply(_window, arguments); | ||
| }; | ||
| _this.wr = function (e, t) { | ||
| return window.removeEventListener(e, t); | ||
| _this.wr = function () { | ||
| var _window2; | ||
| return (_window2 = window).removeEventListener.apply(_window2, arguments); | ||
| }; | ||
@@ -158,3 +201,5 @@ | ||
| _this.wa('mousedown', _this.handleMouseDown); | ||
| _this.wa('mouseup', _this.handleMouseUp); | ||
| _this.wa('mousemove', _this.handleMouseMove); | ||
@@ -164,5 +209,13 @@ }; | ||
| _this.bindTouchEvents = function () { | ||
| _this.wa('touchstart', _this.handleTouchStart, { passive: false }); | ||
| _this.wa('touchmove', _this.handleTouchMove, { passive: false }); | ||
| _this.wa('touchend', _this.handleTouchEnd, { passive: false }); | ||
| _this.wa('touchstart', _this.handleTouchStart, { | ||
| passive: false | ||
| }); | ||
| _this.wa('touchmove', _this.handleTouchMove, { | ||
| passive: false | ||
| }); | ||
| _this.wa('touchend', _this.handleTouchEnd, { | ||
| passive: false | ||
| }); | ||
| }; | ||
@@ -172,3 +225,5 @@ | ||
| _this.wr('mousedown', _this.handleMouseDown); | ||
| _this.wr('mouseup', _this.handleMouseUp); | ||
| _this.wr('mousemove', _this.handleMouseMove); | ||
@@ -179,3 +234,5 @@ }; | ||
| _this.wr('touchstart', _this.handleTouchStart); | ||
| _this.wr('touchmove', _this.handleTouchMove); | ||
| _this.wr('touchend', _this.handleTouchEnd); | ||
@@ -194,3 +251,5 @@ }; | ||
| if (_this._containerRef) { | ||
| _this._containerRef.addEventListener('wheel', _this.handleWheel, { passive: false }); | ||
| _this._containerRef.addEventListener('wheel', _this.handleWheel, { | ||
| passive: false | ||
| }); | ||
| } | ||
@@ -205,8 +264,16 @@ }; | ||
| _this.setCenterZoomTarget = function (center, zoom) { | ||
| var fromProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; | ||
| var zoomAround = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null; | ||
| var animationDuration = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : ANIMATION_TIME; | ||
| _this.setCenterZoomTarget = function (center, zoom, fromProps, zoomAround, animationDuration) { | ||
| if (fromProps === void 0) { | ||
| fromProps = false; | ||
| } | ||
| if (_this.props.animate && (!fromProps || _this.distanceInScreens(center, zoom, _this.state.center, _this.state.zoom) <= _this.props.animateMaxScreens)) { | ||
| if (zoomAround === void 0) { | ||
| zoomAround = null; | ||
| } | ||
| if (animationDuration === void 0) { | ||
| animationDuration = ANIMATION_TIME; | ||
| } | ||
| if (center && _this.props.animate && (!fromProps || _this.distanceInScreens(center, zoom, _this.state.center, _this.state.zoom) <= _this.props.animateMaxScreens)) { | ||
| if (_this._isAnimating) { | ||
@@ -225,2 +292,3 @@ cancelAnimationFrame(_this._animFrame); | ||
| _this._zoomStart = _this._lastZoom; | ||
| _this.onAnimationStart(); | ||
@@ -239,4 +307,4 @@ } | ||
| } | ||
| _this._zoomTarget = zoom; | ||
| _this._animFrame = requestAnimationFrame(_this.animate); | ||
@@ -248,5 +316,6 @@ } else { | ||
| var _center = _this.calculateZoomCenter(_this._lastCenter, zoomAround, _this._lastZoom, zoom); | ||
| _this.setCenterZoom(_center, zoom, fromProps); | ||
| } else { | ||
| _this.setCenterZoom(center, zoom, fromProps); | ||
| _this.setCenterZoom(center || _this.state.center, zoom, fromProps); | ||
| } | ||
@@ -259,18 +328,17 @@ } | ||
| width = _this$state.width, | ||
| height = _this$state.height; | ||
| height = _this$state.height; // distance in pixels at the current zoom level | ||
| // distance in pixels at the current zoom level | ||
| var l1 = _this.latLngToPixel(center, center, zoom); | ||
| var l2 = _this.latLngToPixel(centerTarget, center, zoom); | ||
| // distance in pixels at the target zoom level (could be the same) | ||
| var l2 = _this.latLngToPixel(centerTarget, center, zoom); // distance in pixels at the target zoom level (could be the same) | ||
| var z1 = _this.latLngToPixel(center, center, zoomTarget); | ||
| var z2 = _this.latLngToPixel(centerTarget, center, zoomTarget); | ||
| // take the average between the two and divide by width or height to get the distance multiplier in screens | ||
| var z2 = _this.latLngToPixel(centerTarget, center, zoomTarget); // take the average between the two and divide by width or height to get the distance multiplier in screens | ||
| var w = (Math.abs(l1[0] - l2[0]) + Math.abs(z1[0] - z2[0])) / 2 / width; | ||
| var h = (Math.abs(l1[1] - l2[1]) + Math.abs(z1[1] - z2[1])) / 2 / height; | ||
| var h = (Math.abs(l1[1] - l2[1]) + Math.abs(z1[1] - z2[1])) / 2 / height; // return the distance | ||
| // return the distance | ||
| return Math.sqrt(w * w + h * h); | ||
@@ -280,6 +348,12 @@ }; | ||
| _this.animationStep = function (timestamp) { | ||
| if (!_this._animationEnd || !_this._animationStart || !_this._zoomTarget || !_this._zoomStart || !_this._centerStart || !_this._centerTarget) { | ||
| return { | ||
| centerStep: _this.state.center, | ||
| zoomStep: _this.state.zoom | ||
| }; | ||
| } | ||
| var length = _this._animationEnd - _this._animationStart; | ||
| var progress = Math.max(timestamp - _this._animationStart, 0); | ||
| var percentage = easeOutQuad(progress / length); | ||
| var zoomDiff = (_this._zoomTarget - _this._zoomStart) * percentage; | ||
@@ -291,7 +365,12 @@ var zoomStep = _this._zoomStart + zoomDiff; | ||
| return { centerStep: centerStep, zoomStep: zoomStep }; | ||
| return { | ||
| centerStep: centerStep, | ||
| zoomStep: zoomStep | ||
| }; | ||
| } else { | ||
| var _centerStep = [_this._centerStart[0] + (_this._centerTarget[0] - _this._centerStart[0]) * percentage, _this._centerStart[1] + (_this._centerTarget[1] - _this._centerStart[1]) * percentage]; | ||
| return { centerStep: _centerStep, zoomStep: zoomStep }; | ||
| return { | ||
| centerStep: _centerStep, | ||
| zoomStep: zoomStep | ||
| }; | ||
| } | ||
@@ -301,5 +380,7 @@ }; | ||
| _this.animate = function (timestamp) { | ||
| if (timestamp >= _this._animationEnd) { | ||
| if (!_this._animationEnd || timestamp >= _this._animationEnd) { | ||
| _this._isAnimating = false; | ||
| _this.setCenterZoom(_this._centerTarget, _this._zoomTarget, true); | ||
| _this.onAnimationStop(); | ||
@@ -312,2 +393,3 @@ } else { | ||
| _this.setCenterZoom(centerStep, zoomStep); | ||
| _this._animFrame = requestAnimationFrame(_this.animate); | ||
@@ -320,3 +402,5 @@ } | ||
| _this._isAnimating = false; | ||
| _this.onAnimationStop(); | ||
| cancelAnimationFrame(_this._animFrame); | ||
@@ -330,3 +414,3 @@ } | ||
| return [Math.max(Math.min(isNaN(center[0]) ? _this.state.center[0] : center[0], minMax[1]), minMax[0]), Math.max(Math.min(isNaN(center[1]) ? _this.state.center[1] : center[1], minMax[3]), minMax[2])]; | ||
| return [Math.max(Math.min(!center || isNaN(center[0]) ? _this.state.center[0] : center[0], minMax[1]), minMax[0]), Math.max(Math.min(!center || isNaN(center[1]) ? _this.state.center[1] : center[1], minMax[3]), minMax[2])]; | ||
| }; | ||
@@ -340,12 +424,22 @@ | ||
| _this.props.onAnimationStop && _this.props.onAnimationStop(); | ||
| }; | ||
| }; // main logic when changing coordinates | ||
| _this.setCenterZoom = function (center, zoom) { | ||
| var animationEnded = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; | ||
| _this.setCenterZoom = function (center, zoom, animationEnded) { | ||
| if (animationEnded === void 0) { | ||
| animationEnded = false; | ||
| } | ||
| var limitedCenter = _this.limitCenterAtZoom(center, zoom); | ||
| if (Math.round(_this.state.zoom) !== Math.round(zoom)) { | ||
| if (zoom && Math.round(_this.state.zoom) !== Math.round(zoom)) { | ||
| var tileValues = _this.tileValues(_this.state); | ||
| var nextValues = _this.tileValues({ center: limitedCenter, zoom: zoom, width: _this.state.width, height: _this.state.height }); | ||
| var nextValues = _this.tileValues({ | ||
| center: limitedCenter, | ||
| zoom: zoom, | ||
| width: _this.state.width, | ||
| height: _this.state.height | ||
| }); | ||
| var oldTiles = _this.state.oldTiles; | ||
@@ -363,3 +457,3 @@ | ||
| for (var y = nextValues.tileMinY; y <= nextValues.tileMaxY; y++) { | ||
| var key = x + '-' + y + '-' + nextValues.roundedZoom; | ||
| var key = x + "-" + y + "-" + nextValues.roundedZoom; | ||
| loadTracker[key] = false; | ||
@@ -372,9 +466,14 @@ } | ||
| _this.setState({ center: limitedCenter, zoom: zoom }, NOOP); | ||
| _this.setState({ | ||
| center: limitedCenter, | ||
| zoom: zoom || _this.state.zoom | ||
| }, NOOP); | ||
| var maybeZoom = _this.props.zoom ? _this.props.zoom : _this._lastZoom; | ||
| var maybeCenter = _this.props.center ? _this.props.center : _this._lastCenter; | ||
| if (animationEnded || Math.abs(maybeZoom - zoom) > 0.001 || Math.abs(maybeCenter[0] - limitedCenter[0]) > 0.00001 || Math.abs(maybeCenter[1] - limitedCenter[1]) > 0.00001) { | ||
| if (zoom && (animationEnded || Math.abs(maybeZoom - zoom) > 0.001 || Math.abs(maybeCenter[0] - limitedCenter[0]) > 0.00001 || Math.abs(maybeCenter[1] - limitedCenter[1]) > 0.00001)) { | ||
| _this._lastZoom = zoom; | ||
| _this._lastCenter = [].concat(limitedCenter); | ||
| _this.syncToProps(limitedCenter, zoom); | ||
@@ -393,3 +492,2 @@ } | ||
| if (_this._minMaxCache && _this._minMaxCache[0] === zoom && _this._minMaxCache[1] === width && _this._minMaxCache[2] === height) { | ||
@@ -400,13 +498,12 @@ return _this._minMaxCache[3]; | ||
| var pixelsAtZoom = Math.pow(2, zoom) * 256; | ||
| var minLng = width > pixelsAtZoom ? 0 : tile2lng(width / 512, zoom); // x | ||
| var minLng = width > pixelsAtZoom ? 0 : tile2lng(width / 512, zoom); // x | ||
| var minLat = height > pixelsAtZoom ? 0 : tile2lat(Math.pow(2, zoom) - height / 512, zoom); // y | ||
| var maxLng = width > pixelsAtZoom ? 0 : tile2lng(Math.pow(2, zoom) - width / 512, zoom); // x | ||
| var maxLat = height > pixelsAtZoom ? 0 : tile2lat(height / 512, zoom); // y | ||
| var minMax = [minLat, maxLat, minLng, maxLng]; | ||
| _this._minMaxCache = [zoom, width, height, minMax]; | ||
| return minMax; | ||
@@ -418,9 +515,10 @@ }; | ||
| _this._loadTracker[key] = true; | ||
| var unloadedCount = Object.keys(_this._loadTracker).filter(function (k) { | ||
| return !_this._loadTracker[k]; | ||
| var unloadedCount = Object.values(_this._loadTracker).filter(function (v) { | ||
| return !v; | ||
| }).length; | ||
| if (unloadedCount === 0) { | ||
| _this.setState({ oldTiles: [] }, NOOP); | ||
| _this.setState({ | ||
| oldTiles: [] | ||
| }, NOOP); | ||
| } | ||
@@ -434,5 +532,7 @@ } | ||
| } | ||
| if (event.target && parentHasClass(event.target, 'pigeon-drag-block')) { | ||
| return; | ||
| } | ||
| if (event.touches.length === 1) { | ||
@@ -450,11 +550,14 @@ var touch = event.touches[0]; | ||
| event.preventDefault(); | ||
| var latLngNow = _this.pixelToLatLng(_this._touchStartPixel[0]); | ||
| _this.setCenterZoomTarget(null, Math.max(_this.props.minZoom, Math.min(_this.state.zoom + 1, _this.props.maxZoom)), false, latLngNow); | ||
| } else { | ||
| _this._lastTap = performanceNow(); | ||
| _this.trackMoveEvents(pixel); | ||
| } | ||
| } | ||
| } | ||
| // added second finger and first one was in the area | ||
| } // added second finger and first one was in the area | ||
| } else if (event.touches.length === 2 && _this._touchStartPixel) { | ||
@@ -471,3 +574,2 @@ event.preventDefault(); | ||
| var t2 = getMousePixel(_this._containerRef, event.touches[1]); | ||
| _this._touchStartPixel = [t1, t2]; | ||
@@ -484,2 +586,3 @@ _this._touchStartMidPoint = [(t1[0] + t2[0]) / 2, (t1[1] + t2[1]) / 2]; | ||
| } | ||
| if (event.touches.length === 1 && _this._touchStartPixel) { | ||
@@ -495,2 +598,3 @@ var touch = event.touches[0]; | ||
| event.preventDefault(); | ||
| _this.trackMoveEvents(pixel); | ||
@@ -502,3 +606,3 @@ | ||
| } | ||
| } else if (event.touches.length === 2 && _this._touchStartPixel) { | ||
| } else if (event.touches.length === 2 && _this._touchStartPixel && _this._touchStartMidPoint && _this._touchStartDistance) { | ||
| var _this$state3 = _this.state, | ||
@@ -508,17 +612,10 @@ width = _this$state3.width, | ||
| zoom = _this$state3.zoom; | ||
| event.preventDefault(); | ||
| var t1 = getMousePixel(_this._containerRef, event.touches[0]); | ||
| var t2 = getMousePixel(_this._containerRef, event.touches[1]); | ||
| var midPoint = [(t1[0] + t2[0]) / 2, (t1[1] + t2[1]) / 2]; | ||
| var midPointDiff = [midPoint[0] - _this._touchStartMidPoint[0], midPoint[1] - _this._touchStartMidPoint[1]]; | ||
| var distance = Math.sqrt(Math.pow(t1[0] - t2[0], 2) + Math.pow(t1[1] - t2[1], 2)); | ||
| var zoomDelta = Math.max(_this.props.minZoom, Math.min(_this.props.maxZoom, zoom + Math.log2(distance / _this._touchStartDistance))) - zoom; | ||
| var scale = Math.pow(2, zoomDelta); | ||
| var centerDiffDiff = [(width / 2 - midPoint[0]) * (scale - 1), (height / 2 - midPoint[1]) * (scale - 1)]; | ||
@@ -538,2 +635,3 @@ | ||
| } | ||
| if (_this._touchStartPixel) { | ||
@@ -565,2 +663,3 @@ var _this$props = _this.props, | ||
| event.preventDefault(); | ||
| _this.throwAfterMoving(newTouchPixel, center, zoom); | ||
@@ -576,5 +675,5 @@ } | ||
| var touch = getMousePixel(_this._containerRef, event.touches[0]); | ||
| _this._secondTouchEnd = performanceNow(); | ||
| _this._touchStartPixel = [touch]; | ||
| _this.trackMoveEvents(touch); | ||
@@ -585,6 +684,4 @@ | ||
| var latLng = _this._touchStartMidPoint ? _this.pixelToLatLng(_this._touchStartMidPoint) : _this.state.center; | ||
| var zoomTarget; // do not zoom up/down if we must drag with 2 fingers and didn't change the zoom level | ||
| var zoomTarget = void 0; | ||
| // do not zoom up/down if we must drag with 2 fingers and didn't change the zoom level | ||
| if (twoFingerDrag && Math.round(_this.state.zoom) === Math.round(_this.state.zoom + zoomDelta)) { | ||
@@ -595,2 +692,3 @@ zoomTarget = Math.round(_this.state.zoom); | ||
| } | ||
| var _zoom = Math.max(minZoom, Math.min(zoomTarget, maxZoom)); | ||
@@ -608,2 +706,3 @@ | ||
| } | ||
| var pixel = getMousePixel(_this._containerRef, event); | ||
@@ -613,2 +712,3 @@ | ||
| _this.stopAnimating(); | ||
| event.preventDefault(); | ||
@@ -618,8 +718,9 @@ | ||
| var latLngNow = _this.pixelToLatLng(_this._mousePosition || pixel); | ||
| _this.setCenterZoomTarget(null, Math.max(_this.props.minZoom, Math.min(_this.state.zoom + 1, _this.props.maxZoom)), false, latLngNow); | ||
| } else { | ||
| _this._lastClick = performanceNow(); | ||
| _this._mouseDown = true; | ||
| _this._dragStart = pixel; | ||
| _this.trackMoveEvents(pixel); | ||
@@ -634,2 +735,3 @@ } | ||
| } | ||
| _this._mousePosition = getMousePixel(_this._containerRef, event); | ||
@@ -639,2 +741,3 @@ | ||
| _this.trackMoveEvents(_this._mousePosition); | ||
| _this.setState({ | ||
@@ -651,8 +754,7 @@ pixelDelta: [_this._mousePosition[0] - _this._dragStart[0], _this._mousePosition[1] - _this._dragStart[1]] | ||
| } | ||
| var pixelDelta = _this.state.pixelDelta; | ||
| if (_this._mouseDown) { | ||
| _this._mouseDown = false; | ||
| var pixel = getMousePixel(_this._containerRef, event); | ||
@@ -662,4 +764,12 @@ | ||
| var latLng = _this.pixelToLatLng(pixel); | ||
| _this.props.onClick({ event: event, latLng: latLng, pixel: pixel }); | ||
| _this.setState({ pixelDelta: null }, NOOP); | ||
| _this.props.onClick({ | ||
| event: event, | ||
| latLng: latLng, | ||
| pixel: pixel | ||
| }); | ||
| _this.setState({ | ||
| pixelDelta: undefined | ||
| }, NOOP); | ||
| } else { | ||
@@ -673,4 +783,5 @@ var _this$sendDeltaChange2 = _this.sendDeltaChange(), | ||
| } | ||
| }; | ||
| }; // https://www.bennadel.com/blog/1856-using-jquery-s-animate-step-callback-function-to-create-custom-animations.htm | ||
| _this.stopTrackingMoveEvents = function () { | ||
@@ -684,3 +795,7 @@ _this._moveEvents = []; | ||
| if (_this._moveEvents.length === 0 || timestamp - _this._moveEvents[_this._moveEvents.length - 1].timestamp > 40) { | ||
| _this._moveEvents.push({ timestamp: timestamp, coords: coords }); | ||
| _this._moveEvents.push({ | ||
| timestamp: timestamp, | ||
| coords: coords | ||
| }); | ||
| if (_this._moveEvents.length > 2) { | ||
@@ -697,5 +812,4 @@ _this._moveEvents.shift(); | ||
| var animate = _this.props.animate; | ||
| var timestamp = performanceNow(); | ||
| var timestamp = performanceNow(); | ||
| var lastEvent = _this._moveEvents.shift(); | ||
@@ -705,5 +819,3 @@ | ||
| var deltaMs = Math.max(timestamp - lastEvent.timestamp, 1); | ||
| var delta = [(coords[0] - lastEvent.coords[0]) / deltaMs * 120, (coords[1] - lastEvent.coords[1]) / deltaMs * 120]; | ||
| var distance = Math.sqrt(delta[0] * delta[0] + delta[1] * delta[1]); | ||
@@ -713,5 +825,3 @@ | ||
| var diagonal = Math.sqrt(width * width + height * height); | ||
| var throwTime = DIAGONAL_THROW_TIME * distance / diagonal; | ||
| var lng = tile2lng(lng2tile(center[1], zoom) - delta[0] / 256.0, zoom); | ||
@@ -733,4 +843,2 @@ var lat = tile2lat(lat2tile(center[0], zoom) - delta[1] / 256.0, zoom); | ||
| zoomDelta = _this$state5.zoomDelta; | ||
| var lat = center[0]; | ||
@@ -742,2 +850,3 @@ var lng = center[1]; | ||
| lat = tile2lat(lat2tile(center[0], zoom + zoomDelta) - (pixelDelta ? pixelDelta[1] / 256.0 : 0), zoom + zoomDelta); | ||
| _this.setCenterZoom([lat, lng], zoom + zoomDelta); | ||
@@ -747,3 +856,3 @@ } | ||
| _this.setState({ | ||
| pixelDelta: null, | ||
| pixelDelta: undefined, | ||
| zoomDelta: 0 | ||
@@ -758,10 +867,14 @@ }, NOOP); | ||
| _this.getBounds = function () { | ||
| var center = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.center; | ||
| var zoom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.zoomPlusDelta(); | ||
| _this.getBounds = function (center, zoom) { | ||
| if (center === void 0) { | ||
| center = _this.state.center; | ||
| } | ||
| if (zoom === void 0) { | ||
| zoom = _this.zoomPlusDelta(); | ||
| } | ||
| var _this$state6 = _this.state, | ||
| width = _this$state6.width, | ||
| height = _this$state6.height; | ||
| return { | ||
@@ -773,13 +886,22 @@ ne: _this.pixelToLatLng([width - 1, 0], center, zoom), | ||
| _this.syncToProps = function () { | ||
| var center = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.center; | ||
| var zoom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.state.zoom; | ||
| _this.syncToProps = function (center, zoom) { | ||
| if (center === void 0) { | ||
| center = _this.state.center; | ||
| } | ||
| if (zoom === void 0) { | ||
| zoom = _this.state.zoom; | ||
| } | ||
| var onBoundsChanged = _this.props.onBoundsChanged; | ||
| if (onBoundsChanged) { | ||
| var bounds = _this.getBounds(center, zoom); | ||
| onBoundsChanged({ center: center, zoom: zoom, bounds: bounds, initial: !_this._boundsSynced }); | ||
| onBoundsChanged({ | ||
| center: center, | ||
| zoom: zoom, | ||
| bounds: bounds, | ||
| initial: !_this._boundsSynced | ||
| }); | ||
| _this._boundsSynced = true; | ||
@@ -796,3 +918,2 @@ } | ||
| if (!mouseEvents) { | ||
@@ -804,3 +925,2 @@ return; | ||
| event.preventDefault(); | ||
| var addToZoom = -event.deltaY / SCROLL_PIXELS_FOR_ZOOM_LEVEL; | ||
@@ -810,2 +930,3 @@ | ||
| var stillToAdd = _this._zoomTarget - _this.state.zoom; | ||
| _this.zoomAroundMouse(addToZoom + stillToAdd, event); | ||
@@ -818,2 +939,3 @@ } else { | ||
| _this._lastWheel = performanceNow(); | ||
| _this.zoomAroundMouse(addToZoom, event); | ||
@@ -830,3 +952,6 @@ } | ||
| if (!_this.state.showWarning || _this.state.warningType !== warningType) { | ||
| _this.setState({ showWarning: true, warningType: warningType }); | ||
| _this.setState({ | ||
| showWarning: true, | ||
| warningType: warningType | ||
| }); | ||
| } | ||
@@ -837,2 +962,3 @@ | ||
| } | ||
| _this._warningClearTimeout = window.setTimeout(_this.clearWarning, WARNING_DISPLAY_TIMEOUT); | ||
@@ -843,3 +969,5 @@ }; | ||
| if (_this.state.showWarning) { | ||
| _this.setState({ showWarning: false }); | ||
| _this.setState({ | ||
| showWarning: false | ||
| }); | ||
| } | ||
@@ -852,2 +980,3 @@ }; | ||
| } | ||
| var zoom = _this.state.zoom; | ||
@@ -858,4 +987,2 @@ var _this$props3 = _this.props, | ||
| zoomSnap = _this$props3.zoomSnap; | ||
| _this._mousePosition = getMousePixel(_this._containerRef, event); | ||
@@ -870,10 +997,13 @@ | ||
| var zoomTarget = zoom + zoomDiff; | ||
| if (zoomSnap) { | ||
| zoomTarget = zoomDiff < 0 ? Math.floor(zoomTarget) : Math.ceil(zoomTarget); | ||
| } | ||
| zoomTarget = Math.max(minZoom, Math.min(zoomTarget, maxZoom)); | ||
| _this.setCenterZoomTarget(null, zoomTarget, false, latLngNow); | ||
| }; | ||
| }; // tools | ||
| _this.zoomPlusDelta = function () { | ||
@@ -883,5 +1013,11 @@ return _this.state.zoom + _this.state.zoomDelta; | ||
| _this.pixelToLatLng = function (pixel) { | ||
| var center = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.state.center; | ||
| var zoom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _this.zoomPlusDelta(); | ||
| _this.pixelToLatLng = function (pixel, center, zoom) { | ||
| if (center === void 0) { | ||
| center = _this.state.center; | ||
| } | ||
| if (zoom === void 0) { | ||
| zoom = _this.zoomPlusDelta(); | ||
| } | ||
| var _this$state7 = _this.state, | ||
@@ -891,15 +1027,17 @@ width = _this$state7.width, | ||
| pixelDelta = _this$state7.pixelDelta; | ||
| var pointDiff = [(pixel[0] - width / 2 - (pixelDelta ? pixelDelta[0] : 0)) / 256.0, (pixel[1] - height / 2 - (pixelDelta ? pixelDelta[1] : 0)) / 256.0]; | ||
| var tileX = lng2tile(center[1], zoom) + pointDiff[0]; | ||
| var tileY = lat2tile(center[0], zoom) + pointDiff[1]; | ||
| return [Math.max(absoluteMinMax[0], Math.min(absoluteMinMax[1], tile2lat(tileY, zoom))), Math.max(absoluteMinMax[2], Math.min(absoluteMinMax[3], tile2lng(tileX, zoom)))]; | ||
| }; | ||
| _this.latLngToPixel = function (latLng) { | ||
| var center = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.state.center; | ||
| var zoom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _this.zoomPlusDelta(); | ||
| _this.latLngToPixel = function (latLng, center, zoom) { | ||
| if (center === void 0) { | ||
| center = _this.state.center; | ||
| } | ||
| if (zoom === void 0) { | ||
| zoom = _this.zoomPlusDelta(); | ||
| } | ||
| var _this$state8 = _this.state, | ||
@@ -909,10 +1047,6 @@ width = _this$state8.width, | ||
| pixelDelta = _this$state8.pixelDelta; | ||
| var tileCenterX = lng2tile(center[1], zoom); | ||
| var tileCenterY = lat2tile(center[0], zoom); | ||
| var tileX = lng2tile(latLng[1], zoom); | ||
| var tileY = lat2tile(latLng[0], zoom); | ||
| return [(tileX - tileCenterX) * 256.0 + width / 2 + (pixelDelta ? pixelDelta[0] : 0), (tileY - tileCenterY) * 256.0 + height / 2 + (pixelDelta ? pixelDelta[1] : 0)]; | ||
@@ -926,4 +1060,4 @@ }; | ||
| var pixelBefore = _this.latLngToPixel(coords, center, oldZoom); | ||
| var pixelBefore = _this.latLngToPixel(coords, center, oldZoom); | ||
| var pixelAfter = _this.latLngToPixel(coords, center, newZoom); | ||
@@ -934,4 +1068,5 @@ | ||
| return _this.limitCenterAtZoom(newCenter, newZoom); | ||
| }; | ||
| }; // ref | ||
| _this.setRef = function (dom) { | ||
@@ -941,35 +1076,17 @@ _this._containerRef = dom; | ||
| _this.syncToProps = debounce(_this.syncToProps, DEBOUNCE_DELAY); | ||
| _this._mousePosition = null; | ||
| _this._dragStart = null; | ||
| _this._mouseDown = false; | ||
| _this._moveEvents = []; | ||
| _this._lastClick = null; | ||
| _this._lastTap = null; | ||
| _this._touchStartPixel = null; | ||
| _this._isAnimating = false; | ||
| _this._animationStart = null; | ||
| _this._animationEnd = null; | ||
| _this._centerTarget = null; | ||
| _this._zoomTarget = null; | ||
| // When users are using uncontrolled components we have to keep this | ||
| _this.syncToProps = debounce(_this.syncToProps, DEBOUNCE_DELAY); // When users are using uncontrolled components we have to keep this | ||
| // so we can know if we should call onBoundsChanged | ||
| _this._lastZoom = props.defaultZoom ? props.defaultZoom : props.zoom; | ||
| _this._lastCenter = props.defaultCenter ? props.defaultCenter : props.center; | ||
| _this._boundsSynced = false; | ||
| _this._minMaxCache = null; | ||
| _this._lastZoom = (_ref = (_props$defaultZoom = props.defaultZoom) !== null && _props$defaultZoom !== void 0 ? _props$defaultZoom : props.zoom) !== null && _ref !== void 0 ? _ref : 14; | ||
| _this._lastCenter = (_ref2 = (_props$defaultCenter = props.defaultCenter) !== null && _props$defaultCenter !== void 0 ? _props$defaultCenter : props.center) !== null && _ref2 !== void 0 ? _ref2 : [0, 0]; | ||
| _this.state = { | ||
| zoom: _this._lastZoom, | ||
| center: _this._lastCenter, | ||
| width: props.width || props.defaultWidth, | ||
| height: props.height || props.defaultHeight, | ||
| width: (_ref3 = (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : props.defaultWidth) !== null && _ref3 !== void 0 ? _ref3 : -1, | ||
| height: (_ref4 = (_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : props.defaultHeight) !== null && _ref4 !== void 0 ? _ref4 : -1, | ||
| zoomDelta: 0, | ||
| pixelDelta: null, | ||
| pixelDelta: undefined, | ||
| oldTiles: [], | ||
| showWarning: false, | ||
| warningType: null | ||
| warningType: undefined | ||
| }; | ||
@@ -979,3 +1096,5 @@ return _this; | ||
| Map.prototype.componentDidMount = function componentDidMount() { | ||
| var _proto = Map.prototype; | ||
| _proto.componentDidMount = function componentDidMount() { | ||
| this.props.mouseEvents && this.bindMouseEvents(); | ||
@@ -990,2 +1109,3 @@ this.props.touchEvents && this.bindTouchEvents(); | ||
| } | ||
| this.bindResizeEvent(); | ||
@@ -998,3 +1118,3 @@ this.bindWheelEvent(); | ||
| Map.prototype.componentWillUnmount = function componentWillUnmount() { | ||
| _proto.componentWillUnmount = function componentWillUnmount() { | ||
| this.props.mouseEvents && this.unbindMouseEvents(); | ||
@@ -1009,3 +1129,5 @@ this.props.touchEvents && this.unbindTouchEvents(); | ||
| Map.prototype.componentDidUpdate = function componentDidUpdate(prevProps) { | ||
| _proto.componentDidUpdate = function componentDidUpdate(prevProps) { | ||
| var _prevProps$center; | ||
| if (this.props.mouseEvents !== prevProps.mouseEvents) { | ||
@@ -1020,7 +1142,11 @@ this.props.mouseEvents ? this.bindMouseEvents() : this.unbindMouseEvents(); | ||
| if (this.props.width && this.props.width !== prevProps.width) { | ||
| this.setState({ width: this.props.width }); | ||
| this.setState({ | ||
| width: this.props.width | ||
| }); | ||
| } | ||
| if (this.props.height && this.props.height !== prevProps.height) { | ||
| this.setState({ height: this.props.height }); | ||
| this.setState({ | ||
| height: this.props.height | ||
| }); | ||
| } | ||
@@ -1032,3 +1158,4 @@ | ||
| } | ||
| if ((!this.props.center || this.props.center[0] === prevProps.center[0] && this.props.center[1] === prevProps.center[1]) && this.props.zoom === prevProps.zoom) { | ||
| if ((!this.props.center || this.props.center[0] === (prevProps === null || prevProps === void 0 ? void 0 : (_prevProps$center = prevProps.center) === null || _prevProps$center === void 0 ? void 0 : _prevProps$center[0]) && this.props.center[1] === prevProps.center[1]) && this.props.zoom === prevProps.zoom) { | ||
| // if the user is controlling either zoom or center but nothing changed | ||
@@ -1042,19 +1169,20 @@ // we don't have to update aswell | ||
| var nextCenter = this.props.center || currentCenter; // prevent the rare null errors | ||
| var nextZoom = this.props.zoom || currentZoom; | ||
| if (currentCenter && currentZoom) { | ||
| var _this$props$center, _this$props$zoom; | ||
| if (Math.abs(nextZoom - currentZoom) > 0.001 || Math.abs(nextCenter[0] - currentCenter[0]) > 0.0001 || Math.abs(nextCenter[1] - currentCenter[1]) > 0.0001) { | ||
| this.setCenterZoomTarget(nextCenter, nextZoom, true); | ||
| var nextCenter = (_this$props$center = this.props.center) !== null && _this$props$center !== void 0 ? _this$props$center : currentCenter; // prevent the rare null errors | ||
| var nextZoom = (_this$props$zoom = this.props.zoom) !== null && _this$props$zoom !== void 0 ? _this$props$zoom : currentZoom; | ||
| if (Math.abs(nextZoom - currentZoom) > 0.001 || Math.abs(nextCenter[0] - currentCenter[0]) > 0.0001 || Math.abs(nextCenter[1] - currentCenter[1]) > 0.0001) { | ||
| this.setCenterZoomTarget(nextCenter, nextZoom, true); | ||
| } | ||
| } | ||
| }; | ||
| // main logic when changing coordinates | ||
| _proto.coordsInside = function coordsInside(pixel) { | ||
| var _this$state10 = this.state, | ||
| width = _this$state10.width, | ||
| height = _this$state10.height; | ||
| Map.prototype.coordsInside = function coordsInside(pixel) { | ||
| var _state = this.state, | ||
| width = _state.width, | ||
| height = _state.height; | ||
| if (pixel[0] < 0 || pixel[1] < 0 || pixel[0] >= width || pixel[1] >= height) { | ||
@@ -1065,45 +1193,33 @@ return false; | ||
| var parent = this._containerRef; | ||
| var pos = parentPosition(parent); | ||
| var element = document.elementFromPoint(pixel[0] + pos.x, pixel[1] + pos.y); | ||
| return parent === element || parent.contains(element); | ||
| }; | ||
| if (parent) { | ||
| var pos = parentPosition(parent); | ||
| var element = document.elementFromPoint(pixel[0] + pos.x, pixel[1] + pos.y); | ||
| return parent === element || parent.contains(element); | ||
| } else { | ||
| return false; | ||
| } | ||
| } // data to display the tiles | ||
| ; | ||
| // https://www.bennadel.com/blog/1856-using-jquery-s-animate-step-callback-function-to-create-custom-animations.htm | ||
| // tools | ||
| // ref | ||
| // data to display the tiles | ||
| Map.prototype.tileValues = function tileValues(state) { | ||
| var center = state.center, | ||
| zoom = state.zoom, | ||
| pixelDelta = state.pixelDelta, | ||
| zoomDelta = state.zoomDelta, | ||
| width = state.width, | ||
| height = state.height; | ||
| _proto.tileValues = function tileValues(_ref5) { | ||
| var center = _ref5.center, | ||
| zoom = _ref5.zoom, | ||
| pixelDelta = _ref5.pixelDelta, | ||
| zoomDelta = _ref5.zoomDelta, | ||
| width = _ref5.width, | ||
| height = _ref5.height; | ||
| var roundedZoom = Math.round(zoom + (zoomDelta || 0)); | ||
| var zoomDiff = zoom + (zoomDelta || 0) - roundedZoom; | ||
| var scale = Math.pow(2, zoomDiff); | ||
| var scaleWidth = width / scale; | ||
| var scaleHeight = height / scale; | ||
| var tileCenterX = lng2tile(center[1], roundedZoom) - (pixelDelta ? pixelDelta[0] / 256.0 / scale : 0); | ||
| var tileCenterY = lat2tile(center[0], roundedZoom) - (pixelDelta ? pixelDelta[1] / 256.0 / scale : 0); | ||
| var halfWidth = scaleWidth / 2 / 256.0; | ||
| var halfHeight = scaleHeight / 2 / 256.0; | ||
| var tileMinX = Math.floor(tileCenterX - halfWidth); | ||
| var tileMaxX = Math.floor(tileCenterX + halfWidth); | ||
| var tileMinY = Math.floor(tileCenterY - halfHeight); | ||
| var tileMaxY = Math.floor(tileCenterY + halfHeight); | ||
| return { | ||
@@ -1122,7 +1238,6 @@ tileMinX: tileMinX, | ||
| }; | ||
| }; | ||
| } // display the tiles | ||
| ; | ||
| // display the tiles | ||
| Map.prototype.renderTiles = function renderTiles() { | ||
| _proto.renderTiles = function renderTiles() { | ||
| var _this2 = this; | ||
@@ -1132,17 +1247,16 @@ | ||
| var dprs = this.props.dprs; | ||
| var mapUrl = this.props.provider || wikimedia; | ||
| var mapUrl = this.props.provider || stamenToner; | ||
| var _this$tileValues = this.tileValues(this.state), | ||
| tileMinX = _this$tileValues.tileMinX, | ||
| tileMaxX = _this$tileValues.tileMaxX, | ||
| tileMinY = _this$tileValues.tileMinY, | ||
| tileMaxY = _this$tileValues.tileMaxY, | ||
| tileCenterX = _this$tileValues.tileCenterX, | ||
| tileCenterY = _this$tileValues.tileCenterY, | ||
| roundedZoom = _this$tileValues.roundedZoom, | ||
| scaleWidth = _this$tileValues.scaleWidth, | ||
| scaleHeight = _this$tileValues.scaleHeight, | ||
| scale = _this$tileValues.scale; | ||
| var _tileValues = this.tileValues(this.state), | ||
| tileMinX = _tileValues.tileMinX, | ||
| tileMaxX = _tileValues.tileMaxX, | ||
| tileMinY = _tileValues.tileMinY, | ||
| tileMaxY = _tileValues.tileMaxY, | ||
| tileCenterX = _tileValues.tileCenterX, | ||
| tileCenterY = _tileValues.tileCenterY, | ||
| roundedZoom = _tileValues.roundedZoom, | ||
| scaleWidth = _tileValues.scaleWidth, | ||
| scaleHeight = _tileValues.scaleHeight, | ||
| scale = _tileValues.scale; | ||
| var tiles = []; | ||
@@ -1163,4 +1277,7 @@ | ||
| var _xMin = Math.max(old.tileMinX, 0); | ||
| var _yMin = Math.max(old.tileMinY, 0); | ||
| var _xMax = Math.min(old.tileMaxX, Math.pow(2, old.roundedZoom) - 1); | ||
| var _yMax = Math.min(old.tileMaxY, Math.pow(2, old.roundedZoom) - 1); | ||
@@ -1171,3 +1288,3 @@ | ||
| tiles.push({ | ||
| key: x + '-' + y + '-' + old.roundedZoom, | ||
| key: x + "-" + y + "-" + old.roundedZoom, | ||
| url: mapUrl(x, y, old.roundedZoom), | ||
@@ -1190,9 +1307,9 @@ srcSet: srcSet(dprs, mapUrl, x, y, old.roundedZoom), | ||
| for (var _x13 = xMin; _x13 <= xMax; _x13++) { | ||
| for (var _x = xMin; _x <= xMax; _x++) { | ||
| for (var _y = yMin; _y <= yMax; _y++) { | ||
| tiles.push({ | ||
| key: _x13 + '-' + _y + '-' + roundedZoom, | ||
| url: mapUrl(_x13, _y, roundedZoom), | ||
| srcSet: srcSet(dprs, mapUrl, _x13, _y, roundedZoom), | ||
| left: (_x13 - tileMinX) * 256, | ||
| key: _x + "-" + _y + "-" + roundedZoom, | ||
| url: mapUrl(_x, _y, roundedZoom), | ||
| srcSet: srcSet(dprs, mapUrl, _x, _y, roundedZoom), | ||
| left: (_x - tileMinX) * 256, | ||
| top: (_y - tileMinY) * 256, | ||
@@ -1214,10 +1331,8 @@ width: 256, | ||
| willChange: 'transform', | ||
| transform: 'scale(' + scale + ', ' + scale + ')', | ||
| transform: "scale(" + scale + ", " + scale + ")", | ||
| transformOrigin: 'top left' | ||
| }; | ||
| var boxClassname = this.props.boxClassname || ''; | ||
| var left = -((tileCenterX - tileMinX) * 256 - scaleWidth / 2); | ||
| var top = -((tileCenterY - tileMinY) * 256 - scaleHeight / 2); | ||
| var tilesStyle = { | ||
@@ -1228,37 +1343,40 @@ position: 'absolute', | ||
| willChange: 'transform', | ||
| transform: 'translate(' + left + 'px, ' + top + 'px)' | ||
| transform: "translate(" + left + "px, " + top + "px)" | ||
| }; | ||
| return React__default.createElement( | ||
| 'div', | ||
| { style: boxStyle, className: boxClassname }, | ||
| React__default.createElement( | ||
| 'div', | ||
| { style: tilesStyle }, | ||
| tiles.map(function (tile) { | ||
| return React__default.createElement('img', { | ||
| key: tile.key, | ||
| src: tile.url, | ||
| srcSet: tile.srcSet, | ||
| width: tile.width, | ||
| height: tile.height, | ||
| loading: 'lazy', | ||
| onLoad: function onLoad() { | ||
| return _this2.imageLoaded(tile.key); | ||
| }, | ||
| style: { position: 'absolute', left: tile.left, top: tile.top, willChange: 'transform', transform: tile.transform, transformOrigin: 'top left', opacity: 1 } }); | ||
| }) | ||
| ) | ||
| ); | ||
| return /*#__PURE__*/React__default.createElement("div", { | ||
| style: boxStyle, | ||
| className: boxClassname | ||
| }, /*#__PURE__*/React__default.createElement("div", { | ||
| style: tilesStyle | ||
| }, tiles.map(function (tile) { | ||
| return /*#__PURE__*/React__default.createElement("img", { | ||
| key: tile.key, | ||
| src: tile.url, | ||
| srcSet: tile.srcSet, | ||
| width: tile.width, | ||
| height: tile.height, | ||
| onLoad: function onLoad() { | ||
| return _this2.imageLoaded(tile.key); | ||
| }, | ||
| style: { | ||
| position: 'absolute', | ||
| left: tile.left, | ||
| top: tile.top, | ||
| willChange: 'transform', | ||
| // TODO: check this | ||
| // transform: tile.transform, | ||
| transformOrigin: 'top left', | ||
| opacity: 1 | ||
| } | ||
| }); | ||
| }))); | ||
| }; | ||
| Map.prototype.renderOverlays = function renderOverlays() { | ||
| _proto.renderOverlays = function renderOverlays() { | ||
| var _this3 = this; | ||
| var _state2 = this.state, | ||
| width = _state2.width, | ||
| height = _state2.height, | ||
| center = _state2.center; | ||
| var _this$state11 = this.state, | ||
| width = _this$state11.width, | ||
| height = _this$state11.height, | ||
| center = _this$state11.center; | ||
| var mapState = { | ||
@@ -1271,3 +1389,2 @@ bounds: this.getBounds(), | ||
| }; | ||
| var childrenWithProps = React__default.Children.map(this.props.children, function (child) { | ||
@@ -1278,3 +1395,3 @@ if (!child) { | ||
| if (typeof child.type === 'string') { | ||
| if (! /*#__PURE__*/React__default.isValidElement(child)) { | ||
| return child; | ||
@@ -1288,6 +1405,5 @@ } | ||
| var c = _this3.latLngToPixel(anchor || position || center); | ||
| return React__default.cloneElement(child, { | ||
| return /*#__PURE__*/React__default.cloneElement(child, { | ||
| left: c[0] - (offset ? offset[0] : 0), | ||
@@ -1300,3 +1416,2 @@ top: c[1] - (offset ? offset[1] : 0), | ||
| }); | ||
| var childrenStyle = { | ||
@@ -1309,16 +1424,12 @@ position: 'absolute', | ||
| }; | ||
| return React__default.createElement( | ||
| 'div', | ||
| { style: childrenStyle }, | ||
| childrenWithProps | ||
| ); | ||
| return /*#__PURE__*/React__default.createElement("div", { | ||
| style: childrenStyle | ||
| }, childrenWithProps); | ||
| }; | ||
| Map.prototype.renderAttribution = function renderAttribution() { | ||
| var _props = this.props, | ||
| attribution = _props.attribution, | ||
| attributionPrefix = _props.attributionPrefix; | ||
| _proto.renderAttribution = function renderAttribution() { | ||
| var _this$props4 = this.props, | ||
| attribution = _this$props4.attribution, | ||
| attributionPrefix = _this$props4.attributionPrefix; | ||
| if (attribution === false) { | ||
@@ -1338,3 +1449,2 @@ return null; | ||
| }; | ||
| var linkStyle = { | ||
@@ -1344,44 +1454,28 @@ color: '#0078A8', | ||
| }; | ||
| return React__default.createElement( | ||
| 'div', | ||
| { key: 'attr', className: 'pigeon-attribution', style: style }, | ||
| attributionPrefix === false ? null : React__default.createElement( | ||
| 'span', | ||
| null, | ||
| attributionPrefix || React__default.createElement( | ||
| 'a', | ||
| { href: 'https://pigeon-maps.js.org/', style: linkStyle }, | ||
| 'Pigeon' | ||
| ), | ||
| ' | ' | ||
| ), | ||
| attribution || React__default.createElement( | ||
| 'span', | ||
| null, | ||
| ' © ', | ||
| React__default.createElement( | ||
| 'a', | ||
| { href: 'https://www.openstreetmap.org/copyright', style: linkStyle }, | ||
| 'OpenStreetMap' | ||
| ), | ||
| ' contributors' | ||
| ) | ||
| ); | ||
| return /*#__PURE__*/React__default.createElement("div", { | ||
| key: "attr", | ||
| className: "pigeon-attribution", | ||
| style: style | ||
| }, attributionPrefix === false ? null : /*#__PURE__*/React__default.createElement("span", null, attributionPrefix || /*#__PURE__*/React__default.createElement("a", { | ||
| href: "https://pigeon-maps.js.org/", | ||
| style: linkStyle | ||
| }, "Pigeon"), ' | '), attribution || /*#__PURE__*/React__default.createElement("span", null, ' © ', /*#__PURE__*/React__default.createElement("a", { | ||
| href: "https://www.openstreetmap.org/copyright", | ||
| style: linkStyle | ||
| }, "OpenStreetMap"), ' contributors')); | ||
| }; | ||
| Map.prototype.renderWarning = function renderWarning() { | ||
| var _props2 = this.props, | ||
| metaWheelZoom = _props2.metaWheelZoom, | ||
| metaWheelZoomWarning = _props2.metaWheelZoomWarning, | ||
| twoFingerDrag = _props2.twoFingerDrag, | ||
| twoFingerDragWarning = _props2.twoFingerDragWarning, | ||
| warningZIndex = _props2.warningZIndex; | ||
| var _state3 = this.state, | ||
| showWarning = _state3.showWarning, | ||
| warningType = _state3.warningType, | ||
| width = _state3.width, | ||
| height = _state3.height; | ||
| _proto.renderWarning = function renderWarning() { | ||
| var _this$props5 = this.props, | ||
| metaWheelZoom = _this$props5.metaWheelZoom, | ||
| metaWheelZoomWarning = _this$props5.metaWheelZoomWarning, | ||
| twoFingerDrag = _this$props5.twoFingerDrag, | ||
| twoFingerDragWarning = _this$props5.twoFingerDragWarning, | ||
| warningZIndex = _this$props5.warningZIndex; | ||
| var _this$state12 = this.state, | ||
| showWarning = _this$state12.showWarning, | ||
| warningType = _this$state12.warningType, | ||
| width = _this$state12.width, | ||
| height = _this$state12.height; | ||
| if (metaWheelZoom && metaWheelZoomWarning || twoFingerDrag && twoFingerDragWarning) { | ||
@@ -1408,12 +1502,7 @@ var style = { | ||
| }; | ||
| var meta = typeof window !== 'undefined' && window.navigator && window.navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? '⌘' : '⊞'; | ||
| var warningText = warningType === 'fingers' ? twoFingerDragWarning : metaWheelZoomWarning; | ||
| return React__default.createElement( | ||
| 'div', | ||
| { style: style }, | ||
| warningText.replace('META', meta) | ||
| ); | ||
| return /*#__PURE__*/React__default.createElement("div", { | ||
| style: style | ||
| }, warningText.replace('META', meta)); | ||
| } else { | ||
@@ -1424,11 +1513,9 @@ return null; | ||
| Map.prototype.render = function render() { | ||
| var _props3 = this.props, | ||
| touchEvents = _props3.touchEvents, | ||
| twoFingerDrag = _props3.twoFingerDrag; | ||
| var _state4 = this.state, | ||
| width = _state4.width, | ||
| height = _state4.height; | ||
| _proto.render = function render() { | ||
| var _this$props6 = this.props, | ||
| touchEvents = _this$props6.touchEvents, | ||
| twoFingerDrag = _this$props6.twoFingerDrag; | ||
| var _this$state13 = this.state, | ||
| width = _this$state13.width, | ||
| height = _this$state13.height; | ||
| var containerStyle = { | ||
@@ -1443,13 +1530,7 @@ width: this.props.width ? width : '100%', | ||
| }; | ||
| var hasSize = !!(width && height); | ||
| return React__default.createElement( | ||
| 'div', | ||
| { style: containerStyle, ref: this.setRef }, | ||
| hasSize && this.renderTiles(), | ||
| hasSize && this.renderOverlays(), | ||
| hasSize && this.renderAttribution(), | ||
| hasSize && this.renderWarning() | ||
| ); | ||
| return /*#__PURE__*/React__default.createElement("div", { | ||
| style: containerStyle, | ||
| ref: this.setRef | ||
| }, hasSize && this.renderTiles(), hasSize && this.renderOverlays(), hasSize && this.renderAttribution(), hasSize && this.renderWarning()); | ||
| }; | ||
@@ -1459,3 +1540,2 @@ | ||
| }(React.Component); | ||
| Map.defaultProps = { | ||
@@ -1477,47 +1557,3 @@ animate: true, | ||
| }; | ||
| process.env.NODE_ENV !== "production" ? Map.propTypes = { | ||
| center: PropTypes.array, | ||
| defaultCenter: PropTypes.array, | ||
| zoom: PropTypes.number, | ||
| defaultZoom: PropTypes.number, | ||
| width: PropTypes.number, | ||
| defaultWidth: PropTypes.number, | ||
| height: PropTypes.number, | ||
| defaultHeight: PropTypes.number, | ||
| provider: PropTypes.func, | ||
| dprs: PropTypes.array, | ||
| children: PropTypes.node, | ||
| animate: PropTypes.bool, | ||
| animateMaxScreens: PropTypes.number, | ||
| minZoom: PropTypes.number, | ||
| maxZoom: PropTypes.number, | ||
| metaWheelZoom: PropTypes.bool, | ||
| metaWheelZoomWarning: PropTypes.string, | ||
| twoFingerDrag: PropTypes.bool, | ||
| twoFingerDragWarning: PropTypes.string, | ||
| warningZIndex: PropTypes.number, | ||
| attribution: PropTypes.any, | ||
| attributionPrefix: PropTypes.any, | ||
| zoomSnap: PropTypes.bool, | ||
| mouseEvents: PropTypes.bool, | ||
| touchEvents: PropTypes.bool, | ||
| onClick: PropTypes.func, | ||
| onBoundsChanged: PropTypes.func, | ||
| onAnimationStart: PropTypes.func, | ||
| onAnimationStop: PropTypes.func, | ||
| // will be set to "edge" from v0.12 onward, defaulted to "center" before | ||
| limitBounds: PropTypes.oneOf(['center', 'edge']) | ||
| } : void 0; | ||
| module.exports = Map; |
| { | ||
| "name": "pigeon-maps", | ||
| "version": "0.15.0", | ||
| "version": "0.16.0", | ||
| "description": "ReactJS maps without external dependencies", | ||
| "author": "Marius Andra", | ||
| "license": "MIT", | ||
| "main": "lib/index.js", | ||
| "jsnext:main": "src/index.js", | ||
| "types": "lib/index.d.ts", | ||
| "main": "lib/index.cjs.js", | ||
| "module": "lib/index.esm.js", | ||
| "repository": { | ||
@@ -19,6 +20,4 @@ "type": "git", | ||
| "start": "./node_modules/.bin/webpack-dev-server --history-api-fallback --hot --host 0.0.0.0 --port 4040", | ||
| "build": "npm run build:demo && npm run build:lib", | ||
| "build:demo": "node build.js production", | ||
| "build:lib": "rollup -c", | ||
| "prepublish": "npm run build:lib", | ||
| "build": "rollup -c", | ||
| "prepublish": "npm run build", | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
@@ -34,34 +33,60 @@ }, | ||
| "peerDependencies": { | ||
| "prop-types": "*" | ||
| "react": "*" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-cli": "^6.26.0", | ||
| "babel-core": "^6.26.0", | ||
| "babel-eslint": "^8.0.1", | ||
| "babel-loader": "^7.1.2", | ||
| "babel-plugin-add-module-exports": "0.2.1", | ||
| "babel-plugin-minify-dead-code-elimination": "^0.2.0", | ||
| "@babel/cli": "^7.10.5", | ||
| "@babel/core": "^7.11.1", | ||
| "@babel/plugin-proposal-class-properties": "^7.10.4", | ||
| "@babel/plugin-proposal-decorators": "^7.10.5", | ||
| "@babel/plugin-proposal-do-expressions": "^7.10.4", | ||
| "@babel/plugin-proposal-export-default-from": "^7.10.4", | ||
| "@babel/plugin-proposal-export-namespace-from": "^7.10.4", | ||
| "@babel/plugin-proposal-function-bind": "^7.10.5", | ||
| "@babel/plugin-proposal-function-sent": "^7.10.4", | ||
| "@babel/plugin-proposal-json-strings": "^7.10.4", | ||
| "@babel/plugin-proposal-logical-assignment-operators": "^7.11.0", | ||
| "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4", | ||
| "@babel/plugin-proposal-numeric-separator": "^7.10.4", | ||
| "@babel/plugin-proposal-object-rest-spread": "^7.11.0", | ||
| "@babel/plugin-proposal-optional-chaining": "^7.11.0", | ||
| "@babel/plugin-proposal-pipeline-operator": "^7.10.5", | ||
| "@babel/plugin-proposal-throw-expressions": "^7.10.4", | ||
| "@babel/plugin-syntax-dynamic-import": "^7.8.3", | ||
| "@babel/plugin-syntax-import-meta": "^7.10.4", | ||
| "@babel/preset-env": "^7.11.0", | ||
| "@babel/preset-react": "^7.10.4", | ||
| "@babel/preset-typescript": "^7.10.4", | ||
| "@types/react": "16.9.45", | ||
| "@typescript-eslint/eslint-plugin": "^3.8.0", | ||
| "@typescript-eslint/parser": "^3.8.0", | ||
| "babel-eslint": "^10.1.0", | ||
| "babel-loader": "^8.1.0", | ||
| "babel-plugin-add-module-exports": "1.0.2", | ||
| "babel-plugin-minify-dead-code-elimination": "^0.5.1", | ||
| "babel-plugin-react-transform": "^3.0.0", | ||
| "babel-plugin-transform-babel-env-inline": "^0.0.1", | ||
| "babel-plugin-transform-react-remove-prop-types": "0.4.19", | ||
| "babel-preset-es2015": "6.24.1", | ||
| "babel-preset-react": "6.24.1", | ||
| "babel-preset-stage-0": "6.24.1", | ||
| "eslint": "^4.8.0", | ||
| "eslint-config-standard": "10.2.1", | ||
| "eslint-plugin-import": "^2.7.0", | ||
| "eslint-plugin-node": "^5.2.0", | ||
| "eslint-plugin-promise": "3.5.0", | ||
| "eslint-plugin-react": "^7.4.0", | ||
| "eslint-plugin-standard": "3.0.1", | ||
| "file-loader": "^1.1.4", | ||
| "pigeon-marker": "^0.3.3", | ||
| "prop-types": "^15.6.0", | ||
| "react": "^16.0.0", | ||
| "react-dom": "^16.0.0", | ||
| "rollup": "^1.6.0", | ||
| "rollup-plugin-babel": "3", | ||
| "webpack": "^3.6.0", | ||
| "webpack-dev-server": "^2.9.1" | ||
| "eslint": "^7.6.0", | ||
| "eslint-config-prettier": "^6.11.0", | ||
| "eslint-config-standard": "14.1.1", | ||
| "eslint-plugin-import": "^2.22.0", | ||
| "eslint-plugin-node": "^11.1.0", | ||
| "eslint-plugin-prettier": "^3.1.4", | ||
| "eslint-plugin-promise": "4.2.1", | ||
| "eslint-plugin-react": "^7.20.5", | ||
| "eslint-plugin-standard": "4.0.1", | ||
| "file-loader": "^6.0.0", | ||
| "pigeon-marker": "^0.3.4", | ||
| "prettier": "^2.0.5", | ||
| "react": "^16.13.1", | ||
| "react-dom": "^16.13.1", | ||
| "rollup": "^2.23.1", | ||
| "rollup-plugin-babel": "^4.4.0", | ||
| "rollup-plugin-dts": "^1.4.10", | ||
| "rollup-plugin-typescript2": "^0.27.2", | ||
| "tslib": "^2.0.1", | ||
| "typescript": "^3.9.7", | ||
| "webpack": "^4.44.1", | ||
| "webpack-cli": "^3.3.12", | ||
| "webpack-dev-server": "^3.11.0" | ||
| } | ||
| } |
@@ -1,3 +0,1 @@ | ||
| If Pigeon Maps helps you save on your Google Maps bill, please consider [sponsoring](https://github.com/users/mariusandra/sponsorship) to ensure it remains well maintained. Thank you 🤗 | ||
| # Pigeon Maps - ReactJS maps without external dependencies | ||
@@ -86,2 +84,4 @@ | ||
| **Note:** If you're getting **429 errors**, it's time to upgrade pigeon maps and choose a new tile layer provider. Versions before `0.15.0` use a default tile provider that no longer works. | ||
| Pigeon Maps defaults to loading map tiles from [OpenStreetMap.org](https://www.openstreetmap.org/). While free (thanks to volunteers and donations), these OSM tiles aren't the best looking visually. | ||
@@ -88,0 +88,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by99.67%
215317
- Number of package files
- increased by66.67%
15
- Lines of code
- increased by124.56%
4983
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Dev dependency count
- increased by92.86%
54
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes