feat: custom plugin

examples/LCustomPlugin.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import L from 'leaflet'
+import { PropType, inject, nextTick } from 'vue';
+import { MAP_PROVIDE, getMapInjectKey, type MapProvide } from '../src';
+
+
+const mapProvide = inject<MapProvide>(MAP_PROVIDE);
+
+const key = getMapInjectKey();
+
+const props = defineProps({
+  options: {
+    type: Object as PropType<L.Control.ZoomOptions>,
+    required: false
+  }
+})
+
+nextTick(() => {
+  const zoom = L.control.zoom(props.options);
+  mapProvide?.getMap(key)?.addControl(zoom);
+})
+
+</script>  
+
+<template></template>

examples/Layout.vue

@@ -18,7 +18,7 @@ import {
 } from "../src";
 import "../node_modules/leaflet/dist/leaflet.css";
 import L from "leaflet";
-// import { type GeoJsonObject } from 'geojson';
+import LCustomPlugin from './LCustomPlugin.vue';
 
 const mapOptions = {
   zoom: 13,
@@ -69,12 +69,14 @@ const tmpGeojson = {
        }
    };
 
+
+
 </script>
 
 <template>
   <div>
     <h1>Basic UI Layers</h1>
-    <l-map id="map1" :options="mapOptions">
+    <l-map id="map1" :options="mapOptions" ref="map1">
       <l-tilelayer
         urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
         :options="tileLayerOptions"
@@ -189,6 +191,19 @@ const tmpGeojson = {
       <LGeojson :geojson="tmpGeojson" />
     </l-map>
   </div>
+  <div>
+    <h1>Custom Plugin</h1>
+    <l-map
+      id="map5"
+      :options="mapOptions"
+    >
+      <l-tilelayer
+        urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
+        :options="tileLayerOptions"
+      />
+      <LCustomPlugin />
+    </l-map>
+  </div>
 </template>
 
 <style lang="css">
@@ -200,7 +215,8 @@ const tmpGeojson = {
 #map1,
 #map2,
 #map3,
-#map4 {
+#map4,
+#map5 {
   height: 300px;
 }
 

src/index.ts

@@ -13,4 +13,6 @@ export { default as LControlLayers } from './components/LControlLayers.vue';
 export { default as LControlScale } from './components/LControlScale.vue';
 export { default as LControlZoom } from './components/LControlZoom.vue';
 export { default as LGeojson } from './components/LGeojson.vue';
-
+export * from './utils/injectKey';
+export type {MapProvide} from './core/Map';
+export type {MarkerProvide} from './core/Marker';