@heycar/heycars-map 0.1.0

package/src/components/Demo/BusinessDemo.tsx

@@ -0,0 +1,117 @@
+import { APlaceCircle, GPlaceCircle } from "../../business-components/PlaceCircle";
+import { GWaveCircle } from "../../business-components/WaveCircle";
+import { defineSetup } from "../../types/helper";
+import { Amap } from "../Amap";
+import { AmapLoader } from "../AmapLoader";
+import { Gmap } from "../Gmap";
+import { GmapLoader } from "../GmapLoader";
+import * as css from "./Demo.css";
+
+const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
+const gmapId = import.meta.env.VITE_GMAP_MAP_ID;
+const amapApiKey = import.meta.env.VITE_AMAP_API_KEY;
+const amapApiSecret = import.meta.env.VITE_AMAP_API_SECRET;
+
+export const ABusinessDemo = defineSetup(function ABusinessDemo() {
+  return () => (
+    <AmapLoader
+      apiKey={amapApiKey}
+      apiSecret={amapApiSecret}
+      loading={() => <div>loading</div>}
+      fallback={() => <div>error</div>}
+      plugins={["AMap.AutoComplete"]}
+    >
+      <Amap class={css.demo} center={[0, 0]} zoom={3}>
+        {/* <APassengerCircle position={[0, 0]} /> */}
+        {/* <AAddressBox position={[0, 0]} title={"Martyrs Lawn"} description={"您将在此处上车"} /> */}
+        <APlaceCircle position={[0, 0]} label={"Kenkey Hut"} />
+        {/* <AAddressLocator position={[0, 0]} /> */}
+        {/* <AmapMarker position={[0, 0]} /> */}
+        {/* <AStartEndPoint
+          type="end"
+          position={[0, 0]}
+          title="2月14日 11:00 用车"
+          description={"全程 *4.12公里* 约行驶 *22分钟*"}
+        /> */}
+        {/* <ATaxiCar position={[0, 0]} angle={90} title="距离终点 *4.2公里* 预计 *25分钟*" /> */}
+        {/* <ADrivingLine
+          path={[
+            [-5, -5],
+            [-4, -3],
+            [-3, -4],
+            [-2, -1],
+            [-1, -2],
+            [0, 1],
+            [1, 0],
+            [2, 2],
+          ]}
+        /> */}
+        {/* <AWalkingLine
+          path={[
+            [-5, -5],
+            [-4, -3],
+            [-3, -4],
+            [-2, -1],
+            [-1, -2],
+            [0, 1],
+            [1, 0],
+            [2, 2],
+          ]}
+        /> */}
+        {/* <AWaveCircle position={[0, 0]} /> */}
+      </Amap>
+    </AmapLoader>
+  );
+});
+
+export const GBusinessDemo = defineSetup(function GBusinessDemo() {
+  return () => (
+    <GmapLoader
+      version="beta"
+      apiKey={gmapApiKey}
+      loading={() => <div>loading</div>}
+      fallback={() => <div>error</div>}
+      libraries={["places", "marker"]}
+    >
+      <Gmap class={css.demo} center={{ lat: 0, lng: 0 }} zoom={3} mapId={gmapId}>
+        {/* {/* <GmapMarker position={{ lat: 0, lng: 0 }} /> */}
+        {/* <GPassengerCircle position={[0, 0]} /> */}
+        {/* <GAddressLocator position={[0, 0]} /> */}
+        <GPlaceCircle position={[0, 0]} />
+        {/* <GAddressBox position={[0, 0]} title={"当前区域暂未开通服务"} /> */}
+        {/* <GStartEndPoint
+          type="start"
+          position={[0, 0]}
+          title="Webster Dental Plaza"
+          description={"全程 *4.12公里* 约行驶 *22分钟*"}
+        /> */}
+        {/* <GTaxiCar position={[0, 0]} /> */}
+        {/* <GDrivingLine
+          path={[
+            [-5, -5],
+            [-4, -3],
+            [-3, -4],
+            [-2, -1],
+            [-1, -2],
+            [0, 1],
+            [1, 0],
+            [2, 2],
+          ]}
+        /> */}
+        {/* <GWalkingLine
+          path={[
+            [-5, -5],
+            [-4, -3],
+            [-3, -4],
+            [-2, -1],
+            [-1, -2],
+            [0, 1],
+            [1, 0],
+            [2, 2],
+          ]}
+        /> */}
+        <GWaveCircle position={[0, 0]} />
+      </Gmap>
+    </GmapLoader>
+  );
+});

package/src/components/Demo/Demo.css.ts

@@ -0,0 +1,6 @@
+import { style } from "@vanilla-extract/css";
+
+export const demo = style({
+  width: "100vw",
+  height: "100vh",
+});

package/src/components/Demo/Demo.tsx

@@ -0,0 +1,97 @@
+import { ref } from "vue-demi";
+import { defineSetup } from "../../types/helper";
+import { Amap } from "../Amap";
+import { AmapInfoWindow } from "../AmapInfoWindow";
+import { AmapLoader } from "../AmapLoader";
+import { AmapMarker } from "../AmapMarker";
+import { AmapPolygon } from "../AmapPolygon";
+import { AmapPolyline } from "../AmapPolyline";
+import { Gmap } from "../Gmap";
+import { GmapInfoWindow } from "../GmapInfoWindow";
+import { GmapLoader } from "../GmapLoader";
+import { GmapMarker } from "../GmapMarker";
+import { GmapPolygon } from "../GmapPolygon";
+import { GmapPolyline } from "../GmapPolyline";
+
+import * as css from "./Demo.css";
+const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
+const amapApiKey = import.meta.env.VITE_AMAP_API_KEY;
+const amapApiSecret = import.meta.env.VITE_AMAP_API_SECRET;
+
+export const DemoGmap = defineSetup(function DemoGmap() {
+  const latRef = ref(0);
+  const visibleRef = ref(false);
+  return () => (
+    <GmapLoader
+      apiKey={gmapApiKey}
+      loading={() => <div>loading</div>}
+      fallback={() => <div>error</div>}
+      libraries={["places"]}
+    >
+      <div>gmap {latRef.value}</div>
+      <Gmap class={css.demo} center={{ lat: 0, lng: 0 }} zoom={3}>
+        <GmapMarker position={{ lat: 0, lng: 0 }} label="hello" />
+        <GmapPolyline
+          path={[
+            { lng: -5, lat: -5 },
+            { lng: 3, lat: 0 },
+            { lng: 5, lat: 5 },
+          ]}
+        />
+        <GmapPolygon
+          paths={[
+            { lng: -10, lat: -10 },
+            { lng: -20, lat: -5 },
+            { lng: -15, lat: -10 },
+            { lng: -20, lat: -20 },
+            { lng: -10, lat: -10 },
+          ]}
+        />
+        <GmapInfoWindow
+          visible={visibleRef.value}
+          content={"info window content"}
+          position={{ lng: 0, lat: 0 }}
+        />
+      </Gmap>
+    </GmapLoader>
+  );
+});
+
+export const DemoAmap = defineSetup(function DemoAmap() {
+  const latRef = ref(0);
+  return () => (
+    <AmapLoader
+      apiKey={amapApiKey}
+      apiSecret={amapApiSecret}
+      loading={() => <div>loading</div>}
+      fallback={() => <div>error</div>}
+      plugins={["AMap.AutoComplete"]}
+    >
+      <div>amap {latRef.value}</div>
+      <Amap class={css.demo} center={[latRef.value, 0]} zoom={3}>
+        <AmapMarker
+          position={[0, 0]}
+          label={{ content: `haha ${latRef.value}`, offset: [0, 0], direction: "" }}
+        />
+        <AmapPolyline
+          path={[
+            [-5, -5],
+            [3, latRef.value],
+            [5, 5],
+          ]}
+        />
+        <AmapPolygon
+          path={[
+            [-10, -10],
+            [-10, latRef.value],
+            [-20, -5],
+            [-15, -10],
+            [-20, -20],
+            [-10, -10],
+          ]}
+        />
+        <AmapInfoWindow visible content={"info window content"} position={[0, 0]} />
+      </Amap>
+    </AmapLoader>
+  );
+});

package/src/components/Demo/Hello.tsx

@@ -0,0 +1,15 @@
+import { defineSetup } from "../../types/helper";
+
+export const Hello = defineSetup(function Hello(props: {
+  className?: string;
+  qyc: number;
+  style: any;
+}) {
+  return () => (
+    <section>
+      <span class={props.className} style={props.style}>
+        hello
+      </span>
+    </section>
+  );
+});

package/src/components/Demo/HeycarDemo.tsx

@@ -0,0 +1,31 @@
+import { AddressBox } from "../../business-components/AddressBox";
+import { defineSetup } from "../../types/helper";
+import { HeycarMap, MapProvider } from "../MapProvider/MapProvider";
+import * as css from "./Demo.css";
+
+const gmapApiKey = import.meta.env.VITE_GMAP_API_KEY;
+const gmapId = import.meta.env.VITE_GMAP_MAP_ID;
+const amapApiKey = import.meta.env.VITE_AMAP_API_KEY;
+const amapApiSecret = import.meta.env.VITE_AMAP_API_SECRET;
+
+export const HeycarDemo = defineSetup(function HeycarDemo() {
+  return () => (
+    <MapProvider
+      amapKey={amapApiKey}
+      amapSecret={amapApiSecret}
+      gmapId={gmapId}
+      gmapKey={gmapApiKey}
+      supplier={"amap"}
+    >
+      <HeycarMap
+        class={css.demo}
+        fallback={() => <div>error</div>}
+        loading={() => <div>loading</div>}
+        center={[0, 0]}
+        zoom={3}
+      >
+        <AddressBox position={[0, 0]} title={"Martyrs Lawn"} description={"您将在此处上车"} />
+      </HeycarMap>
+    </MapProvider>
+  );
+});

package/src/components/Demo/TemplateDemo.vue

@@ -0,0 +1,11 @@
+<script>
+import { defineComponent } from "vue";
+import { Hello } from "./Hello";
+
+export default defineComponent({
+  components: { Hello },
+});
+</script>
+<template>
+  <Hello class="hi3" qyc="3"></Hello>
+</template>

package/src/components/Demo/index.ts

@@ -0,0 +1 @@
+export * from "./Demo";

package/src/components/Gmap/Gmap.ts

@@ -0,0 +1,34 @@
+import { computed, h, shallowRef, watchPostEffect } from "vue-demi";
+import { defineSetup } from "../../types/helper";
+import {
+  watchNoneImmediatePostEffectForDeepOption,
+  watchPostEffectForGMapEvent,
+} from "../../utils/compare";
+import { provideGmap } from "./useGmap";
+export interface GampProps extends google.maps.MapOptions {
+  onCenter_changed?: () => void;
+}
+
+export const Gmap = defineSetup(function Gmap(props: GampProps, { slots, emit }) {
+  const options = computed(() => {
+    const { onCenter_changed, ...options } = props;
+    return options;
+  });
+  const defaultOptions = options.value;
+  const elementRef = shallowRef();
+  const mapRef = shallowRef<google.maps.Map>();
+  provideGmap(mapRef);
+  watchPostEffect(() => {
+    // todo 这里是否会因为 mapRef 的赋值导致不停运行？
+    if (mapRef.value || !elementRef.value) return;
+    mapRef.value = new google.maps.Map(elementRef.value, { ...defaultOptions });
+  });
+  watchNoneImmediatePostEffectForDeepOption(
+    () => options.value,
+    (options) => {
+      mapRef.value?.setOptions({ ...options });
+    }
+  );
+  watchPostEffectForGMapEvent(mapRef, props, emit, ["onCenter_changed"]);
+  return () => h("div", { ref: elementRef }, slots.default?.());
+});

package/src/components/Gmap/index.ts

@@ -0,0 +1 @@
+export * from "./Gmap";

package/src/components/Gmap/useGmap.ts

@@ -0,0 +1,7 @@
+import { inject, provide, ShallowRef } from "vue-demi";
+
+export const gmapContext = Symbol();
+
+export const useGmap = () => inject<ShallowRef<google.maps.Map | undefined>>(gmapContext);
+export const provideGmap = (mapRef: ShallowRef<google.maps.Map | undefined>) =>
+  provide(gmapContext, mapRef);

package/src/components/GmapAdvancedMarkerView/GmapAdvancedMarkerView.ts

@@ -0,0 +1,48 @@
+import { onMounted, onUnmounted, shallowRef, watch, watchPostEffect } from "vue-demi";
+import { defineSetup } from "../../types/helper";
+import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
+import { useGmap } from "../Gmap/useGmap";
+
+export type GmapAdvancedMarkerViewProps = google.maps.marker.AdvancedMarkerViewOptions;
+
+export const GmapAdvancedMarkerView = defineSetup(function GmapAdvancedMarkerView(
+  props: GmapAdvancedMarkerViewProps
+) {
+  const markerRef = shallowRef<google.maps.marker.AdvancedMarkerView>();
+  const mapRef = useGmap();
+  onMounted(() => {
+    markerRef.value = new google.maps.marker.AdvancedMarkerView({ ...props });
+  });
+  onUnmounted(() => {
+    if (!markerRef.value) return;
+    markerRef.value.map = null;
+  });
+  watchPostEffect(() => {
+    const map = mapRef?.value;
+    if (!map || !markerRef.value) return;
+    markerRef.value.map = map;
+  });
+  watchNoneImmediatePostEffectForDeepOption(
+    () => {
+      const { content, ...restProps } = props;
+      return restProps;
+    },
+    (props) => {
+      if (!markerRef.value) return;
+      debugger;
+      Object.assign(markerRef.value, props);
+    }
+  );
+  // content 通过 createDom 会新建，只需要 shallowCompare
+  watch(
+    () => props.content,
+    (content) => {
+      if (!markerRef.value) return;
+      markerRef.value.content = content;
+    },
+    {
+      flush: "post",
+    }
+  );
+  return () => null;
+});

package/src/components/GmapAdvancedMarkerView/index.ts

@@ -0,0 +1 @@
+export * from "./GmapAdvancedMarkerView";

package/src/components/GmapInfoWindow/GmapInfoWindow.ts

@@ -0,0 +1,38 @@
+import { computed, onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
+import { defineSetup } from "../../types/helper";
+import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
+import { useGmap } from "../Gmap/useGmap";
+
+export interface GmapInfoWindowProps extends google.maps.InfoWindowOptions {
+  visible: boolean;
+}
+
+export const GmapInfoWindow = defineSetup(function GmapInfoWindow(props: GmapInfoWindowProps) {
+  const options = computed(() => {
+    const { visible, ...options } = props;
+    return options;
+  });
+  const defaultOptions = options.value;
+  const infoWindowRef = shallowRef<google.maps.InfoWindow>();
+  const mapRef = useGmap();
+  onMounted(() => {
+    infoWindowRef.value = new google.maps.InfoWindow({ ...defaultOptions });
+  });
+  onUnmounted(() => {
+    infoWindowRef.value?.close();
+  });
+  watchPostEffect(() => {
+    const { visible } = props;
+    const infoWindow = infoWindowRef.value;
+    const map = mapRef?.value;
+    if (!map || !infoWindow) return;
+    visible ? infoWindow.open({ map }) : infoWindow.close();
+  });
+  watchNoneImmediatePostEffectForDeepOption(
+    () => options.value,
+    (options) => {
+      infoWindowRef.value?.setOptions({ ...options });
+    }
+  );
+  return () => null;
+});

package/src/components/GmapInfoWindow/index.ts

@@ -0,0 +1 @@
+export * from "./GmapInfoWindow";

package/src/components/GmapLoader/GmapLoader.ts

@@ -0,0 +1,79 @@
+import { Loader, LoaderOptions } from "@googlemaps/js-api-loader";
+import { computed, shallowRef } from "vue-demi";
+import { defineSetup, VueNode } from "../../types/helper";
+import { watchPostEffectForDeepOption } from "../../utils/compare";
+
+export enum Status {
+  LOADING = "LOADING",
+  FAILURE = "FAILURE",
+  SUCCESS = "SUCCESS",
+}
+
+export interface GmapLoaderProps extends LoaderOptions {
+  /**
+   * Render prop used to switch to loading component.
+   */
+  loading?: () => VueNode;
+  /**
+   * Render prop used to switch to error fallback component.
+   */
+  fallback?: () => VueNode;
+  /**
+   * Callback prop used to access `@googlemaps/js-api-loader` and `Status`.
+   *
+   * Note: The callback be executed multiple times in the lifecycle of the component.
+   */
+  onChange?: (status: Status) => void;
+}
+
+/**
+ * A component to wrap the loading of the Google Maps JavaScript API.
+ *
+ * ```
+ * const MyApp = () => (
+ * 	<GmapLoader apiKey={'YOUR_API_KEY'}>
+ * 		<MyMapComponent />
+ * 	</GmapLoader>
+ * );
+ * ```
+ *
+ * @param props
+ */
+export const GmapLoader = defineSetup(function GmapLoader(props: GmapLoaderProps, { slots, emit }) {
+  const statusRef = shallowRef(Status.LOADING);
+  const options = computed(() => {
+    const { onChange, fallback, loading, ...options } = props;
+    return options;
+  });
+  watchPostEffectForDeepOption(
+    () => options.value,
+    (options) => {
+      const loader = new Loader(options);
+
+      const setStatusAndExecuteCallback = (status: Status) => {
+        emit("change", status);
+        statusRef.value = status;
+      };
+
+      setStatusAndExecuteCallback(Status.LOADING);
+
+      loader.load().then(
+        () => setStatusAndExecuteCallback(Status.SUCCESS),
+        () => setStatusAndExecuteCallback(Status.FAILURE)
+      );
+    }
+  );
+  return () => {
+    switch (statusRef.value) {
+      case Status.SUCCESS:
+        // todo: 由于 class 无法禁止传递，所以不用 div 包裹。目前 GmapLoader 只在 HeycarMap 内部使用，能确保 slot.default 是单节点, 如果将来要开放去处，这里需要做处理
+        return slots.default?.() as VueNode;
+      case Status.LOADING:
+        return slots.loading?.();
+      case Status.FAILURE:
+        return slots.fallback?.();
+      default:
+        throw new Error("MyError: unknown loader status");
+    }
+  };
+});

package/src/components/GmapLoader/index.ts

@@ -0,0 +1 @@
+export * from "./GmapLoader";

package/src/components/GmapMarker/GmapMarker.ts

@@ -0,0 +1,31 @@
+import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
+import { defineSetup } from "../../types/helper";
+import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
+import { useGmap } from "../Gmap/useGmap";
+
+export type GmapMarkerProps = google.maps.MarkerOptions;
+
+export const GmapMarker = defineSetup(function GmapMarker(props: GmapMarkerProps) {
+  const markerRef = shallowRef<google.maps.Marker>();
+  const mapRef = useGmap();
+  onMounted(() => {
+    markerRef.value = new google.maps.Marker({ ...props });
+  });
+  onUnmounted(() => {
+    markerRef.value?.setMap(null);
+  });
+  watchPostEffect(() => {
+    const map = mapRef?.value;
+    if (!map) return;
+    markerRef.value?.setMap(map);
+  });
+  watchNoneImmediatePostEffectForDeepOption(
+    () => {
+      return { ...props };
+    },
+    (props) => {
+      markerRef.value?.setOptions({ ...props });
+    }
+  );
+  return () => null;
+});

package/src/components/GmapMarker/index.ts

@@ -0,0 +1 @@
+export * from "./GmapMarker";

package/src/components/GmapPolygon/GmapPolygon.ts

@@ -0,0 +1,29 @@
+import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
+import { defineSetup } from "../../types/helper";
+import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
+import { useGmap } from "../Gmap/useGmap";
+
+export type GmapPolygonProps = google.maps.PolygonOptions;
+
+export const GmapPolygon = defineSetup(function GmapPolygon(props: GmapPolygonProps) {
+  const polygonRef = shallowRef<google.maps.Polygon>();
+  const mapRef = useGmap();
+  onMounted(() => {
+    polygonRef.value = new google.maps.Polygon({ ...props });
+  });
+  onUnmounted(() => {
+    polygonRef.value?.setMap(null);
+  });
+  watchPostEffect(() => {
+    const map = mapRef?.value;
+    if (!map) return;
+    polygonRef.value?.setMap(map);
+  });
+  watchNoneImmediatePostEffectForDeepOption(
+    () => ({ ...props }),
+    (props) => {
+      polygonRef.value?.setOptions({ ...props });
+    }
+  );
+  return () => null;
+});

package/src/components/GmapPolygon/index.ts

@@ -0,0 +1 @@
+export * from "./GmapPolygon";

package/src/components/GmapPolyline/GmapPolyline.ts

@@ -0,0 +1,29 @@
+import { onMounted, onUnmounted, shallowRef, watchPostEffect } from "vue-demi";
+import { defineSetup } from "../../types/helper";
+import { watchNoneImmediatePostEffectForDeepOption } from "../../utils/compare";
+import { useGmap } from "../Gmap/useGmap";
+
+export type GmapPolylineProps = google.maps.PolylineOptions;
+
+export const GmapPolyline = defineSetup(function GmapPolyline(props: GmapPolylineProps) {
+  const polylineRef = shallowRef<google.maps.Polyline>();
+  const mapRef = useGmap();
+  onMounted(() => {
+    polylineRef.value = new google.maps.Polyline({ ...props });
+  });
+  onUnmounted(() => {
+    polylineRef.value?.setMap(null);
+  });
+  watchPostEffect(() => {
+    const map = mapRef?.value;
+    if (!map) return;
+    polylineRef.value?.setMap(map);
+  });
+  watchNoneImmediatePostEffectForDeepOption(
+    () => ({ ...props }),
+    (props) => {
+      polylineRef.value?.setOptions({ ...props });
+    }
+  );
+  return () => null;
+});

package/src/components/GmapPolyline/index.ts

@@ -0,0 +1 @@
+export * from "./GmapPolyline";

package/src/components/MapProvider/MapProvider.tsx

@@ -0,0 +1,64 @@
+import { defineLagecySetup, defineSetup } from "../../types/helper";
+import { vec2lnglat } from "../../utils/transform";
+import { Amap, AmapProps } from "../Amap";
+import { AmapLoader } from "../AmapLoader";
+import { Gmap } from "../Gmap";
+import { GmapLoader, GmapLoaderProps } from "../GmapLoader";
+import { MapSupplierPayolad, provideMapSupplier, useMapSupplier } from "./useMapSupplier";
+
+export type MapProviderProps = MapSupplierPayolad;
+export const MapProvider = defineLagecySetup(function MapProvider(
+  props: MapProviderProps,
+  { slots }
+) {
+  provideMapSupplier(props);
+  return () => <div>{slots.default?.()}</div>;
+}).props(["amapKey", "amapSecret", "amapServiceHost", "gmapId", "gmapKey", "supplier"]);
+
+export type HeycarMapProps = Pick<GmapLoaderProps, "fallback" | "loading"> &
+  Pick<AmapProps, "center" | "zoom">;
+export const HeycarMap = defineSetup(function HeycarMap(props: HeycarMapProps, { slots }) {
+  const payload = useMapSupplier();
+  return () => {
+    const { gmapKey, amapKey, amapSecret, amapServiceHost, supplier, gmapId } = payload;
+    const { fallback, loading, center, zoom } = props;
+    const children = slots.default?.();
+    switch (supplier) {
+      case "gmap":
+        return (
+          <GmapLoader
+            apiKey={gmapKey}
+            version="beta"
+            libraries={["marker", "places", "geometry"]}
+            loading={loading}
+            fallback={fallback}
+          >
+            <Gmap mapId={gmapId} center={center ? vec2lnglat(center) : undefined} zoom={zoom}>
+              {children}
+            </Gmap>
+          </GmapLoader>
+        );
+      default:
+        return (
+          <AmapLoader
+            apiKey={amapKey}
+            apiSecret={amapSecret}
+            apiServiceHost={amapServiceHost}
+            plugins={[
+              "AMap.Geolocation",
+              "AMap.Geocoder",
+              "AMap.PlaceSearch",
+              "AMap.Driving",
+              "AMap.Walker",
+            ]}
+            loading={loading}
+            fallback={fallback}
+          >
+            <Amap center={center} zoom={zoom}>
+              {children}
+            </Amap>
+          </AmapLoader>
+        );
+    }
+  };
+});

package/src/components/MapProvider/index.ts

@@ -0,0 +1 @@
+export * from "./MapProvider";