@longline/aqua-ui 1.0.0

package/map/controls/Graticule/Graticule.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+interface IGraticuleProps {
+    /**
+     * Drag a graticule line every `n` degrees.
+     */
+    degrees: number;
+    /**
+     * Optional graticule color.
+     */
+    color?: string;
+    /**
+     * An adaptive Graticule adds subdivisions as the map zoom level increases,
+     * while a non-adaptive Graticule keeps the same grid at all zoom levels.
+     */
+    adaptive?: boolean;
+    /**
+     * Show labels?
+     */
+    labels?: boolean;
+    /**
+     * In a decimal representation, coordinates are not shown as degrees, minutes
+     * and seconds, but as fractional numbers.
+     */
+    decimal?: boolean;
+}
+/**
+ * The `Graticule` component draws a graticule over the map. The caller
+ * specifies at which degree intervals lines must be drawn.
+ *
+ * The Graticule can be static (lines are fixed at the the intervals set) or
+ * `adaptive` (line density increases by a factor of two for each zoom level).
+ * `labels` can be shown or hidden.
+ */
+declare const Graticule: (props: IGraticuleProps) => React.JSX.Element;
+export { Graticule, IGraticuleProps };

package/map/controls/Graticule/Graticule.js

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import { Layer, Source, useMap } from 'react-map-gl';
+import { useViewState } from '../../Map';
+/**
+ * The `Graticule` component draws a graticule over the map. The caller
+ * specifies at which degree intervals lines must be drawn.
+ *
+ * The Graticule can be static (lines are fixed at the the intervals set) or
+ * `adaptive` (line density increases by a factor of two for each zoom level).
+ * `labels` can be shown or hidden.
+ */
+var Graticule = function (props) {
+    var _a;
+    var viewState = useViewState();
+    var map = useMap().current;
+    var getBounds = function () {
+        var bounds = map.getBounds();
+        var north = bounds.getNorth();
+        var south = bounds.getSouth();
+        var vdiff = Math.abs(north - south);
+        north += vdiff;
+        south -= vdiff;
+        var west = bounds.getWest();
+        var east = bounds.getEast();
+        var hdiff = Math.abs(east - west);
+        east += hdiff;
+        west -= hdiff;
+        if (east > 180) {
+            west -= (east - 180);
+            east = 190;
+        }
+        if (west < -180) {
+            east -= (west - 180);
+            west = -190;
+        }
+        return { north: north, east: east, south: south, west: west };
+    };
+    var formatNumber = function (x, decimals) {
+        return x.toLocaleString(undefined, {
+            useGrouping: true,
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals
+        });
+    };
+    var toDMS = function (value) {
+        value = Math.abs(value);
+        var degrees = Math.trunc(value);
+        var seconds = (value - degrees) * 3600;
+        // Seconds are multiplied by 10,000, rounded, then divided again to avoid float errors.
+        var minutes = Math.trunc(Math.round((seconds / 60) * 10000) / 10000);
+        seconds = Math.round(seconds) % 60;
+        return [degrees, minutes, seconds];
+    };
+    var formatLatitude = function (lat) {
+        var _a = toDMS(lat), d = _a[0], m = _a[1], s = _a[2];
+        var ms = m.toString();
+        if (ms.length < 2)
+            ms = "0" + ms;
+        var ss = s.toFixed(0);
+        if (ss.length < 2)
+            ss = "0" + ss;
+        return "".concat(d, "\u00B0 ").concat(ms, "\u2032 ").concat(ss, "\u2033 ").concat(d >= 0 ? "N" : "S");
+    };
+    var formatLongitude = function (lng) {
+        var _a = toDMS(lng), d = _a[0], m = _a[1], s = _a[2];
+        var ms = m.toString();
+        if (ms.length < 2)
+            ms = "0" + ms;
+        var ss = s.toFixed(0);
+        if (ss.length < 2)
+            ss = "0" + ss;
+        return "".concat(d, "\u00B0 ").concat(ms, "\u2032 ").concat(ss, "\u2033 ").concat(d >= 0 ? "E" : "W");
+    };
+    var buildGrid = function () {
+        var step = props.adaptive ? props.degrees / Math.pow(2, Math.ceil(viewState.zoom - 1)) : props.degrees;
+        var bounds = getBounds();
+        var features = [];
+        var count = 0;
+        for (var lng = -180; lng <= 180; lng += step) {
+            if (!(lng > bounds.west && lng < bounds.east))
+                continue;
+            features.push({
+                type: 'Feature',
+                geometry: { type: 'LineString', coordinates: [[lng, -90], [lng, 90]] },
+                properties: {}
+            });
+            count++;
+        }
+        for (var lat = -90; lat <= 90; lat += step) {
+            if (!(lat < bounds.north && lat > bounds.south))
+                continue;
+            features.push({
+                type: 'Feature',
+                geometry: { type: 'LineString', coordinates: [[-180, lat], [180, lat]] },
+                properties: {}
+            });
+            count++;
+        }
+        for (var lng = -180 + step; lng <= 180; lng += step) {
+            if (!(lng > bounds.west && lng < bounds.east))
+                continue;
+            for (var lat = -90 + step; lat <= 90; lat += step) {
+                if (!(lat < bounds.north && lat > bounds.south))
+                    continue;
+                features.push({
+                    type: 'Feature',
+                    geometry: { type: 'Point', coordinates: [lng + step / 2, lat] },
+                    properties: { x: props.decimal ? formatNumber(lat, 3) : formatLatitude(lat) }
+                });
+                features.push({
+                    type: 'Feature',
+                    geometry: { type: 'Point', coordinates: [lng, lat + step / 2] },
+                    properties: { x: props.decimal ? formatNumber(lng, 3) : formatLongitude(lng) }
+                });
+                count += 2;
+            }
+        }
+        return { type: 'FeatureCollection', features: features };
+    };
+    var _b = React.useState({ type: 'FeatureCollection', features: [] }), featureCollection = _b[0], setFeatureCollection = _b[1];
+    React.useEffect(function () {
+        setFeatureCollection(buildGrid());
+    }, [viewState.zoom, viewState.latitude, viewState.longitude]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Source, { type: "geojson", data: featureCollection },
+            React.createElement(Layer, { type: "line", filter: ['==', ["geometry-type"], 'LineString'], paint: {
+                    "line-color": (_a = props.color) !== null && _a !== void 0 ? _a : "lightblue",
+                    "line-width": 0.5,
+                    "line-dasharray": [5, 5]
+                } }),
+            props.labels && React.createElement(Layer, { type: "symbol", filter: ['==', ["geometry-type"], 'Point'], layout: {
+                    "symbol-placement": "point",
+                    'text-size': 10,
+                    'text-field': '{x}'
+                }, paint: {
+                    'text-color': '#fff',
+                    'text-halo-width': 1,
+                    'text-halo-blur': 0,
+                    'text-halo-color': '#333',
+                } }))));
+};
+export { Graticule };

package/map/controls/MapLoader/MapLoader.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { IMapControlProps } from '../base/MapControl';
+interface IProps extends IMapControlProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Optional control size in pixels.
+     * @default 40
+     */
+    size?: number;
+    /**
+     * Should the loader currently be shown? If false, the loader is not
+     * displayed. If true, the loader is displayed.
+     * @default false
+     */
+    active: boolean;
+    /**
+     * Optional SVG color.
+     * @default white
+     */
+    color?: string;
+}
+/**
+ * A loading animation, to be shown when the map is loading data. Captures no
+ * pointer events. Use the `active` prop to show and hide the animation.
+ * This shows a rotating notched-circle SVG.
+ *
+ * ```tsx
+ * <MapLoader x={-50} y={50} active color="green"/>
+ * ```
+ */
+declare const MapLoader: ({ size, color, active, ...props }: IProps) => React.JSX.Element;
+export { MapLoader, IProps };

package/map/controls/MapLoader/MapLoader.js

@@ -0,0 +1,73 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { MapControl } from '../base/MapControl';
+var DEFAULT_SIZE = 40; // Default control size (px)
+var DEFAULT_COLOR = "white"; // Default control color
+var MapLoaderBase = function (props) {
+    return (React.createElement(MapControl, { x: props.x, y: props.y },
+        React.createElement("div", { className: props.className },
+            React.createElement(Svg, { width: "1792", height: "1792", viewBox: "0 0 1792 1792", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("path", { d: "M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z" })))));
+};
+var rotate = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n"], ["\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n"])));
+var fade = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% { opacity: 1 }\n  50% { opacity: 0.2 }\n  100% { opacity: 1 }\n"], ["\n  0% { opacity: 1 }\n  50% { opacity: 0.2 }\n  100% { opacity: 1 }\n"])));
+var Svg = styled('svg')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  animation: ", " 2s linear infinite, ", " 3s linear infinite;\n"], ["\n  width: 100%;\n  height: 100%;\n  animation: ", " 2s linear infinite, ", " 3s linear infinite;\n"
+    /**
+     * Shows an animated Loading component when the active prop is true.
+     */
+])), rotate, fade);
+/**
+ * Shows an animated Loading component when the active prop is true.
+ */
+var MapLoaderStyled = styled(MapLoaderBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n\n  opacity: 0;\n  pointer-events: none;\n  user-select: none;\n  transition: opacity ease-in-out 150ms;\n  opacity: ", ";\n  ", " {\n    fill: ", ";\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n\n  opacity: 0;\n  pointer-events: none;\n  user-select: none;\n  transition: opacity ease-in-out 150ms;\n  opacity: ", ";\n  ", " {\n    fill: ", ";\n  }\n"
+    /**
+     * A loading animation, to be shown when the map is loading data. Captures no
+     * pointer events. Use the `active` prop to show and hide the animation.
+     * This shows a rotating notched-circle SVG.
+     *
+     * ```tsx
+     * <MapLoader x={-50} y={50} active color="green"/>
+     * ```
+     */
+])), function (p) { return p.size; }, function (p) { return p.size; }, function (p) { return p.active ? 1 : 0; }, Svg, function (p) { return p.color; });
+/**
+ * A loading animation, to be shown when the map is loading data. Captures no
+ * pointer events. Use the `active` prop to show and hide the animation.
+ * This shows a rotating notched-circle SVG.
+ *
+ * ```tsx
+ * <MapLoader x={-50} y={50} active color="green"/>
+ * ```
+ */
+var MapLoader = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 40 : _b, _c = _a.color, color = _c === void 0 ? "white" : _c, _d = _a.active, active = _d === void 0 ? false : _d, props = __rest(_a, ["size", "color", "active"]);
+    return React.createElement(MapLoaderStyled, __assign({ size: size, color: color, active: active }, props));
+};
+export { MapLoader };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/map/controls/ScaleControl/ScaleControl.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { IMapControlProps } from '../base/MapControl/MapControl';
+interface IProps extends IMapControlProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Control's base width (px). The width may expand to double this.
+     * @default 100
+     */
+    width?: number;
+}
+/**
+ * The `ScaleControl` shows a scale in meters per pixel.
+ *
+ * The control is positioned using `x` and `{y}`. Negative coordinates mean
+ * offsets from right and bottom. A `width` may be provided, which defaults to
+ * `100`.
+ *
+ * ```tsx
+ * <ScaleControl width={200} x={10} y={-62}/>
+ * ```
+ */
+declare const ScaleControl: ({ x, y, width, ...props }: IProps) => React.JSX.Element;
+export { ScaleControl, IProps };

package/map/controls/ScaleControl/ScaleControl.js

@@ -0,0 +1,107 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { useViewState } from '../../Map';
+import { MapControl } from '../base/MapControl/MapControl';
+var DEFAULT_WIDTH = 100;
+// Number display steps, in meters:
+var STEPS = [
+    1, 2, 3, 5, 10, 20, 30, 50, 100, 200, 300, 500, 1000, 2000, 3000, 5000, 10000,
+    20000, 30000, 50000, 100000, 200000, 300000, 500000, 1000000, 2000000,
+    3000000, 5000000
+];
+var ScaleControlBase = function (props) {
+    var _a;
+    var viewState = useViewState();
+    //
+    // Given a distance in meters, determine a rounded value.
+    // 
+    var getRoundedMeters = function (meters) {
+        var current_diff = 999999999;
+        var dist = 0;
+        STEPS.forEach(function (step) {
+            var diff = Math.abs(meters - step);
+            if (diff < current_diff) {
+                current_diff = diff;
+                dist = step;
+            }
+        });
+        return dist;
+    };
+    var formatNumber = function (num) {
+        return num.toLocaleString(undefined, { useGrouping: true, minimumFractionDigits: 0, maximumFractionDigits: 0 });
+    };
+    //
+    // Convert distance in meters to human-readable text (with units).
+    //
+    var getHumanText = function (meters) {
+        if (meters >= 1000) {
+            return "".concat(formatNumber(meters / 1000), "km");
+        }
+        else {
+            return "".concat(formatNumber(meters), "m");
+        }
+    };
+    var meterspx = 156543.03392 * Math.cos(viewState.latitude * Math.PI / 180) / Math.pow(2, viewState.zoom + 1);
+    var width = (_a = props.width) !== null && _a !== void 0 ? _a : DEFAULT_WIDTH;
+    var meters = width * meterspx;
+    var dist = getRoundedMeters(meters);
+    width = width * dist / meters;
+    return (React.createElement(MapControl, { x: props.x, y: props.y },
+        React.createElement("div", { className: props.className, style: { width: "".concat(width, "px") } }, getHumanText(dist))));
+};
+var ScaleControlStyled = styled(ScaleControlBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Size:\n  box-sizing: border-box;\n  height: 20px;\n  padding-left: 5px;\n\n  // Appearance:\n  border: solid 2px #333333;\n  border-top: none;\n  user-select: none;\n  pointer-events: none;\n  background-color: #C7C7C7;\n  font-size: 10px; /* TODO: Not a theme font size. */\n  color: #333;\n  white-space: nowrap;\n  opacity: 0.8;\n  transition: width ease-in-out 100ms;\n"], ["\n  // Size:\n  box-sizing: border-box;\n  height: 20px;\n  padding-left: 5px;\n\n  // Appearance:\n  border: solid 2px #333333;\n  border-top: none;\n  user-select: none;\n  pointer-events: none;\n  background-color: #C7C7C7;\n  font-size: 10px; /* TODO: Not a theme font size. */\n  color: #333;\n  white-space: nowrap;\n  opacity: 0.8;\n  transition: width ease-in-out 100ms;\n"
+    /**
+     * The `ScaleControl` shows a scale in meters per pixel.
+     *
+     * The control is positioned using `x` and `{y}`. Negative coordinates mean
+     * offsets from right and bottom. A `width` may be provided, which defaults to
+     * `100`.
+     *
+     * ```tsx
+     * <ScaleControl width={200} x={10} y={-62}/>
+     * ```
+     */
+])));
+/**
+ * The `ScaleControl` shows a scale in meters per pixel.
+ *
+ * The control is positioned using `x` and `{y}`. Negative coordinates mean
+ * offsets from right and bottom. A `width` may be provided, which defaults to
+ * `100`.
+ *
+ * ```tsx
+ * <ScaleControl width={200} x={10} y={-62}/>
+ * ```
+ */
+var ScaleControl = function (_a) {
+    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.width, width = _d === void 0 ? 100 : _d, props = __rest(_a, ["x", "y", "width"]);
+    return React.createElement(ScaleControlStyled, __assign({ x: x, y: y, width: width }, props));
+};
+export { ScaleControl };
+var templateObject_1;

package/map/controls/ZoomInButton/ZoomInButton.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IMapButtonProps } from '../base/MapButton';
+/**
+ * The `ZoomInButton` zooms the map in when clicked.  It respects the min and
+ * max zoom levels of the map.
+ *
+ * The current map ViewState must be passed to this control, which is done
+ * automatically when the control is hosted inside a `Map` instance. The ViewState
+ * is then passed down through a context and can be accessed using `useViewState`.
+ *
+ * A default _hint_ is provided, but can be overridden using `hint`. The hint can
+ * be removed entirely by setting `hint={null}`.
+ *
+ * ```tsx
+ * <ZoomInButton active x={40} y={200}/>
+ * ```
+ */
+declare const ZoomInButton: ({ hint, ...props }: IMapButtonProps) => React.JSX.Element;
+export { ZoomInButton, IMapButtonProps };

package/map/controls/ZoomInButton/ZoomInButton.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { useMap } from 'react-map-gl';
+import { MapButton } from '../base/MapButton';
+import { useViewState } from '../../Map';
+import { Mouse } from '../../../controls/Mouse';
+import { Key } from '../../../controls/Key';
+/**
+ * The `ZoomInButton` zooms the map in when clicked.  It respects the min and
+ * max zoom levels of the map.
+ *
+ * The current map ViewState must be passed to this control, which is done
+ * automatically when the control is hosted inside a `Map` instance. The ViewState
+ * is then passed down through a context and can be accessed using `useViewState`.
+ *
+ * A default _hint_ is provided, but can be overridden using `hint`. The hint can
+ * be removed entirely by setting `hint={null}`.
+ *
+ * ```tsx
+ * <ZoomInButton active x={40} y={200}/>
+ * ```
+ */
+var ZoomInButton = function (_a) {
+    var _b = _a.hint, hint = _b === void 0 ? React.createElement(React.Fragment, null,
+        React.createElement(Key, { value: "+" }),
+        " or ",
+        React.createElement(Mouse, { size: 16, wheel: true }),
+        " Zoom in") : _b, props = __rest(_a, ["hint"]);
+    var viewState = useViewState();
+    var map = useMap().current;
+    return (React.createElement(MapButton, __assign({ disabled: viewState.zoom >= map.getMaxZoom(), onClick: function () { return map.zoomIn(); }, hint: hint }, props),
+        React.createElement("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M100,43.2v13.6c0,1.9-0.7,3.5-2,4.8c-1.3,1.3-2.9,2-4.8,2H63.6v29.5c0,1.9-0.7,3.5-2,4.8c-1.3,1.3-2.9,2-4.8,2H43.2c-1.9,0-3.5-0.7-4.8-2c-1.3-1.3-2-2.9-2-4.8V63.6H6.8c-1.9,0-3.5-0.7-4.8-2c-1.3-1.3-2-2.9-2-4.8V43.2c0-1.9,0.7-3.5,2-4.8c1.3-1.3,2.9-2,4.8-2h29.5V6.8c0-1.9,0.7-3.5,2-4.8c1.3-1.3,2.9-2,4.8-2h13.6c1.9,0,3.5,0.7,4.8,2c1.3,1.3,2,2.9,2,4.8v29.5h29.5c1.9,0,3.5,0.7,4.8,2C99.3,39.7,100,41.3,100,43.2z" }))));
+};
+export { ZoomInButton };

package/map/controls/ZoomOutButton/ZoomOutButton.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IMapButtonProps } from '../base/MapButton';
+/**
+ * The `ZoomInButton` zooms the map out when clicked.  It respects the min and
+ * max zoom levels of the map.
+ *
+ * The current map ViewState must be passed to this control, which is done
+ * automatically when the control is hosted inside a `Map` instance. The ViewState
+ * is then passed down through a context and can be accessed using `useViewState`.
+ *
+ * A default _hint_ is provided, but can be overridden using `hint`. The hint can
+ * be removed entirely by setting `hint={null}`.
+ *
+ * ```tsx
+  * <ZoomOutButton disabled x={40} y={250}/>
+ * ```
+ */
+declare const ZoomOutButton: ({ hint, ...props }: IMapButtonProps) => React.JSX.Element;
+export { ZoomOutButton, IMapButtonProps };

package/map/controls/ZoomOutButton/ZoomOutButton.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { useMap } from 'react-map-gl';
+import { MapButton } from '../base/MapButton';
+import { useViewState } from '../../Map';
+import { Mouse } from '../../../controls/Mouse';
+import { Key } from '../../../controls/Key';
+/**
+ * The `ZoomInButton` zooms the map out when clicked.  It respects the min and
+ * max zoom levels of the map.
+ *
+ * The current map ViewState must be passed to this control, which is done
+ * automatically when the control is hosted inside a `Map` instance. The ViewState
+ * is then passed down through a context and can be accessed using `useViewState`.
+ *
+ * A default _hint_ is provided, but can be overridden using `hint`. The hint can
+ * be removed entirely by setting `hint={null}`.
+ *
+ * ```tsx
+  * <ZoomOutButton disabled x={40} y={250}/>
+ * ```
+ */
+var ZoomOutButton = function (_a) {
+    var _b = _a.hint, hint = _b === void 0 ? React.createElement(React.Fragment, null,
+        React.createElement(Key, { value: "-" }),
+        " or ",
+        React.createElement(Mouse, { size: 16, wheel: true }),
+        " Zoom out") : _b, props = __rest(_a, ["hint"]);
+    var viewState = useViewState();
+    var map = useMap().current;
+    return (React.createElement(MapButton, __assign({ disabled: viewState.zoom <= map.getMinZoom(), onClick: function () { return map.zoomOut(); }, hint: hint }, props),
+        React.createElement("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M93.2,36.4c1.9,0,3.5,0.7,4.8,2c1.3,1.3,2,2.9,2,4.8v13.6c0,1.9-0.7,3.5-2,4.8c-1.3,1.3-2.9,2-4.8,2H63.6H6.8c-1.9,0-3.5-0.7-4.8-2c-1.3-1.3-2-2.9-2-4.8V43.2c0-1.9,0.7-3.5,2-4.8c1.3-1.3,2.9-2,4.8-2" }))));
+};
+export { ZoomOutButton };

package/map/controls/base/MapButton/Hint.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /** Hint horizontal offset from center of parent, in pixels. */
+    offset: number;
+    /** Should Hint appear to left or right of parent? */
+    side: 'left' | 'right';
+}
+/**
+ * A Hint appears next to a parent control, at the specified side (left or
+ * right), with an optional offset.
+ */
+declare const Hint: (p: IProps) => React.JSX.Element;
+export { Hint, IProps as IHintProps };

package/map/controls/base/MapButton/Hint.js

@@ -0,0 +1,34 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+var HEIGHT = 24; // Hint height (px)
+var HintBase = function (props) {
+    return React.createElement("div", { className: props.className }, props.children);
+};
+var HintStyled = styled(HintBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  // Position:\n  position: absolute;\n  ", ";\n  ", ";\n  top: calc(50% - ", "px);\n  height: ", "px;\n  padding: 0 12px 0 12px;\n  margin: 0 12 0 12px;\n  font: ", ";\n\n  // Border:\n  border-radius: ", "px;\n\n  // Color:\n  background-color: ", ";\n  color: ", ";\n  white-space: nowrap;\n  pointer-events: none;\n  user-select: none;\n  transition: opacity ease-in-out ", "ms;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"], ["\n  // Position:\n  position: absolute;\n  ", ";\n  ", ";\n  top: calc(50% - ", "px);\n  height: ", "px;\n  padding: 0 12px 0 12px;\n  margin: 0 12 0 12px;\n  font: ", ";\n\n  // Border:\n  border-radius: ", "px;\n\n  // Color:\n  background-color: ", ";\n  color: ", ";\n  white-space: nowrap;\n  pointer-events: none;\n  user-select: none;\n  transition: opacity ease-in-out ", "ms;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"
+    /**
+     * A Hint appears next to a parent control, at the specified side (left or
+     * right), with an optional offset.
+     */
+])), function (p) { return p.side == "left" && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["left:  calc(100% + ", "px);"], ["left:  calc(100% + ", "px);"])), p.offset); }, function (p) { return p.side == "right" && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["right: calc(100% + ", "px);"], ["right: calc(100% + ", "px);"])), p.offset); }, HEIGHT / 2, HEIGHT, function (p) { return p.theme.font.labelSmall; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.animation.duration * 3; });
+/**
+ * A Hint appears next to a parent control, at the specified side (left or
+ * right), with an optional offset.
+ */
+var Hint = function (p) { return React.createElement(HintStyled, __assign({}, p)); };
+export { Hint };
+var templateObject_1, templateObject_2, templateObject_3;