1 files changed, 53 insertions, 0 deletions
diff --git a/node_modules/pigeon-maps/src/controls/ZoomControl.tsx b/node_modules/pigeon-maps/src/controls/ZoomControl.tsx
new file mode 100644
index 0000000..a98ba39
--- /dev/null
+++ b/node_modules/pigeon-maps/src/controls/ZoomControl.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { PigeonProps } from '../types'
+
+interface ZoomProps extends PigeonProps {
+  style?: React.CSSProperties
+  buttonStyle?: React.CSSProperties
+}
+
+const commonStyle: React.CSSProperties = {
+  position: 'absolute',
+  top: 10,
+  left: 10,
+}
+
+const commonButtonStyle: React.CSSProperties = {
+  width: 28,
+  height: 28,
+  borderRadius: 2,
+  boxShadow: '0 1px 4px -1px rgba(0,0,0,.3)',
+  background: 'white',
+  lineHeight: '26px',
+  fontSize: '20px',
+  fontWeight: 700,
+  color: '#666',
+  marginBottom: 1,
+  cursor: 'pointer',
+  border: 'none',
+  display: 'block',
+  outline: 'none',
+}
+
+export function ZoomControl({ style, buttonStyle, setCenterZoom, mapState, mapProps }: ZoomProps): JSX.Element {
+  return (
+    <div className="pigeon-zoom-buttons pigeon-drag-block" style={style ? { ...commonStyle, ...style } : commonStyle}>
+      <button
+        className="pigeon-zoom-in"
+        type="button"
+        style={buttonStyle ? { ...commonButtonStyle, ...buttonStyle } : commonButtonStyle}
+        onClick={() => setCenterZoom(mapState.center, Math.min(mapState.zoom + 1, mapProps.maxZoom))}
+      >
+        +
+      </button>
+      <button
+        className="pigeon-zoom-out"
+        type="button"
+        style={buttonStyle ? { ...commonButtonStyle, ...buttonStyle } : commonButtonStyle}
+        onClick={() => setCenterZoom(mapState.center, Math.max(mapState.zoom - 1, mapProps.minZoom))}
+      >
+        –
+      </button>
+    </div>
+  )
+}