pigeon-maps - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

lib/map.js

@@ -65,2 +65,4 @@ 'use strict';
     _this.setCenterZoomTarget = function (center, zoom, fromProps) {
+      var zoomAround = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+
       // TODO: if center diff is more than 2 screens, no animation
@@ -87,3 +89,9 @@
 
-        _this._centerTarget = center;
+        if (zoomAround) {
+          _this._zoomAround = zoomAround;
+          _this._centerTarget = _this.calculateZoomCenter(_this.state.center, zoomAround, _this.state.zoom, zoom);
+        } else {
+          _this._zoomAround = null;
+          _this._centerTarget = center;
+        }
         _this._zoomTarget = zoom;
@@ -93,3 +101,8 @@
       } else {
-        _this.setCenterZoom(center, zoom, fromProps);
+        if (zoomAround) {
+          var _center = _this.calculateZoomCenter(_this.state.center, zoomAround, _this.state.zoom, zoom);
+          _this.setCenterZoom(_center, zoom, fromProps);
+        } else {
+          _this.setCenterZoom(center, zoom, fromProps);
+        }
       }
@@ -103,7 +116,14 @@ };
 
-      var zoomStep = _this._zoomStart + (_this._zoomTarget - _this._zoomStart) * percentage;
+      var zoomDiff = (_this._zoomTarget - _this._zoomStart) * percentage;
+      var zoomStep = _this._zoomStart + zoomDiff;
 
-      var centerStep = [_this._centerStart[0] + (_this._centerTarget[0] - _this._centerStart[0]) * percentage, _this._centerStart[1] + (_this._centerTarget[1] - _this._centerStart[1]) * percentage];
+      if (_this._zoomAround) {
+        var centerStep = _this.calculateZoomCenter(_this._centerStart, _this._zoomAround, _this._zoomStart, zoomStep);
 
-      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 };
+      }
     };
@@ -114,3 +134,3 @@
         _this._isAnimating = false;
-        _this.setCenterZoom(_this._centerTarget, _this._zoomTarget, true);
+        _this.setCenterZoom(_this._centerTarget, _this._zoomTarget);
       } else {
@@ -121,4 +141,3 @@ var _this$animationStep2 = _this.animationStep(timestamp),
 
-        _this.setCenterZoom(centerStep, zoomStep, true);
-
+        _this.setCenterZoom(centerStep, zoomStep);
         _this._animFrame = window.requestAnimationFrame(_this.animate);
@@ -129,4 +148,2 @@ }
     _this.setCenterZoom = function (center, zoom) {
-      var fromProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-
       if (Math.round(_this.state.zoom) !== Math.round(zoom)) {
@@ -158,4 +175,5 @@ (function () {
       _this.setState({ center: center, zoom: zoom });
-      if (!fromProps) {
-        _this.syncToProps();
+
+      if (Math.abs(_this.props.zoom - zoom) > 0.001 || Math.abs(_this.props.center[0] - center[0]) > 0.0001 || Math.abs(_this.props.center[1] - center[1]) > 0.0001) {
+        _this.syncToProps(center, zoom);
       }
@@ -312,6 +330,8 @@ };
     _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;
       var onBoundsChanged = _this.props.onBoundsChanged;
 
       if (onBoundsChanged) {
-        onBoundsChanged({ center: _this.state.center, zoom: _this.state.zoom });
+        onBoundsChanged({ center: center, zoom: zoom });
       }
@@ -325,3 +345,3 @@ };
 
-    _this.handleWheelThrottled = (0, _throttleDebounce.throttle)(100, true, function (event) {
+    _this.handleWheelThrottled = (0, _throttleDebounce.throttle)(ANIMATION_TIME, true, function (event) {
       if (event.deltaY < 0) {
@@ -334,2 +354,15 @@ _this.zoomAroundMouse(1);
 
+    _this.zoomAroundMouse = function (zoomDiff) {
+      var zoom = _this.state.zoom;
+
+
+      if (!_this._mousePosition || zoom + zoomDiff < 1 || zoom + zoomDiff > 18) {
+        return;
+      }
+
+      var latLngNow = _this.pixelToLatLng(_this._mousePosition[0], _this._mousePosition[1], zoom);
+
+      _this.setCenterZoomTarget(null, zoom + zoomDiff, false, latLngNow);
+    };
+
     _this.handleContextMenu = function (event) {
@@ -340,6 +373,6 @@ event.preventDefault();
     _this.pixelToLatLng = function (x, y, zoom) {
+      var center = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _this.state.center;
       var _this$props4 = _this.props,
           width = _this$props4.width,
           height = _this$props4.height;
-      var center = _this.state.center;
 
@@ -356,6 +389,6 @@
     _this.latLngToPixel = function (lat, lng, zoom) {
+      var center = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _this.state.center;
       var _this$props5 = _this.props,
           width = _this$props5.width,
           height = _this$props5.height;
-      var center = _this.state.center;
 
@@ -372,20 +405,9 @@
 
-    _this.zoomAroundMouse = function (zoomDiff) {
-      var _this$state2 = _this.state,
-          center = _this$state2.center,
-          zoom = _this$state2.zoom;
+    _this.calculateZoomCenter = function (center, coords, oldZoom, newZoom) {
+      var pixel = _this.latLngToPixel(coords[0], coords[1], oldZoom, center);
+      var latLngZoomed = _this.pixelToLatLng(pixel[0], pixel[1], newZoom, center);
+      var diffLat = latLngZoomed[0] - coords[0];
+      var diffLng = latLngZoomed[1] - coords[1];
 
-
-      if (!_this._mousePosition || zoom + zoomDiff < 1 || zoom + zoomDiff > 18) {
-        return;
-      }
-
-      var latLngNow = _this.pixelToLatLng(_this._mousePosition[0], _this._mousePosition[1], zoom);
-
-      var latLngZoomed = _this.pixelToLatLng(_this._mousePosition[0], _this._mousePosition[1], zoom + zoomDiff);
-
-      var diffLat = latLngZoomed[0] - latLngNow[0];
-      var diffLng = latLngZoomed[1] - latLngNow[1];
-
-      _this.setCenterZoomTarget([center[0] - diffLat, center[1] - diffLng], zoom + zoomDiff);
+      return [center[0] - diffLat, center[1] - diffLng];
     };
@@ -449,4 +471,13 @@
     }
+
+    // tools
+
+    // ref
+
   }, {
     key: 'tileValues',
+
+
+    // data to display the tiles
+
     value: function tileValues(props, state) {
@@ -494,2 +525,5 @@ var width = props.width,
     }
+
+    // display the tiles
+
   }, {
@@ -530,4 +564,9 @@ key: 'renderTiles',
 
-        for (var x = old.tileMinX; x <= old.tileMaxX; x++) {
-          for (var y = old.tileMinY; y <= old.tileMaxY; y++) {
+        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);
+
+        for (var x = _xMin; x <= _xMax; x++) {
+          for (var y = _yMin; y <= _yMax; y++) {
             tiles.push({
@@ -546,8 +585,13 @@ key: x + '-' + y + '-' + old.roundedZoom,
 
-      for (var _x2 = tileMinX; _x2 <= tileMaxX; _x2++) {
-        for (var _y = tileMinY; _y <= tileMaxY; _y++) {
+      var xMin = Math.max(tileMinX, 0);
+      var yMin = Math.max(tileMinY, 0);
+      var xMax = Math.min(tileMaxX, Math.pow(2, roundedZoom) - 1);
+      var yMax = Math.min(tileMaxY, Math.pow(2, roundedZoom) - 1);
+
+      for (var _x6 = xMin; _x6 <= xMax; _x6++) {
+        for (var _y = yMin; _y <= yMax; _y++) {
           tiles.push({
-            key: _x2 + '-' + _y + '-' + roundedZoom,
-            url: mapUrl(_x2, _y, roundedZoom),
-            left: (_x2 - tileMinX) * 256,
+            key: _x6 + '-' + _y + '-' + roundedZoom,
+            url: mapUrl(_x6, _y, roundedZoom),
+            left: (_x6 - tileMinX) * 256,
             top: (_y - tileMinY) * 256,
@@ -554,0 +598,0 @@ width: 256,

package.json

 {
   "name": "pigeon-maps",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "ReactJS maps without external dependencies",
@@ -5,0 +5,0 @@ "author": "Marius Andra",

README.md

@@ -16,4 +16,4 @@ # Pigeon Maps - ReactJS maps without external dependencies
 We're currently at:
-- [14KB minified](https://raw.githubusercontent.com/mariusandra/pigeon-maps/master/static/demo.bundle.js)
-- 4KB gzipped
+- [17KB minified](https://raw.githubusercontent.com/mariusandra/pigeon-maps/master/static/demo.bundle.js)
+- 5KB gzipped
 
@@ -28,4 +28,5 @@ Implemented:
 - Zooming by touch
-- Smooth / fractional zooming
+- Fractional zooming (e.g. to level 12.2)
 - Zoom without flickering (keep old tiles until new ones load)
+- Smooth animated zooming
 
@@ -36,3 +37,3 @@ Missing:
 - Event handling (clicks, etc)
-- Better wheel zoom handling
+- Better wheel zoom handling (scroll more = zoom faster)
 - Slide animation when dragging and letting go
@@ -39,0 +40,0 @@

src/map.js

@@ -101,3 +101,3 @@ import React, { Component } from 'react'
 
-  setCenterZoomTarget = (center, zoom, fromProps) => {
+  setCenterZoomTarget = (center, zoom, fromProps, zoomAround = null) => {
     // TODO: if center diff is more than 2 screens, no animation
@@ -120,3 +120,9 @@
 
-      this._centerTarget = center
+      if (zoomAround) {
+        this._zoomAround = zoomAround
+        this._centerTarget = this.calculateZoomCenter(this.state.center, zoomAround, this.state.zoom, zoom)
+      } else {
+        this._zoomAround = null
+        this._centerTarget = center
+      }
       this._zoomTarget = zoom
@@ -126,3 +132,8 @@
     } else {
-      this.setCenterZoom(center, zoom, fromProps)
+      if (zoomAround) {
+        const center = this.calculateZoomCenter(this.state.center, zoomAround, this.state.zoom, zoom)
+        this.setCenterZoom(center, zoom, fromProps)
+      } else {
+        this.setCenterZoom(center, zoom, fromProps)
+      }
     }
@@ -136,10 +147,17 @@ }
 
-    const zoomStep = this._zoomStart + (this._zoomTarget - this._zoomStart) * percentage
+    const zoomDiff = (this._zoomTarget - this._zoomStart) * percentage
+    const zoomStep = this._zoomStart + zoomDiff
 
-    const centerStep = [
-      this._centerStart[0] + (this._centerTarget[0] - this._centerStart[0]) * percentage,
-      this._centerStart[1] + (this._centerTarget[1] - this._centerStart[1]) * percentage
-    ]
+    if (this._zoomAround) {
+      const centerStep = this.calculateZoomCenter(this._centerStart, this._zoomAround, this._zoomStart, zoomStep)
 
-    return { centerStep, zoomStep }
+      return { centerStep, zoomStep }
+    } else {
+      const centerStep = [
+        this._centerStart[0] + (this._centerTarget[0] - this._centerStart[0]) * percentage,
+        this._centerStart[1] + (this._centerTarget[1] - this._centerStart[1]) * percentage
+      ]
+
+      return { centerStep, zoomStep }
+    }
   }
@@ -150,8 +168,6 @@
       this._isAnimating = false
-      this.setCenterZoom(this._centerTarget, this._zoomTarget, true)
+      this.setCenterZoom(this._centerTarget, this._zoomTarget)
     } else {
       const { centerStep, zoomStep } = this.animationStep(timestamp)
-
-      this.setCenterZoom(centerStep, zoomStep, true)
-
+      this.setCenterZoom(centerStep, zoomStep)
       this._animFrame = window.requestAnimationFrame(this.animate)
@@ -161,3 +177,3 @@ }
 
-  setCenterZoom = (center, zoom, fromProps = false) => {
+  setCenterZoom = (center, zoom) => {
     if (Math.round(this.state.zoom) !== Math.round(zoom)) {
@@ -185,4 +201,7 @@ const tileValues = this.tileValues(this.props, this.state)
     this.setState({ center, zoom })
-    if (!fromProps) {
-      this.syncToProps()
+
+    if (Math.abs(this.props.zoom - zoom) > 0.001 ||
+        Math.abs(this.props.center[0] - center[0]) > 0.0001 ||
+        Math.abs(this.props.center[1] - center[1]) > 0.0001) {
+      this.syncToProps(center, zoom)
     }
@@ -334,6 +353,6 @@ }
 
-  syncToProps = () => {
+  syncToProps = (center = this.state.center, zoom = this.state.zoom) => {
     const { onBoundsChanged } = this.props
     if (onBoundsChanged) {
-      onBoundsChanged({ center: this.state.center, zoom: this.state.zoom })
+      onBoundsChanged({ center, zoom })
     }
@@ -347,3 +366,3 @@ }
 
-  handleWheelThrottled = throttle(100, true, event => {
+  handleWheelThrottled = throttle(ANIMATION_TIME, true, event => {
     if (event.deltaY < 0) {
@@ -356,2 +375,14 @@ this.zoomAroundMouse(1)
 
+  zoomAroundMouse = (zoomDiff) => {
+    const { zoom } = this.state
+
+    if (!this._mousePosition || zoom + zoomDiff < 1 || zoom + zoomDiff > 18) {
+      return
+    }
+
+    const latLngNow = this.pixelToLatLng(this._mousePosition[0], this._mousePosition[1], zoom)
+
+    this.setCenterZoomTarget(null, zoom + zoomDiff, false, latLngNow)
+  }
+
   handleContextMenu = (event) => {
@@ -361,5 +392,6 @@ event.preventDefault()
 
-  pixelToLatLng = (x, y, zoom) => {
+  // tools
+
+  pixelToLatLng = (x, y, zoom, center = this.state.center) => {
     const { width, height } = this.props
-    const { center } = this.state
 
@@ -377,5 +409,4 @@ const pointDiff = [
 
-  latLngToPixel = (lat, lng, zoom) => {
+  latLngToPixel = (lat, lng, zoom, center = this.state.center) => {
     const { width, height } = this.props
-    const { center } = this.state
 
@@ -394,19 +425,13 @@ const tileCenterX = lng2tile(center[1], zoom)
 
-  zoomAroundMouse = (zoomDiff) => {
-    const { center, zoom } = this.state
+  calculateZoomCenter = (center, coords, oldZoom, newZoom) => {
+    const pixel = this.latLngToPixel(coords[0], coords[1], oldZoom, center)
+    const latLngZoomed = this.pixelToLatLng(pixel[0], pixel[1], newZoom, center)
+    const diffLat = latLngZoomed[0] - coords[0]
+    const diffLng = latLngZoomed[1] - coords[1]
 
-    if (!this._mousePosition || zoom + zoomDiff < 1 || zoom + zoomDiff > 18) {
-      return
-    }
+    return [center[0] - diffLat, center[1] - diffLng]
+  }
 
-    const latLngNow = this.pixelToLatLng(this._mousePosition[0], this._mousePosition[1], zoom)
+  // ref
 
-    const latLngZoomed = this.pixelToLatLng(this._mousePosition[0], this._mousePosition[1], zoom + zoomDiff)
-
-    const diffLat = latLngZoomed[0] - latLngNow[0]
-    const diffLng = latLngZoomed[1] - latLngNow[1]
-
-    this.setCenterZoomTarget([center[0] - diffLat, center[1] - diffLng], zoom + zoomDiff)
-  }
-
   setRef = (dom) => {
@@ -416,2 +441,4 @@ this._containerRef = dom
 
+  // data to display the tiles
+
   tileValues (props, state) {
@@ -455,2 +482,4 @@ const { width, height } = props
 
+  // display the tiles
+
   renderTiles () {
@@ -487,4 +516,9 @@ const { oldTiles } = this.state
 
-      for (let x = old.tileMinX; x <= old.tileMaxX; x++) {
-        for (let y = old.tileMinY; y <= old.tileMaxY; y++) {
+      let xMin = Math.max(old.tileMinX, 0)
+      let yMin = Math.max(old.tileMinY, 0)
+      let xMax = Math.min(old.tileMaxX, Math.pow(2, old.roundedZoom) - 1)
+      let yMax = Math.min(old.tileMaxY, Math.pow(2, old.roundedZoom) - 1)
+
+      for (let x = xMin; x <= xMax; x++) {
+        for (let y = yMin; y <= yMax; y++) {
           tiles.push({
@@ -503,4 +537,9 @@ key: `${x}-${y}-${old.roundedZoom}`,
 
-    for (let x = tileMinX; x <= tileMaxX; x++) {
-      for (let y = tileMinY; y <= tileMaxY; y++) {
+    let xMin = Math.max(tileMinX, 0)
+    let yMin = Math.max(tileMinY, 0)
+    let xMax = Math.min(tileMaxX, Math.pow(2, roundedZoom) - 1)
+    let yMax = Math.min(tileMaxY, Math.pow(2, roundedZoom) - 1)
+
+    for (let x = xMin; x <= xMax; x++) {
+      for (let y = yMin; y <= yMax; y++) {
         tiles.push({
@@ -507,0 +546,0 @@ key: `${x}-${y}-${roundedZoom}`,

static/demo.bundle.js

@@ -1,1 +0,1 @@
-webpackJsonp([0],{0:function(e,t,o){e.exports=o(1)},1:function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var r=o(2),a=n(r),i=o(166),l=n(i),u=o(167),s=n(u);o(175),a.default.render(l.default.createElement(s.default,null),document.getElementById("root"))},167:function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),u=o(166),s=n(u),c=o(168),f=n(c),h=function(e){function t(e){r(this,t);var o=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.zoomIn=function(){o.setState({zoom:Math.min(o.state.zoom+1,18)})},o.zoomOut=function(){o.setState({zoom:Math.max(o.state.zoom-1,1)})},o.handleBoundsChange=function(e){var t=e.center,n=e.zoom;o.setState({center:t,zoom:n})},o.state={center:[50.879,4.6997],zoom:12},o}return i(t,e),l(t,[{key:"render",value:function(){var e=this.state,t=e.center,o=e.zoom;return s.default.createElement("div",null,s.default.createElement(f.default,{center:t,zoom:o,onBoundsChanged:this.handleBoundsChange,width:600,height:400},s.default.createElement(c.Overlay,{position:[50.879,4.6997],offset:[15,31]},s.default.createElement("img",{src:"https://www.apprentus.com/images/map/[e-mail]",width:29,height:34,alt:""})),s.default.createElement(c.Overlay,{position:[50.874,4.6947],offset:[15,31]},s.default.createElement("img",{src:"https://www.apprentus.com/images/map/[e-mail]",width:29,height:34,alt:""}))),s.default.createElement("div",null,s.default.createElement("button",{onClick:this.zoomOut},"Zoom Out"),s.default.createElement("button",{onClick:this.zoomIn},"Zoom In")," ",o))}}]),t}(u.Component);t.default=h},168:function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Overlay=void 0;var r=o(169),a=n(r),i=o(174),l=n(i);t.Overlay=l.default,t.default=a.default},169:function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e,t,o){var n="undefined"!=typeof window&&window.devicePixelRatio>=2;return"https://maps.wikimedia.org/osm-intl/"+o+"/"+e+"/"+t+(n?"@2x":"")+".png"}function u(e,t){return e/Math.pow(2,t)*360-180}function s(e,t){var o=Math.PI-2*Math.PI*e/Math.pow(2,t);return 180/Math.PI*Math.atan(.5*(Math.exp(o)-Math.exp(-o)))}function c(e,t){var o=(0,v.default)(e);return[t.clientX-o.x,t.clientY-o.y]}Object.defineProperty(t,"__esModule",{value:!0});var f=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),h=o(166),d=n(h),p=o(170),m=o(173),v=n(m),_=150,y=function(e,t){return(e+180)/360*Math.pow(2,t)},g=function(e,t){return(1-Math.log(Math.tan(e*Math.PI/180)+1/Math.cos(e*Math.PI/180))/Math.PI)/2*Math.pow(2,t)},w=function(e){function t(e){r(this,t);var o=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.setCenterZoomTarget=function(e,t,n){if(o.props.animate){if(o._isAnimating){window.cancelAnimationFrame(o._animFrame);var r=o.animationStep(window.performance.now()),a=r.centerStep,i=r.zoomStep;o._centerStart=a,o._zoomStart=i}else o._isAnimating=!0,o._centerStart=[o.state.center[0],o.state.center[1]],o._zoomStart=o.state.zoom;o._animationStart=window.performance.now(),o._animationEnd=o._animationStart+_,o._centerTarget=e,o._zoomTarget=t,o._animFrame=window.requestAnimationFrame(o.animate)}else o.setCenterZoom(e,t,n)},o.animationStep=function(e){var t=o._animationEnd-o._animationStart,n=Math.max(e-o._animationStart,0),r=n/t,a=o._zoomStart+(o._zoomTarget-o._zoomStart)*r,i=[o._centerStart[0]+(o._centerTarget[0]-o._centerStart[0])*r,o._centerStart[1]+(o._centerTarget[1]-o._centerStart[1])*r];return{centerStep:i,zoomStep:a}},o.animate=function(e){if(e>=o._animationEnd)o._isAnimating=!1,o.setCenterZoom(o._centerTarget,o._zoomTarget,!0);else{var t=o.animationStep(e),n=t.centerStep,r=t.zoomStep;o.setCenterZoom(n,r,!0),o._animFrame=window.requestAnimationFrame(o.animate)}},o.setCenterZoom=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];Math.round(o.state.zoom)!==Math.round(t)&&!function(){var n=o.tileValues(o.props,o.state),r=o.tileValues(o.props,{center:e,zoom:t}),a=o.state.oldTiles;o.setState({oldTiles:a.filter(function(e){return e.roundedZoom!==n.roundedZoom}).concat(n)});for(var i={},l=r.tileMinX;l<=r.tileMaxX;l++)for(var u=r.tileMinY;u<=r.tileMaxY;u++){var s=l+"-"+u+"-"+r.roundedZoom;i[s]=!1}o._loadTracker=i}(),o.setState({center:e,zoom:t}),n||o.syncToProps()},o.imageLoaded=function(e){o._loadTracker&&e in o._loadTracker&&(o._loadTracker[e]=!0,0===Object.keys(o._loadTracker).filter(function(e){return!o._loadTracker[e]}).length&&o.setState({oldTiles:[]}))},o.handleTouchStart=function(e){var t=o.props,n=t.width,r=t.height;if(1===e.touches.length){var a=e.touches[0],i=c(o._containerRef,a);i[0]>=0&&i[1]>=0&&i[0]<n&&i[1]<r&&(o._touchStartCoords=[[a.clientX,a.clientY]],e.preventDefault())}else if(2===e.touches.length&&o._touchStartCoords){e.preventDefault(),(o.state.centerDelta||o.state.zoomDelta)&&o.sendDeltaChange();var l=e.touches[0],u=e.touches[1];o._touchStartCoords=[[l.clientX,l.clientY],[u.clientX,u.clientY]],o._touchStartMidPoint=[(l.clientX+u.clientX)/2,(l.clientY+u.clientY)/2],o._touchStartDistance=Math.sqrt(Math.pow(l.clientX-u.clientX,2)+Math.pow(l.clientY-u.clientY,2))}},o.handleTouchMove=function(e){if(1===e.touches.length&&o._touchStartCoords){e.preventDefault();var t=e.touches[0];o.setState({centerDelta:[t.clientX-o._touchStartCoords[0][0],t.clientY-o._touchStartCoords[0][1]]})}else if(2===e.touches.length&&o._touchStartCoords){var n=o.props,r=n.width,a=n.height,i=o.state.zoom;e.preventDefault();var l=e.touches[0],u=e.touches[1],s=(0,v.default)(o._containerRef),c=[(l.clientX+u.clientX)/2,(l.clientY+u.clientY)/2],f=[c[0]-o._touchStartMidPoint[0],c[1]-o._touchStartMidPoint[1]],h=Math.sqrt(Math.pow(l.clientX-u.clientX,2)+Math.pow(l.clientY-u.clientY,2)),d=Math.min(18,i+Math.log2(h/o._touchStartDistance))-i,p=Math.pow(2,d),m=[(s.x+r/2-c[0])*(p-1),(s.y+a/2-c[1])*(p-1)];o.setState({zoomDelta:d,centerDelta:[m[0]+f[0]*p,m[1]+f[1]*p]})}},o.handleTouchEnd=function(e){if(o._touchStartCoords)if(e.preventDefault(),o.sendDeltaChange(),0===e.touches.length)o._touchStartCoords=null;else if(1===e.touches.length){var t=e.touches[0];o._touchStartCoords=[[t.clientX,t.clientY]]}},o.handleMouseDown=function(e){var t=o.props,n=t.width,r=t.height,a=c(o._containerRef,e);a[0]>=0&&a[1]>=0&&a[0]<n&&a[1]<r&&(o._mouseDown=!0,o._dragStart=a,e.preventDefault())},o.handleMouseMove=function(e){o._mousePosition=c(o._containerRef,e),o._mouseDown&&o._dragStart&&o.setState({centerDelta:[o._mousePosition[0]-o._dragStart[0],o._mousePosition[1]-o._dragStart[1]]})},o.handleMouseUp=function(e){o._mouseDown&&(o.sendDeltaChange(),o._mouseDown=!1)},o.sendDeltaChange=function(){var e=o.state,t=e.center,n=e.zoom,r=e.centerDelta,a=e.zoomDelta;if(r||0!==a){var i=u(y(t[1],n+a)-(r?r[0]/256:0),n+a),l=s(g(t[0],n+a)-(r?r[1]/256:0),n+a);o.setCenterZoom([l,i],n+a)}o.setState({centerDelta:null,zoomDelta:0})},o.syncToProps=function(){var e=o.props.onBoundsChanged;e&&e({center:o.state.center,zoom:o.state.zoom})},o.handleWheel=function(e){e.preventDefault(),o.handleWheelThrottled(e)},o.handleWheelThrottled=(0,p.throttle)(100,!0,function(e){e.deltaY<0?o.zoomAroundMouse(1):e.deltaY>0&&o.zoomAroundMouse(-1)}),o.handleContextMenu=function(e){e.preventDefault()},o.pixelToLatLng=function(e,t,n){var r=o.props,a=r.width,i=r.height,l=o.state.center,c=[(e-a/2)/256,(t-i/2)/256],f=y(l[1],n)+c[0],h=g(l[0],n)+c[1];return[s(h,n),u(f,n)]},o.latLngToPixel=function(e,t,n){var r=o.props,a=r.width,i=r.height,l=o.state.center,u=y(l[1],n),s=g(l[0],n),c=y(t,n),f=g(e,n);return[256*(c-u)+a/2,256*(f-s)+i/2]},o.zoomAroundMouse=function(e){var t=o.state,n=t.center,r=t.zoom;if(!(!o._mousePosition||r+e<1||r+e>18)){var a=o.pixelToLatLng(o._mousePosition[0],o._mousePosition[1],r),i=o.pixelToLatLng(o._mousePosition[0],o._mousePosition[1],r+e),l=i[0]-a[0],u=i[1]-a[1];o.setCenterZoomTarget([n[0]-l,n[1]-u],r+e)}},o.setRef=function(e){o._containerRef=e},o._mousePosition=null,o._dragStart=null,o._mouseDown=!1,o._touchStartCoords=null,o._isAnimating=!1,o._animationStart=null,o._animationEnd=null,o._centerTarget=null,o._zoomTarget=null,o.state={zoom:e.zoom,center:e.center,zoomDelta:0,centerDelta:null,oldTiles:[]},o}return i(t,e),f(t,[{key:"componentDidMount",value:function(){var e=window.addEventListener;e("mousedown",this.handleMouseDown),e("mouseup",this.handleMouseUp),e("mousemove",this.handleMouseMove),e("touchstart",this.handleTouchStart),e("touchmove",this.handleTouchMove),e("touchend",this.handleTouchEnd)}},{key:"componentWillUnmount",value:function(){var e=window.removeEventListener;e("mousedown",this.handleMouseDown),e("mouseup",this.handleMouseUp),e("mousemove",this.handleMouseMove),e("touchstart",this.handleTouchStart),e("touchmove",this.handleTouchMove),e("touchend",this.handleTouchEnd)}},{key:"componentWillReceiveProps",value:function(e){(Math.abs(e.zoom-this.state.zoom)>.001||Math.abs(e.center[0]-this.state.center[0])>1e-4||Math.abs(e.center[1]-this.state.center[1])>1e-4)&&this.setCenterZoomTarget(e.center,e.zoom,!0)}},{key:"tileValues",value:function(e,t){var o=e.width,n=e.height,r=t.center,a=t.zoom,i=t.centerDelta,l=t.zoomDelta,u=Math.round(a+l),s=a+l-u,c=Math.pow(2,s),f=o/c,h=n/c,d=y(r[1],u)-(i?i[0]/256/c:0),p=g(r[0],u)-(i?i[1]/256/c:0),m=f/2/256,v=h/2/256,_=Math.floor(d-m),w=Math.floor(d+m),M=Math.floor(p-v),b=Math.floor(p+v);return{tileMinX:_,tileMaxX:w,tileMinY:M,tileMaxY:b,tileCenterX:d,tileCenterY:p,roundedZoom:u,zoomDelta:l,scaleWidth:f,scaleHeight:h,scale:c}}},{key:"renderTiles",value:function(){for(var e=this,t=this.state.oldTiles,o=this.props.provider||l,n=this.tileValues(this.props,this.state),r=n.tileMinX,a=n.tileMaxX,i=n.tileMinY,u=n.tileMaxY,s=n.tileCenterX,c=n.tileCenterY,f=n.roundedZoom,h=n.scaleWidth,p=n.scaleHeight,m=n.scale,v=[],_=0;_<t.length;_++){var y=t[_],g=y.roundedZoom-f;if(!(Math.abs(g)>4||0===g))for(var w=1/Math.pow(2,g),M=256*-(r-y.tileMinX*w),b=256*-(i-y.tileMinY*w),T=y.tileMinX;T<=y.tileMaxX;T++)for(var S=y.tileMinY;S<=y.tileMaxY;S++)v.push({key:T+"-"+S+"-"+y.roundedZoom,url:o(T,S,y.roundedZoom),left:M+256*(T-y.tileMinX)*w,top:b+256*(S-y.tileMinY)*w,width:256*w,height:256*w,active:!1})}for(var P=r;P<=a;P++)for(var z=i;z<=u;z++)v.push({key:P+"-"+z+"-"+f,url:o(P,z,f),left:256*(P-r),top:256*(z-i),width:256,height:256,active:!0});var C={width:h,height:p,position:"absolute",top:0,left:0,overflow:"hidden",transform:"scale("+m+", "+m+")",transformOrigin:"top left"},D=-(256*(s-r)-h/2),O=-(256*(c-i)-p/2),x={position:"absolute",width:256*(a-r+1),height:256*(u-i+1),left:D,top:O};return d.default.createElement("div",{style:C},d.default.createElement("div",{style:x},v.map(function(t){return d.default.createElement("img",{key:t.key,src:t.url,width:t.width,height:t.height,onLoad:function(){return e.imageLoaded(t.key)},style:{position:"absolute",left:t.left,top:t.top,transform:t.transform,transformOrigin:"top left",opacity:1}})})))}},{key:"renderOverlays",value:function(){var e=this,t=this.props,o=t.width,n=t.height,r=this.state,a=r.zoom,i=r.centerDelta,l=r.zoomDelta,u=d.default.Children.map(this.props.children,function(t){var o=t.props,n=o.position,r=o.offset;if(n){var u=e.latLngToPixel(n[0],n[1],a+l);return d.default.cloneElement(t,{left:u[0]-(r?r[0]:0)+(i?i[0]:0),top:u[1]-(r?r[1]:0)+(i?i[1]:0)})}}),s={position:"absolute",width:o,height:n,top:0,left:0};return d.default.createElement("div",{style:s},u)}},{key:"render",value:function(){var e=this.props,t=e.width,o=e.height,n={width:t,height:o,position:"relative",display:"inline-block",overflow:"hidden",background:"#dddddd"};return d.default.createElement("div",{style:n,ref:this.setRef,onContextMenu:this.handleContextMenu,onWheel:this.handleWheel},this.renderTiles(),this.renderOverlays())}}]),t}(h.Component);w.propTypes={center:d.default.PropTypes.array,zoom:d.default.PropTypes.number,width:d.default.PropTypes.number,height:d.default.PropTypes.number,provider:d.default.PropTypes.func,children:d.default.PropTypes.node,animate:d.default.PropTypes.bool,onBoundsChanged:d.default.PropTypes.func},w.defaultProps={animate:!0},t.default=w},170:function(e,t,o){var n=o(171),r=o(172);e.exports={throttle:n,debounce:r}},171:function(e,t){e.exports=function(e,t,o,n){function r(){function r(){i=Number(new Date),o.apply(u,c)}function l(){a=void 0}var u=this,s=Number(new Date)-i,c=arguments;n&&!a&&r(),a&&clearTimeout(a),void 0===n&&s>e?r():t!==!0&&(a=setTimeout(n?l:r,void 0===n?e-s:e))}var a,i=0;return"boolean"!=typeof t&&(n=o,o=t,t=void 0),r}},172:function(e,t,o){var n=o(171);e.exports=function(e,t,o){return void 0===o?n(e,t,!1):n(e,o,t!==!1)}},173:function(e,t){"use strict";function o(e){for(var t=0,o=0,n=!0;e;)t+=e.offsetLeft-(n?0:e.scrollLeft)+e.clientLeft,o+=e.offsetTop-(n?0:e.scrollTop)+e.clientTop,e=e.offsetParent,n=!1;return{x:t,y:o}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o},174:function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),u=o(166),s=n(u),c=function(e){function t(){return r(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),l(t,[{key:"render",value:function(){var e=this.props,t=e.left,o=e.top;return s.default.createElement("div",{style:{position:"absolute",left:t,top:o}},this.props.children)}}]),t}(u.Component);c.propTypes={position:s.default.PropTypes.array,offset:s.default.PropTypes.array,left:s.default.PropTypes.number,top:s.default.PropTypes.number,children:s.default.PropTypes.node},t.default=c},175:function(e,t,o){e.exports=o.p+"index.html"}});
+webpackJsonp([0],{0:function(e,t,o){e.exports=o(1)},1:function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var r=o(2),a=n(r),i=o(166),l=n(i),u=o(167),s=n(u);o(175),a.default.render(l.default.createElement(s.default,null),document.getElementById("root"))},167:function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),u=o(166),s=n(u),c=o(168),h=n(c),f=function(e){function t(e){r(this,t);var o=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.zoomIn=function(){o.setState({zoom:Math.min(o.state.zoom+1,18)})},o.zoomOut=function(){o.setState({zoom:Math.max(o.state.zoom-1,1)})},o.handleBoundsChange=function(e){var t=e.center,n=e.zoom;o.setState({center:t,zoom:n})},o.state={center:[50.879,4.6997],zoom:12},o}return i(t,e),l(t,[{key:"render",value:function(){var e=this.state,t=e.center,o=e.zoom;return s.default.createElement("div",null,s.default.createElement(h.default,{center:t,zoom:o,onBoundsChanged:this.handleBoundsChange,width:600,height:400},s.default.createElement(c.Overlay,{position:[50.879,4.6997],offset:[15,31]},s.default.createElement("img",{src:"https://www.apprentus.com/images/map/[e-mail]",width:29,height:34,alt:""})),s.default.createElement(c.Overlay,{position:[50.874,4.6947],offset:[15,31]},s.default.createElement("img",{src:"https://www.apprentus.com/images/map/[e-mail]",width:29,height:34,alt:""}))),s.default.createElement("div",null,s.default.createElement("button",{onClick:this.zoomOut},"Zoom Out"),s.default.createElement("button",{onClick:this.zoomIn},"Zoom In")," ",o))}}]),t}(u.Component);t.default=f},168:function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Overlay=void 0;var r=o(169),a=n(r),i=o(174),l=n(i);t.Overlay=l.default,t.default=a.default},169:function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e,t,o){var n="undefined"!=typeof window&&window.devicePixelRatio>=2;return"https://maps.wikimedia.org/osm-intl/"+o+"/"+e+"/"+t+(n?"@2x":"")+".png"}function u(e,t){return e/Math.pow(2,t)*360-180}function s(e,t){var o=Math.PI-2*Math.PI*e/Math.pow(2,t);return 180/Math.PI*Math.atan(.5*(Math.exp(o)-Math.exp(-o)))}function c(e,t){var o=(0,v.default)(e);return[t.clientX-o.x,t.clientY-o.y]}Object.defineProperty(t,"__esModule",{value:!0});var h=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),f=o(166),d=n(f),p=o(170),m=o(173),v=n(m),_=150,M=function(e,t){return(e+180)/360*Math.pow(2,t)},g=function(e,t){return(1-Math.log(Math.tan(e*Math.PI/180)+1/Math.cos(e*Math.PI/180))/Math.PI)/2*Math.pow(2,t)},y=function(e){function t(e){r(this,t);var o=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.setCenterZoomTarget=function(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;if(o.props.animate){if(o._isAnimating){window.cancelAnimationFrame(o._animFrame);var a=o.animationStep(window.performance.now()),i=a.centerStep,l=a.zoomStep;o._centerStart=i,o._zoomStart=l}else o._isAnimating=!0,o._centerStart=[o.state.center[0],o.state.center[1]],o._zoomStart=o.state.zoom;o._animationStart=window.performance.now(),o._animationEnd=o._animationStart+_,r?(o._zoomAround=r,o._centerTarget=o.calculateZoomCenter(o.state.center,r,o.state.zoom,t)):(o._zoomAround=null,o._centerTarget=e),o._zoomTarget=t,o._animFrame=window.requestAnimationFrame(o.animate)}else if(r){var u=o.calculateZoomCenter(o.state.center,r,o.state.zoom,t);o.setCenterZoom(u,t,n)}else o.setCenterZoom(e,t,n)},o.animationStep=function(e){var t=o._animationEnd-o._animationStart,n=Math.max(e-o._animationStart,0),r=n/t,a=(o._zoomTarget-o._zoomStart)*r,i=o._zoomStart+a;if(o._zoomAround){var l=o.calculateZoomCenter(o._centerStart,o._zoomAround,o._zoomStart,i);return{centerStep:l,zoomStep:i}}var u=[o._centerStart[0]+(o._centerTarget[0]-o._centerStart[0])*r,o._centerStart[1]+(o._centerTarget[1]-o._centerStart[1])*r];return{centerStep:u,zoomStep:i}},o.animate=function(e){if(e>=o._animationEnd)o._isAnimating=!1,o.setCenterZoom(o._centerTarget,o._zoomTarget);else{var t=o.animationStep(e),n=t.centerStep,r=t.zoomStep;o.setCenterZoom(n,r),o._animFrame=window.requestAnimationFrame(o.animate)}},o.setCenterZoom=function(e,t){Math.round(o.state.zoom)!==Math.round(t)&&!function(){var n=o.tileValues(o.props,o.state),r=o.tileValues(o.props,{center:e,zoom:t}),a=o.state.oldTiles;o.setState({oldTiles:a.filter(function(e){return e.roundedZoom!==n.roundedZoom}).concat(n)});for(var i={},l=r.tileMinX;l<=r.tileMaxX;l++)for(var u=r.tileMinY;u<=r.tileMaxY;u++){var s=l+"-"+u+"-"+r.roundedZoom;i[s]=!1}o._loadTracker=i}(),o.setState({center:e,zoom:t}),(Math.abs(o.props.zoom-t)>.001||Math.abs(o.props.center[0]-e[0])>1e-4||Math.abs(o.props.center[1]-e[1])>1e-4)&&o.syncToProps(e,t)},o.imageLoaded=function(e){o._loadTracker&&e in o._loadTracker&&(o._loadTracker[e]=!0,0===Object.keys(o._loadTracker).filter(function(e){return!o._loadTracker[e]}).length&&o.setState({oldTiles:[]}))},o.handleTouchStart=function(e){var t=o.props,n=t.width,r=t.height;if(1===e.touches.length){var a=e.touches[0],i=c(o._containerRef,a);i[0]>=0&&i[1]>=0&&i[0]<n&&i[1]<r&&(o._touchStartCoords=[[a.clientX,a.clientY]],e.preventDefault())}else if(2===e.touches.length&&o._touchStartCoords){e.preventDefault(),(o.state.centerDelta||o.state.zoomDelta)&&o.sendDeltaChange();var l=e.touches[0],u=e.touches[1];o._touchStartCoords=[[l.clientX,l.clientY],[u.clientX,u.clientY]],o._touchStartMidPoint=[(l.clientX+u.clientX)/2,(l.clientY+u.clientY)/2],o._touchStartDistance=Math.sqrt(Math.pow(l.clientX-u.clientX,2)+Math.pow(l.clientY-u.clientY,2))}},o.handleTouchMove=function(e){if(1===e.touches.length&&o._touchStartCoords){e.preventDefault();var t=e.touches[0];o.setState({centerDelta:[t.clientX-o._touchStartCoords[0][0],t.clientY-o._touchStartCoords[0][1]]})}else if(2===e.touches.length&&o._touchStartCoords){var n=o.props,r=n.width,a=n.height,i=o.state.zoom;e.preventDefault();var l=e.touches[0],u=e.touches[1],s=(0,v.default)(o._containerRef),c=[(l.clientX+u.clientX)/2,(l.clientY+u.clientY)/2],h=[c[0]-o._touchStartMidPoint[0],c[1]-o._touchStartMidPoint[1]],f=Math.sqrt(Math.pow(l.clientX-u.clientX,2)+Math.pow(l.clientY-u.clientY,2)),d=Math.min(18,i+Math.log2(f/o._touchStartDistance))-i,p=Math.pow(2,d),m=[(s.x+r/2-c[0])*(p-1),(s.y+a/2-c[1])*(p-1)];o.setState({zoomDelta:d,centerDelta:[m[0]+h[0]*p,m[1]+h[1]*p]})}},o.handleTouchEnd=function(e){if(o._touchStartCoords)if(e.preventDefault(),o.sendDeltaChange(),0===e.touches.length)o._touchStartCoords=null;else if(1===e.touches.length){var t=e.touches[0];o._touchStartCoords=[[t.clientX,t.clientY]]}},o.handleMouseDown=function(e){var t=o.props,n=t.width,r=t.height,a=c(o._containerRef,e);a[0]>=0&&a[1]>=0&&a[0]<n&&a[1]<r&&(o._mouseDown=!0,o._dragStart=a,e.preventDefault())},o.handleMouseMove=function(e){o._mousePosition=c(o._containerRef,e),o._mouseDown&&o._dragStart&&o.setState({centerDelta:[o._mousePosition[0]-o._dragStart[0],o._mousePosition[1]-o._dragStart[1]]})},o.handleMouseUp=function(e){o._mouseDown&&(o.sendDeltaChange(),o._mouseDown=!1)},o.sendDeltaChange=function(){var e=o.state,t=e.center,n=e.zoom,r=e.centerDelta,a=e.zoomDelta;if(r||0!==a){var i=u(M(t[1],n+a)-(r?r[0]/256:0),n+a),l=s(g(t[0],n+a)-(r?r[1]/256:0),n+a);o.setCenterZoom([l,i],n+a)}o.setState({centerDelta:null,zoomDelta:0})},o.syncToProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:o.state.center,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:o.state.zoom,n=o.props.onBoundsChanged;n&&n({center:e,zoom:t})},o.handleWheel=function(e){e.preventDefault(),o.handleWheelThrottled(e)},o.handleWheelThrottled=(0,p.throttle)(_,!0,function(e){e.deltaY<0?o.zoomAroundMouse(1):e.deltaY>0&&o.zoomAroundMouse(-1)}),o.zoomAroundMouse=function(e){var t=o.state.zoom;if(!(!o._mousePosition||t+e<1||t+e>18)){var n=o.pixelToLatLng(o._mousePosition[0],o._mousePosition[1],t);o.setCenterZoomTarget(null,t+e,!1,n)}},o.handleContextMenu=function(e){e.preventDefault()},o.pixelToLatLng=function(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:o.state.center,a=o.props,i=a.width,l=a.height,c=[(e-i/2)/256,(t-l/2)/256],h=M(r[1],n)+c[0],f=g(r[0],n)+c[1];return[s(f,n),u(h,n)]},o.latLngToPixel=function(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:o.state.center,a=o.props,i=a.width,l=a.height,u=M(r[1],n),s=g(r[0],n),c=M(t,n),h=g(e,n);return[256*(c-u)+i/2,256*(h-s)+l/2]},o.calculateZoomCenter=function(e,t,n,r){var a=o.latLngToPixel(t[0],t[1],n,e),i=o.pixelToLatLng(a[0],a[1],r,e),l=i[0]-t[0],u=i[1]-t[1];return[e[0]-l,e[1]-u]},o.setRef=function(e){o._containerRef=e},o._mousePosition=null,o._dragStart=null,o._mouseDown=!1,o._touchStartCoords=null,o._isAnimating=!1,o._animationStart=null,o._animationEnd=null,o._centerTarget=null,o._zoomTarget=null,o.state={zoom:e.zoom,center:e.center,zoomDelta:0,centerDelta:null,oldTiles:[]},o}return i(t,e),h(t,[{key:"componentDidMount",value:function(){var e=window.addEventListener;e("mousedown",this.handleMouseDown),e("mouseup",this.handleMouseUp),e("mousemove",this.handleMouseMove),e("touchstart",this.handleTouchStart),e("touchmove",this.handleTouchMove),e("touchend",this.handleTouchEnd)}},{key:"componentWillUnmount",value:function(){var e=window.removeEventListener;e("mousedown",this.handleMouseDown),e("mouseup",this.handleMouseUp),e("mousemove",this.handleMouseMove),e("touchstart",this.handleTouchStart),e("touchmove",this.handleTouchMove),e("touchend",this.handleTouchEnd)}},{key:"componentWillReceiveProps",value:function(e){(Math.abs(e.zoom-this.state.zoom)>.001||Math.abs(e.center[0]-this.state.center[0])>1e-4||Math.abs(e.center[1]-this.state.center[1])>1e-4)&&this.setCenterZoomTarget(e.center,e.zoom,!0)}},{key:"tileValues",value:function(e,t){var o=e.width,n=e.height,r=t.center,a=t.zoom,i=t.centerDelta,l=t.zoomDelta,u=Math.round(a+l),s=a+l-u,c=Math.pow(2,s),h=o/c,f=n/c,d=M(r[1],u)-(i?i[0]/256/c:0),p=g(r[0],u)-(i?i[1]/256/c:0),m=h/2/256,v=f/2/256,_=Math.floor(d-m),y=Math.floor(d+m),w=Math.floor(p-v),b=Math.floor(p+v);return{tileMinX:_,tileMaxX:y,tileMinY:w,tileMaxY:b,tileCenterX:d,tileCenterY:p,roundedZoom:u,zoomDelta:l,scaleWidth:h,scaleHeight:f,scale:c}}},{key:"renderTiles",value:function(){for(var e=this,t=this.state.oldTiles,o=this.props.provider||l,n=this.tileValues(this.props,this.state),r=n.tileMinX,a=n.tileMaxX,i=n.tileMinY,u=n.tileMaxY,s=n.tileCenterX,c=n.tileCenterY,h=n.roundedZoom,f=n.scaleWidth,p=n.scaleHeight,m=n.scale,v=[],_=0;_<t.length;_++){var M=t[_],g=M.roundedZoom-h;if(!(Math.abs(g)>4||0===g))for(var y=1/Math.pow(2,g),w=256*-(r-M.tileMinX*y),b=256*-(i-M.tileMinY*y),T=Math.max(M.tileMinX,0),S=Math.max(M.tileMinY,0),z=Math.min(M.tileMaxX,Math.pow(2,M.roundedZoom)-1),P=Math.min(M.tileMaxY,Math.pow(2,M.roundedZoom)-1),C=T;C<=z;C++)for(var D=S;D<=P;D++)v.push({key:C+"-"+D+"-"+M.roundedZoom,url:o(C,D,M.roundedZoom),left:w+256*(C-M.tileMinX)*y,top:b+256*(D-M.tileMinY)*y,width:256*y,height:256*y,active:!1})}for(var x=Math.max(r,0),O=Math.max(i,0),E=Math.min(a,Math.pow(2,h)-1),k=Math.min(u,Math.pow(2,h)-1),Y=x;Y<=E;Y++)for(var X=O;X<=k;X++)v.push({key:Y+"-"+X+"-"+h,url:o(Y,X,h),left:256*(Y-r),top:256*(X-i),width:256,height:256,active:!0});var Z={width:f,height:p,position:"absolute",top:0,left:0,overflow:"hidden",transform:"scale("+m+", "+m+")",transformOrigin:"top left"},j=-(256*(s-r)-f/2),L=-(256*(c-i)-p/2),A={position:"absolute",width:256*(a-r+1),height:256*(u-i+1),left:j,top:L};return d.default.createElement("div",{style:Z},d.default.createElement("div",{style:A},v.map(function(t){return d.default.createElement("img",{key:t.key,src:t.url,width:t.width,height:t.height,onLoad:function(){return e.imageLoaded(t.key)},style:{position:"absolute",left:t.left,top:t.top,transform:t.transform,transformOrigin:"top left",opacity:1}})})))}},{key:"renderOverlays",value:function(){var e=this,t=this.props,o=t.width,n=t.height,r=this.state,a=r.zoom,i=r.centerDelta,l=r.zoomDelta,u=d.default.Children.map(this.props.children,function(t){var o=t.props,n=o.position,r=o.offset;if(n){var u=e.latLngToPixel(n[0],n[1],a+l);return d.default.cloneElement(t,{left:u[0]-(r?r[0]:0)+(i?i[0]:0),top:u[1]-(r?r[1]:0)+(i?i[1]:0)})}}),s={position:"absolute",width:o,height:n,top:0,left:0};return d.default.createElement("div",{style:s},u)}},{key:"render",value:function(){var e=this.props,t=e.width,o=e.height,n={width:t,height:o,position:"relative",display:"inline-block",overflow:"hidden",background:"#dddddd"};return d.default.createElement("div",{style:n,ref:this.setRef,onContextMenu:this.handleContextMenu,onWheel:this.handleWheel},this.renderTiles(),this.renderOverlays())}}]),t}(f.Component);y.propTypes={center:d.default.PropTypes.array,zoom:d.default.PropTypes.number,width:d.default.PropTypes.number,height:d.default.PropTypes.number,provider:d.default.PropTypes.func,children:d.default.PropTypes.node,animate:d.default.PropTypes.bool,onBoundsChanged:d.default.PropTypes.func},y.defaultProps={animate:!0},t.default=y},170:function(e,t,o){var n=o(171),r=o(172);e.exports={throttle:n,debounce:r}},171:function(e,t){e.exports=function(e,t,o,n){function r(){function r(){i=Number(new Date),o.apply(u,c)}function l(){a=void 0}var u=this,s=Number(new Date)-i,c=arguments;n&&!a&&r(),a&&clearTimeout(a),void 0===n&&s>e?r():t!==!0&&(a=setTimeout(n?l:r,void 0===n?e-s:e))}var a,i=0;return"boolean"!=typeof t&&(n=o,o=t,t=void 0),r}},172:function(e,t,o){var n=o(171);e.exports=function(e,t,o){return void 0===o?n(e,t,!1):n(e,o,t!==!1)}},173:function(e,t){"use strict";function o(e){for(var t=0,o=0,n=!0;e;)t+=e.offsetLeft-(n?0:e.scrollLeft)+e.clientLeft,o+=e.offsetTop-(n?0:e.scrollTop)+e.clientTop,e=e.offsetParent,n=!1;return{x:t,y:o}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o},174:function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),u=o(166),s=n(u),c=function(e){function t(){return r(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),l(t,[{key:"render",value:function(){var e=this.props,t=e.left,o=e.top;return s.default.createElement("div",{style:{position:"absolute",left:t,top:o}},this.props.children)}}]),t}(u.Component);c.propTypes={position:s.default.PropTypes.array,offset:s.default.PropTypes.array,left:s.default.PropTypes.number,top:s.default.PropTypes.number,children:s.default.PropTypes.node},t.default=c},175:function(e,t,o){e.exports=o.p+"index.html"}});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13783748

increased by0.03%

Lines of code

1834

increased by3.73%

Number of lines in readme file

49

increased by2.08%

No dependency changes