npm - @mapcomponents/react-maplibre - Versions diffs - 0.1.62 → 0.1.64 - Mend

@mapcomponents/react-maplibre 0.1.62 → 0.1.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (340) hide show

package/cypress/support/commands.ts ADDED Viewed

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

package/cypress/support/component-index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/cypress/support/component.ts ADDED Viewed

@@ -0,0 +1,46 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+import { setGlobalConfig } from "@storybook/testing-react";
+import * as sbPreview from "../../.storybook/preview";
+setGlobalConfig(sbPreview);
+// Import commands.js using ES2015 syntax:
+import './commands'
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+import { mount } from 'cypress/react'
+//import MlCreatePdfForm from "../../src/components/MlCreatePdfForm/MlCreatePdfForm";
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+Cypress.Commands.add('mount', mount)
+// Example use:
+// cy.mount(<MyComponent />)

package/cypress.config.ts ADDED Viewed

@@ -0,0 +1,101 @@
+import { defineConfig } from 'cypress';
+//const isRunningInCI = process.env.CI === 'true';
+export default defineConfig({
+	component: {
+		//supportFile: './cypress/support/component.js',
+		devServer: {
+			framework: 'react',
+			bundler: 'webpack',
+			webpackConfig: {
+				mode: 'development',
+				resolve: {
+					extensions: ['.mjs', '.js', '.jsx', '.json', '.cjs', '.ts', '.tsx'],
+				},
+				module: {
+					rules: [
+						{
+							test: /\.(js|jsx|tsx|ts)$/, // USE THE babel-loader FOR THESE FILE EXTENSIONS
+							use: [
+								{
+									loader: 'babel-loader',
+									options: {
+										sourceType: 'unambiguous',
+										presets: [
+											['@babel/preset-env', { shippedProposals: true, loose: true }],
+											'@babel/preset-typescript',
+											'@babel/preset-react',
+										],
+										plugins: [
+											'@babel/plugin-transform-shorthand-properties',
+											'@babel/plugin-transform-block-scoping',
+											['@babel/plugin-proposal-decorators', { legacy: true }],
+											['@babel/plugin-proposal-class-properties', { loose: true }],
+											['@babel/plugin-proposal-private-methods', { loose: true }],
+											'@babel/plugin-proposal-export-default-from',
+											'@babel/plugin-syntax-dynamic-import',
+											[
+												'@babel/plugin-proposal-object-rest-spread',
+												{ loose: true, useBuiltIns: true },
+											],
+											'@babel/plugin-transform-classes',
+											'@babel/plugin-transform-arrow-functions',
+											'@babel/plugin-transform-parameters',
+											'@babel/plugin-transform-destructuring',
+											'@babel/plugin-transform-spread',
+											'@babel/plugin-transform-for-of',
+											'@storybook/core-common/node_modules/babel-plugin-macros',
+											'@babel/plugin-proposal-optional-chaining',
+											'@babel/plugin-proposal-nullish-coalescing-operator',
+											[
+												'babel-plugin-polyfill-corejs3',
+												{
+													method: 'usage-global',
+													absoluteImports: 'core-js',
+													version: '3.21.1',
+												},
+											],
+											'@babel/plugin-transform-template-literals',
+										],
+										babelrc: true,
+										configFile: false,
+									},
+								},
+							],
+							exclude: [ /node_modules/, /dist/ ]
+						},
+						/*{
+							test: /\.(ts|tsx)$/,
+							exclude: [/node_modules/],
+							use: {
+								loader: require.resolve('babel-loader'),
+								options: {
+									plugins: [],
+									presets: ['@babel/preset-typescript'],
+									babelrc: false,
+								},
+							},
+						},*/
+						{
+							test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
+							loader: 'file-loader',
+							options: { name: 'static/media/[path][name].[ext]' },
+						},
+						{
+							test: /\.css$/,
+							use: [
+								'style-loader',
+								{
+									loader: 'css-loader',
+									options: { importLoaders: 1 },
+								},
+							],
+						},
+					],
+				},
+			},
+		},
+	},
+});

package/dist/components/MapLibreMap/MapLibreMap.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { MapOptions as MapOptionsType } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
-declare type MapLibreMapProps = {
+type MapLibreMapProps = {
     /**
      * Id of the MapLibreGl(Wrapper) instance in mapContext
      */

package/dist/components/MapLibreMap/lib/MapLibreGlWrapper.d.ts CHANGED Viewed

@@ -1,13 +1,18 @@
-import { IControl, MapOptions as MapOptionsType } from "!maplibre-gl";
-import { Map as MapType } from "maplibre-gl";
-declare type EventArgArray = [string, string | Function, Function?];
-declare type LayerState = {
+import { Map, IControl, MapOptions as MapOptionsType, MapEventType, MapLayerEventType, StyleImageInterface, LayerSpecification, CustomLayerInterface, SourceSpecification, ControlPosition } from '!maplibre-gl';
+import { Map as MapType, Style } from 'maplibre-gl';
+type WrapperEventArgArray = [string, (arg0: unknown) => void];
+type EventArgArray = [
+    keyof MapLayerEventType | keyof MapEventType,
+    string | ((arg0: unknown) => void),
+    ((arg0: unknown) => void)?
+];
+type LayerState = {
     id: string;
     type: string;
     visible: boolean;
     baseLayer: boolean;
 };
-declare type ViewportState = {
+type ViewportState = {
     center: {
         lng: number;
         lat: number;
@@ -29,47 +34,68 @@ declare class MapLibreGlWrapper {
             layers: [string?];
             sources: [string?];
             images: [string?];
-            controls: [IControl?];
+            controls: [(IControl | unknown)?];
             events: [EventArgArray?];
-            wrapperEvents: [EventArgArray?];
+            wrapperEvents: [WrapperEventArgArray?];
         };
     };
     baseLayers: [string?];
     firstSymbolLayer: string | undefined;
     eventHandlers: {
-        layerchange: [Function?];
-        viewportchange: [Function?];
+        layerchange: {
+            handler: (ev: unknown) => void;
+            options?: object | string;
+        }[];
+        viewportchange: {
+            handler: (ev: unknown) => void;
+        }[];
     };
     wrapper: {
-        on: Function;
-        off: Function;
-        fire: Function;
-        layerState: [LayerState?];
+        on: (eventName: string, handler: (ev: unknown) => void, options?: object | string, componentId?: string) => void;
+        off: (type: string, listener: (ev: unknown) => void) => void;
+        fire: (eventName: string, context?: unknown) => void;
+        layerState: LayerState[];
         layerStateString: string;
         oldLayerStateStrings: object;
-        buildLayerObject: Function;
-        buildLayerObjects: Function;
-        refreshLayerState: Function;
+        buildLayerObject: (layer: ReturnType<Style['getLayer']>) => LayerState;
+        buildLayerObjects: () => LayerState[];
+        refreshLayerState: () => void;
         viewportState: ViewportState;
         viewportStateString: string;
         oldViewportStateString: string;
-        getViewport: Function;
-        refreshViewport: Function;
+        getViewport: () => {
+            center: {
+                lng: number;
+                lat: number;
+            };
+            zoom: number;
+            bearing: number;
+            pitch: number;
+        };
+        refreshViewport: () => void;
     };
-    initRegisteredElements: Function;
-    addNativeMaplibreFunctionsAndProps: Function;
+    initRegisteredElements: (componentId: string, force?: boolean | undefined) => void;
+    addNativeMaplibreFunctionsAndProps: () => void;
     map: MapType;
     style: object;
     styleJson: object;
-    addLayer: Function;
-    addSource: Function;
-    addControl: Function;
-    addImage: Function;
-    on: Function;
-    cleanup: Function;
+    addLayer: (layer: (LayerSpecification & {
+        source?: string | SourceSpecification | undefined;
+    }) | (CustomLayerInterface & {
+        source?: string | SourceSpecification | undefined;
+    }), beforeId?: string | undefined, componentId?: string | undefined) => Map | undefined;
+    addSource: (id: string, source: SourceSpecification, componentId?: string | undefined) => Map | undefined;
+    addControl: (control: IControl | unknown, position?: ControlPosition | undefined, componentId?: string | undefined) => Map | undefined;
+    addImage: (id: string, image: HTMLImageElement | ImageBitmap | ImageData | {
+        width: number;
+        height: number;
+        data: Uint8Array | Uint8ClampedArray;
+    } | StyleImageInterface, componentId?: string | undefined) => void;
+    on: (type: keyof MapLayerEventType | keyof MapEventType | string, layerId: string | ((ev: unknown) => void), handler?: ((ev: MapEventType & unknown) => Map | void) | string, componentId?: string | undefined) => Map | undefined;
+    cleanup: (componentId: string) => void;
     constructor(props: {
         mapOptions: MapOptionsType;
-        onReady: Function;
+        onReady: (map: MapType, context: unknown) => void;
     });
 }
 export default MapLibreGlWrapper;

package/dist/components/MlCenterPosition/MlCenterPosition.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-interface MlCenterPositionProps {
+import { SxProps, Theme } from "@mui/material";
+export interface MlCenterPositionProps {
     /**
      * Id of the target MapLibre instance in mapContext
      */
@@ -19,7 +20,7 @@ interface MlCenterPositionProps {
     /**
      * CSS style object that is applied to the button component
      */
-    style?: any;
+    style?: SxProps<Theme> | undefined;
 }
 /**
  * Component template

package/dist/components/MlCenterPosition/MlCenterPosition.stories.d.ts CHANGED Viewed

@@ -1,17 +1,36 @@
+declare const storyoptions: {
+    title: string;
+    component: {
+        (props: import("./MlCenterPosition").MlCenterPositionProps): JSX.Element;
+        defaultProps: {
+            mapId: undefined;
+            style: {
+                minWidth: string;
+                minHeight: string;
+                width: string;
+                height: string;
+                backgroundColor: string;
+                borderRadius: string;
+                margin: number;
+                fontSize: string;
+                ":hover": {
+                    backgroundColor: string;
+                    color: string;
+                };
+            };
+            onColor: string;
+            offColor: string;
+        };
+    };
+    argTypes: {};
+    decorators: ((Story: any) => JSX.Element)[];
+    parameters: {
+        docs: {
+            source: {
+                type: string;
+            };
+        };
+    };
+};
 export default storyoptions;
-export const ExampleConfig: any;
-declare namespace storyoptions {
-    export const title: string;
-    export { MlCenterPosition as component };
-    export const argTypes: {};
-    export { mapContextDecorator as decorators };
-    export namespace parameters {
-        namespace docs {
-            namespace source {
-                const type: string;
-            }
-        }
-    }
-}
-import MlCenterPosition from "./MlCenterPosition";
-import mapContextDecorator from "../../decorators/MapContextDecorator";
+export declare const ExampleConfig: any;

package/dist/components/MlComponentTemplate/MlComponentTemplate.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-interface MlComponentTemplateProps {
+export interface MlComponentTemplateProps {
     /**
      * Id of the target MapLibre instance in mapContext
      */

package/dist/components/MlComponentTemplate/MlComponentTemplate.stories.d.ts CHANGED Viewed

@@ -1,10 +1,13 @@
+declare const storyoptions: {
+    title: string;
+    component: {
+        (props: import("./MlComponentTemplate").MlComponentTemplateProps): JSX.Element;
+        defaultProps: {
+            mapId: undefined;
+        };
+    };
+    argTypes: {};
+    decorators: ((Story: any) => JSX.Element)[];
+};
 export default storyoptions;
-export const ExampleConfig: any;
-declare namespace storyoptions {
-    export const title: string;
-    export { MlComponentTemplate as component };
-    export const argTypes: {};
-    export { mapContextDecorator as decorators };
-}
-import MlComponentTemplate from "./MlComponentTemplate";
-import mapContextDecorator from "../../decorators/MapContextDecorator";
+export declare const ExampleConfig: any;

package/dist/components/MlCreatePdfButton/MlCreatePdfButton.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-interface MlCreatePdfButtonProps {
+export interface MlCreatePdfButtonProps {
     /**
      * Id of the target MapLibre instance in mapContext
      */

package/dist/components/MlCreatePdfButton/MlCreatePdfButton.stories.d.ts CHANGED Viewed

@@ -1,10 +1,13 @@
+declare const storyoptions: {
+    title: string;
+    component: {
+        (props: import("./MlCreatePdfButton").MlCreatePdfButtonProps): JSX.Element;
+        defaultProps: {
+            mapId: undefined;
+        };
+    };
+    argTypes: {};
+    decorators: ((Story: any) => JSX.Element)[];
+};
 export default storyoptions;
-export const ExampleConfig: any;
-declare namespace storyoptions {
-    export const title: string;
-    export { MlCreatePdfButton as component };
-    export const argTypes: {};
-    export { mapContextDecorator as decorators };
-}
-import MlCreatePdfButton from "./MlCreatePdfButton";
-import mapContextDecorator from "../../decorators/MapContextDecorator";
+export declare const ExampleConfig: any;

package/dist/components/MlCreatePdfForm/MlCreatePdfForm.cy.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/components/MlCreatePdfForm/lib/PdfPreview.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PdfPreviewOptions } from './pdfContext';
 import { Feature } from '@turf/turf';
-declare type Props = {
+type Props = {
     /**
      * Id of the target MapLibre instance in mapContext
      */

package/dist/components/MlFeatureEditor/MlFeatureEditor.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
-import "./MlFeatureEditor.css";
-import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
+import './MlFeatureEditor.css';
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+import { GeoJSONObject, Feature } from '@turf/turf';
 interface MlFeatureEditorProps {
     /**
      * Id of the target MapLibre instance in mapContext
@@ -13,12 +14,17 @@ interface MlFeatureEditorProps {
     /**
      * Input GeoJson data at initialization
      */
-    geojson?: any;
+    geojson?: Feature;
     /**
      * Callback function that is called each time the GeoJson data within has changed within MlFeatureEditor.
      * First parameter is the new GeoJson feature.
      */
-    onChange?: Function;
+    onChange?: (para: GeoJSONObject[]) => void;
+    /**
+     * Callback function that is called each time the GeoJson data within has been finished within MlFeatureEditor.
+     * First parameter is the new GeoJson feature.
+     */
+    onFinish?: () => void;
     /**
      * Feature editor mode:
      * - "custom_select" edit features

package/dist/components/MlFeatureEditor/lib/double_click_zoom.d.ts CHANGED Viewed

@@ -1,7 +1,5 @@
 export default doubleClickZoom;
 declare namespace doubleClickZoom {
     function enable(ctx: any): void;
-    function enable(ctx: any): void;
-    function disable(ctx: any): void;
     function disable(ctx: any): void;
 }

package/dist/components/MlFeatureEditor/lib/theme.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-declare var _default: ({
+declare const _default: ({
     id: string;
     type: string;
     filter: (string | string[])[];

package/dist/components/MlGeoJsonLayer/MlGeoJsonLayer.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
-import { Feature, FeatureCollection } from "@turf/turf";
-import { LineLayerSpecification, CircleLayerSpecification, FillLayerSpecification, MapLayerMouseEvent } from "maplibre-gl";
-declare type MlGeoJsonLayerProps = {
+import { Feature, FeatureCollection } from '@turf/turf';
+import { useLayerProps } from '../../hooks/useLayer';
+import { LineLayerSpecification, CircleLayerSpecification, FillLayerSpecification, LayerSpecification, RasterLayerSpecification } from 'maplibre-gl';
+export type MlGeoJsonLayerProps = {
     /**
      * Id of the target MapLibre instance in mapContext
      */
@@ -22,29 +23,39 @@ declare type MlGeoJsonLayerProps = {
     geojson: Feature | FeatureCollection | undefined;
     /**
      * Type of the layer that will be added to the MapLibre instance.
-     * Possible values: "line", "circle", "fill"
+     * All types from LayerSpecification union type are supported except the type from
+     * RasterLayerSpecification
      */
-    type?: "fill" | "line" | "circle";
+    type?: Exclude<LayerSpecification['type'], RasterLayerSpecification['type']>;
     /**
      * Paint property object, that is passed to the addLayer call.
      * Possible props depend on the layer type.
+     * See https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/
+     * Some examples are:
      * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
      * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
      * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+     * All paint types from LayerSpecification union type are supported except the paint type from
+     * RasterLayerSpecification
      */
-    paint?: CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['paint'];
+    paint?: Exclude<LayerSpecification['paint'], RasterLayerSpecification['paint']>;
     /**
      * Layout property object, that is passed to the addLayer call.
      * Possible props depend on the layer type.
+     * See https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/
+     * Some examples are:
      * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
      * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
      * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+     * All layout types from LayerSpecification union type are supported except the layout type from
+     * RasterLayerSpecification
      */
-    layout?: CircleLayerSpecification['layout'] | FillLayerSpecification['layout'] | LineLayerSpecification['layout'];
+    layout?: Exclude<LayerSpecification['layout'], RasterLayerSpecification['layout']>;
     /**
      * Javascript object that is spread into the addLayer commands first parameter.
      */
-    options?: CircleLayerSpecification | FillLayerSpecification | LineLayerSpecification;
+    options?: Exclude<LayerSpecification, RasterLayerSpecification>;
     /**
      * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
      */
@@ -56,19 +67,19 @@ declare type MlGeoJsonLayerProps = {
     /**
      * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
      */
-    onHover?: MapLayerMouseEvent;
+    onHover?: useLayerProps['onHover'];
     /**
      * Click event handler that is executed whenever a geometry rendered by this component is clicked.
      */
-    onClick?: MapLayerMouseEvent;
+    onClick?: useLayerProps['onClick'];
     /**
      * Leave event handler that is executed whenever a geometry rendered by this component is
      * left/unhovered.
      */
-    onLeave?: MapLayerMouseEvent;
+    onLeave?: useLayerProps['onLeave'];
 };
 /**
- * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
+ * Adds source and layer to display GeoJSON data on the map.
  *
  * @component
  */

package/dist/components/MlGeoJsonLayer/MlGeoJsonLayer.stories.d.ts CHANGED Viewed

@@ -1,12 +1,13 @@
+import { MlGeoJsonLayerProps } from './MlGeoJsonLayer';
+declare const storyoptions: {
+    title: string;
+    component: (props: MlGeoJsonLayerProps) => JSX.Element;
+    argTypes: {};
+    decorators: ((Story: any) => JSX.Element)[];
+};
 export default storyoptions;
-export const Linestring: any;
-export const Polygon: any;
-export const DefaultPaintOverrides: any;
-declare namespace storyoptions {
-    export const title: string;
-    export { MlGeoJsonLayer as component };
-    export const argTypes: {};
-    export { mapContextDecorator as decorators };
-}
-import MlGeoJsonLayer from "./MlGeoJsonLayer";
-import mapContextDecorator from "../../decorators/MapContextDecorator";
+export declare const Linestring: any;
+export declare const Polygon: any;
+export declare const DefaultPaintOverrides: any;
+export declare const HeatMapEarthquakes: any;
+export declare const CircleMapWheregroupLocations: any;

package/dist/components/MlGeoJsonLayer/story_utils/MlGeoJsonLayer.lineStyler.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export default LineStyler;
2	+ declare function LineStyler(props: any): JSX.Element;

package/dist/components/MlGeoJsonLayer/story_utils/MlGeoJsonLayer.polygonStyler.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export default PolygonStyler;
2	+ declare function PolygonStyler(props: any): JSX.Element;

package/dist/components/MlGeoJsonLayer/story_utils/MlGeojsonLayerCircleStyler.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { MlGeoJsonLayerProps } from '../MlGeoJsonLayer';
+declare const CircleMapStyler: (props: MlGeoJsonLayerProps) => JSX.Element;
+export default CircleMapStyler;

package/dist/components/MlGeoJsonLayer/story_utils/MlGeojsonLayerHeatMapStyler.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { MlGeoJsonLayerProps } from '../MlGeoJsonLayer';
+declare const HeatMapStyler: (props: MlGeoJsonLayerProps) => JSX.Element;
+export default HeatMapStyler;