@map-colonies/react-components 3.8.1 → 3.10.2

package/dist/ol-map/interactions/draw.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawInteraction = void 0;
+var react_1 = require("react");
+var interaction_1 = require("ol/interaction");
+var Draw_1 = require("ol/interaction/Draw");
+var GeometryType_1 = __importDefault(require("ol/geom/GeometryType"));
+var format_1 = require("ol/format");
+var map_1 = require("../map");
+var enums_1 = require("../../models/enums");
+var DrawInteraction = function (_a) {
+    var drawType = _a.drawType, onPolygonSelected = _a.onPolygonSelected;
+    var map = map_1.useMap();
+    react_1.useEffect(function () {
+        var options = { type: GeometryType_1.default.CIRCLE };
+        switch (drawType) {
+            case enums_1.DrawType.BOX:
+                options.geometryFunction = Draw_1.createBox();
+                break;
+            case enums_1.DrawType.POLYGON:
+                options.type = GeometryType_1.default.POLYGON;
+                break;
+            default:
+                return;
+        }
+        var draw = new interaction_1.Draw(options);
+        map.addInteraction(draw);
+        var onDrawEnd = function (e) {
+            var geoJson = new format_1.GeoJSON();
+            var geom = geoJson.writeGeometryObject(e.feature.getGeometry());
+            onPolygonSelected === null || onPolygonSelected === void 0 ? void 0 : onPolygonSelected(geom);
+        };
+        draw.on('drawend', onDrawEnd);
+        return function () {
+            draw.un('drawend', onDrawEnd);
+            map.removeInteraction(draw);
+        };
+    }, [onPolygonSelected, drawType, map]);
+    return null;
+};
+exports.DrawInteraction = DrawInteraction;

package/dist/ol-map/interactions/index.d.ts

@@ -0,0 +1 @@
+export * from './draw';

package/dist/ol-map/interactions/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./draw"), exports);

package/dist/ol-map/layers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './tile-layer';
+export * from './vector-layer';
+export * from './vector-tile-layer';

package/dist/ol-map/layers/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./tile-layer"), exports);
+__exportStar(require("./vector-layer"), exports);
+__exportStar(require("./vector-tile-layer"), exports);

package/dist/ol-map/layers/tile-layer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Tile } from 'ol/layer';
+import { Options } from 'ol/layer/Base';
+interface TileLayerProps {
+    options?: Options;
+}
+export declare const useTileLayer: () => Tile;
+export declare const TileLayer: React.FC<TileLayerProps>;
+export {};

package/dist/ol-map/layers/tile-layer.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TileLayer = exports.useTileLayer = void 0;
+var react_1 = __importStar(require("react"));
+var layer_1 = require("ol/layer");
+var map_1 = require("../map");
+var tileLayerContext = react_1.createContext(null);
+var TileLayerProvider = tileLayerContext.Provider;
+var useTileLayer = function () {
+    var layer = react_1.useContext(tileLayerContext);
+    if (layer === null) {
+        throw new Error('tile layer context is null, please check the provider');
+    }
+    return layer;
+};
+exports.useTileLayer = useTileLayer;
+var TileLayer = function (_a) {
+    var options = _a.options, children = _a.children;
+    var map = map_1.useMap();
+    var tileLayer = react_1.useState(new layer_1.Tile(options))[0];
+    react_1.useEffect(function () {
+        map.addLayer(tileLayer);
+        return function () {
+            map.removeLayer(tileLayer);
+        };
+    }, [map, tileLayer]);
+    return react_1.default.createElement(TileLayerProvider, { value: tileLayer }, children);
+};
+exports.TileLayer = TileLayer;

package/dist/ol-map/layers/vector-layer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Vector } from 'ol/layer';
+export declare const useVectorLayer: () => Vector;
+export declare const VectorLayer: React.FC;

package/dist/ol-map/layers/vector-layer.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VectorLayer = exports.useVectorLayer = void 0;
+var react_1 = __importStar(require("react"));
+var layer_1 = require("ol/layer");
+var map_1 = require("../map");
+var vectorLayerContext = react_1.createContext(null);
+var VectorLayerProvider = vectorLayerContext.Provider;
+var useVectorLayer = function () {
+    var layer = react_1.useContext(vectorLayerContext);
+    if (layer === null) {
+        throw new Error('vector layer context is null, please check the provider');
+    }
+    return layer;
+};
+exports.useVectorLayer = useVectorLayer;
+var VectorLayer = function (_a) {
+    var children = _a.children;
+    var map = map_1.useMap();
+    var vectorLayer = react_1.useState(new layer_1.Vector())[0];
+    react_1.useEffect(function () {
+        map.addLayer(vectorLayer);
+        return function () {
+            map.removeLayer(vectorLayer);
+        };
+    }, [map, vectorLayer]);
+    return (react_1.default.createElement(VectorLayerProvider, { value: vectorLayer }, children));
+};
+exports.VectorLayer = VectorLayer;

package/dist/ol-map/layers/vector-tile-layer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import VectorTile from 'ol/layer/VectorTile';
+import { Options } from 'ol/layer/Base';
+import { MapStyle } from '../style';
+export interface VectorTileLayerProps {
+    options?: Options;
+    style?: MapStyle;
+}
+export declare const useVectorTileLayer: () => VectorTile;
+export declare const VectorTileLayer: React.FC<VectorTileLayerProps>;

package/dist/ol-map/layers/vector-tile-layer.js

@@ -0,0 +1,66 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VectorTileLayer = exports.useVectorTileLayer = void 0;
+var react_1 = __importStar(require("react"));
+var VectorTile_1 = __importDefault(require("ol/layer/VectorTile"));
+var map_1 = require("../map");
+var style_1 = require("../style");
+var vectorTileLayerContext = react_1.createContext(null);
+var VectorTileLayerProvider = vectorTileLayerContext.Provider;
+var useVectorTileLayer = function () {
+    var layer = react_1.useContext(vectorTileLayerContext);
+    if (layer === null) {
+        throw new Error('vector tile layer context is null, please check the provider');
+    }
+    return layer;
+};
+exports.useVectorTileLayer = useVectorTileLayer;
+var VectorTileLayer = function (_a) {
+    var children = _a.children, options = _a.options, style = _a.style;
+    var map = map_1.useMap();
+    var vectorTileLayer = react_1.useState(new VectorTile_1.default(__assign(__assign({}, options), { style: style ? style : style_1.defaultStyle })))[0];
+    react_1.useEffect(function () {
+        map.addLayer(vectorTileLayer);
+        return function () {
+            map.removeLayer(vectorTileLayer);
+        };
+    }, [map, vectorTileLayer]);
+    react_1.useEffect(function () {
+        vectorTileLayer.setStyle(style ? style : style_1.defaultStyle);
+    }, [vectorTileLayer, style]);
+    return (react_1.default.createElement(VectorTileLayerProvider, { value: vectorTileLayer }, children));
+};
+exports.VectorTileLayer = VectorTileLayer;

package/dist/ol-map/map.css

@@ -0,0 +1,17 @@
+.map {
+  height: 100%;
+  width: 100%;
+}
+
+.ol-mouse-position {
+  top: auto !important;
+  right: auto !important;
+  bottom: 8px;
+  left: 8px;
+  background-color: white;
+  opacity: 0.7;
+  font-size: 12px;
+  padding: 2px 2px;
+  border-radius: 2px;
+}
+/* @import '../../../../node_modules/ol/ol.css'; */

package/dist/ol-map/map.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Map as OlMap } from 'ol';
+import './map.css';
+import 'ol/ol.css';
+import { Proj } from '../utils/projections';
+export interface MapProps {
+    allowFullScreen?: boolean;
+    showMousePosition?: boolean;
+    projection?: Proj;
+    center?: [number, number];
+    zoom?: number;
+}
+export declare const useMap: () => OlMap;
+export declare const Map: React.FC<MapProps>;

package/dist/ol-map/map.js

@@ -0,0 +1,117 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Map = exports.useMap = void 0;
+var react_1 = __importStar(require("react"));
+var ol_1 = require("ol");
+require("./map.css");
+require("ol/ol.css");
+var coordinate_1 = require("ol/coordinate");
+var control_1 = require("ol/control");
+var MousePosition_1 = __importDefault(require("ol/control/MousePosition"));
+var proj_1 = require("ol/proj");
+var projections_1 = require("../utils/projections");
+var mapContext = react_1.createContext(null);
+var MapProvider = mapContext.Provider;
+var CENTER_LAT = 35, CENTER_LON = 32, DEFAULT_ZOOM = 10;
+var getDefaultCenter = function (projection) {
+    return projection !== undefined && projection !== projections_1.Proj.WGS84
+        ? proj_1.transform([CENTER_LAT, CENTER_LON], projections_1.Proj.WGS84, projection)
+        : [CENTER_LAT, CENTER_LON];
+};
+var getCoordinateFormatString = function (projection) {
+    switch (projection) {
+        case projections_1.Proj.WEB_MERCATOR:
+            return function (coord) {
+                return coordinate_1.format(coord, 'Mercator: {y}m, {x}m', projections_1.COORDINATES_MERCATOR_FRACTION_DIGITS);
+            };
+        case projections_1.Proj.WGS84:
+            return function (coord) {
+                return coordinate_1.format(coord, 'WGS84: {y}°N {x}°E', projections_1.COORDINATES_WGS_FRACTION_DIGITS);
+            };
+        default:
+            return function (coord) { return ''; };
+    }
+};
+var useMap = function () {
+    var map = react_1.useContext(mapContext);
+    if (map === null) {
+        throw new Error('map context is null, please check the provider');
+    }
+    return map;
+};
+exports.useMap = useMap;
+var Map = function (props) {
+    var mapElementRef = react_1.useRef(null);
+    var allowFullScreen = props.allowFullScreen, showMousePosition = props.showMousePosition, projection = props.projection;
+    var map = react_1.useState(new ol_1.Map({
+        view: new ol_1.View({
+            projection: projection !== null && projection !== void 0 ? projection : projections_1.Proj.WGS84,
+        }),
+        controls: control_1.defaults(),
+    }))[0];
+    react_1.useEffect(function () {
+        var _a;
+        map.getView().setCenter((_a = props.center) !== null && _a !== void 0 ? _a : getDefaultCenter(props.projection));
+    }, [map, props.center, props.projection]);
+    react_1.useEffect(function () {
+        var _a;
+        map.getView().setZoom((_a = props.zoom) !== null && _a !== void 0 ? _a : DEFAULT_ZOOM);
+    }, [map, props.zoom, props.projection]);
+    // eslint-disable-next-line
+    var removeControl = function (ctrType, mapInst) {
+        var controls = mapInst.getControls();
+        controls.forEach(function (control) {
+            if (control instanceof ctrType) {
+                mapInst.removeControl(control);
+            }
+        });
+    };
+    react_1.useEffect(function () {
+        map.setTarget(mapElementRef.current);
+        if (allowFullScreen !== undefined && allowFullScreen) {
+            map.addControl(new control_1.FullScreen());
+        }
+        else {
+            removeControl(control_1.FullScreen, map);
+        }
+    }, [map, allowFullScreen]);
+    react_1.useEffect(function () {
+        if (showMousePosition !== undefined && showMousePosition) {
+            removeControl(MousePosition_1.default, map);
+            map.addControl(new MousePosition_1.default({
+                coordinateFormat: getCoordinateFormatString(projection !== null && projection !== void 0 ? projection : projections_1.Proj.WGS84),
+                projection: projection !== null && projection !== void 0 ? projection : projections_1.Proj.WGS84,
+                undefinedHTML: ' ',
+            }));
+        }
+        else {
+            removeControl(MousePosition_1.default, map);
+        }
+    }, [map, showMousePosition, projection]);
+    return (react_1.default.createElement(MapProvider, { value: map },
+        react_1.default.createElement("div", { className: "map", ref: mapElementRef }),
+        props.children));
+};
+exports.Map = Map;

package/dist/ol-map/source/index.d.ts

@@ -0,0 +1,6 @@
+export * from './osm';
+export * from './vector-source';
+export * from './wmts';
+export * from './wms';
+export * from './xyz';
+export * from './mvt';

package/dist/ol-map/source/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./osm"), exports);
+__exportStar(require("./vector-source"), exports);
+__exportStar(require("./wmts"), exports);
+__exportStar(require("./wms"), exports);
+__exportStar(require("./xyz"), exports);
+__exportStar(require("./mvt"), exports);

package/dist/ol-map/source/mvt.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import VectorTileSource, { Options } from 'ol/source/VectorTile';
+export declare const useVectorTileSource: () => VectorTileSource;
+export interface MVTSourceProps {
+    options: Options;
+}
+export interface MVTOptionParams {
+    url: string;
+}
+export declare const getMVTOptions: (optionParams: MVTOptionParams) => Options;
+export declare const MVTSource: React.FC<MVTSourceProps>;

package/dist/ol-map/source/mvt.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MVTSource = exports.getMVTOptions = exports.useVectorTileSource = void 0;
+var react_1 = require("react");
+var VectorTile_1 = __importDefault(require("ol/source/VectorTile"));
+var format_1 = require("ol/format");
+var vector_tile_layer_1 = require("../layers/vector-tile-layer");
+var vectorTileSourceContext = react_1.createContext(null);
+var useVectorTileSource = function () {
+    var source = react_1.useContext(vectorTileSourceContext);
+    if (source === null) {
+        throw new Error('vector tile source context is null, please check the provider');
+    }
+    return source;
+};
+exports.useVectorTileSource = useVectorTileSource;
+var getMVTOptions = function (optionParams) {
+    var url = optionParams.url;
+    var mvtOptions = {
+        url: url,
+        format: new format_1.MVT(),
+    };
+    return mvtOptions;
+};
+exports.getMVTOptions = getMVTOptions;
+var MVTSource = function (_a) {
+    var children = _a.children, options = _a.options;
+    var vectorTileLayer = vector_tile_layer_1.useVectorTileLayer();
+    react_1.useEffect(function () {
+        vectorTileLayer.setSource(new VectorTile_1.default(options));
+    }, [options, vectorTileLayer]);
+    return null;
+};
+exports.MVTSource = MVTSource;

package/dist/ol-map/source/osm.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TileOsm: React.FC;

package/dist/ol-map/source/osm.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TileOsm = void 0;
+var react_1 = require("react");
+var source_1 = require("ol/source");
+var tile_layer_1 = require("../layers/tile-layer");
+var TileOsm = function (props) {
+    var tileLayer = tile_layer_1.useTileLayer();
+    react_1.useEffect(function () {
+        tileLayer.setSource(new source_1.OSM());
+    }, [tileLayer]);
+    return null;
+};
+exports.TileOsm = TileOsm;

package/dist/ol-map/source/vector-source.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Vector } from 'ol/source';
+export declare const useVectorSource: () => Vector;
+export declare const VectorSource: React.FC;

package/dist/ol-map/source/vector-source.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VectorSource = exports.useVectorSource = void 0;
+var react_1 = __importStar(require("react"));
+var source_1 = require("ol/source");
+var vector_layer_1 = require("../layers/vector-layer");
+var vectorSourceContext = react_1.createContext(null);
+var VectorSourceProvider = vectorSourceContext.Provider;
+var useVectorSource = function () {
+    var source = react_1.useContext(vectorSourceContext);
+    if (source === null) {
+        throw new Error('vector source context is null, please check the provider');
+    }
+    return source;
+};
+exports.useVectorSource = useVectorSource;
+var VectorSource = function (_a) {
+    var children = _a.children;
+    var vectorLayer = vector_layer_1.useVectorLayer();
+    var vectorSource = react_1.useState(new source_1.Vector())[0];
+    react_1.useEffect(function () {
+        vectorLayer.setSource(vectorSource);
+    }, [vectorSource, vectorLayer]);
+    return (react_1.default.createElement(VectorSourceProvider, { value: vectorSource }, children));
+};
+exports.VectorSource = VectorSource;

package/dist/ol-map/source/wms.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Options } from 'ol/source/TileWMS';
+interface TileWMSProps {
+    options: Options;
+}
+export interface WMSOptionParams {
+    attributions?: string;
+    url: string;
+    params: {
+        [key: string]: any;
+    };
+    serverType: 'carmentaserver' | 'geoserver' | 'mapserver' | 'qgis';
+    transition: number;
+}
+export declare const getWMSOptions: (optionParams: WMSOptionParams) => Options;
+export declare const TileWMS: React.FC<TileWMSProps>;
+export {};

package/dist/ol-map/source/wms.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TileWMS = exports.getWMSOptions = void 0;
+var react_1 = require("react");
+var TileWMS_1 = __importDefault(require("ol/source/TileWMS"));
+var tile_layer_1 = require("../layers/tile-layer");
+var getWMSOptions = function (optionParams) {
+    var attributions = optionParams.attributions, url = optionParams.url, params = optionParams.params, serverType = optionParams.serverType, transition = optionParams.transition;
+    var wmsOptions = {
+        attributions: attributions,
+        url: url,
+        params: params,
+        serverType: serverType,
+        transition: transition,
+    };
+    return wmsOptions;
+};
+exports.getWMSOptions = getWMSOptions;
+var TileWMS = function (props) {
+    var tileLayer = tile_layer_1.useTileLayer();
+    var options = props.options;
+    react_1.useEffect(function () {
+        tileLayer.setSource(new TileWMS_1.default(options));
+    }, [tileLayer, options]);
+    return null;
+};
+exports.TileWMS = TileWMS;

package/dist/ol-map/source/wmts.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Options } from 'ol/source/WMTS';
+import WMTSRequestEncoding from 'ol/source/WMTSRequestEncoding';
+interface TileWMTSProps {
+    options: Options;
+}
+export interface WMTSOptionParams {
+    attributions?: string;
+    url: string;
+    layer: string;
+    projection: string;
+    format: string;
+    style: string;
+    matrixSet: string;
+    wrapX?: boolean;
+    heightWidthRatio?: number;
+    requestEncoding?: WMTSRequestEncoding | string;
+}
+export declare const getWMTSOptions: (params: WMTSOptionParams) => Options;
+export declare const TileWMTS: React.FC<TileWMTSProps>;
+export {};