feat: support multi map in a same page

Author: brandonxiang

cspell.json

@@ -4,6 +4,8 @@
     "dictionaryDefinitions": [],
     "dictionaries": [],
     "words": [
+        "latlng",
+        "latlngs",
         "Tilelayer"
     ],
     "ignoreWords": [],

examples/Layout.vue

@@ -6,57 +6,100 @@ import {
   LTooltip,
   LPopup,
   LCircle,
-  LPolygon
+  LCircleMarker,
+  LPolygon,
+  LPolyline,
+  LRectangle,
 } from '../src';
 import '../node_modules/leaflet/dist/leaflet.css';
 
+const mapOptions = {
+  zoom: 13,
+  center: { lat: 51.505, lng: -0.09 },
+  minZoom: 8,
+  maxZoom: 15,
+  attributionControl: true,
+  zoomControl: true
+}
+
+const tileLayerOptions = {
+  attribution: 'vue-leaflet',
+  maxZoom: 18,
+  id: 'mapbox/streets-v11',
+  tileSize: 512,
+  zoomOffset: -1,
+  accessToken: 'pk.eyJ1IjoieHdwaXNtZSIsImEiOiJ5cTlCQTlRIn0.QdV-wNUKbgs7jAlbVE747Q'
+}
+
 </script>
 
 <template>
-  <l-map id="map1" :options="{
-    zoom: 13,
-    center: { lat: 51.505, lng: -0.09 },
-    minZoom: 8,
-    maxZoom: 15,
-    attributionControl: true,
-    zoomControl: true
-  }">
-    <l-tilelayer urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
-      :options="{
-        attribution: 'vue-leaflet',
-        maxZoom: 18,
-        id: 'mapbox/streets-v11',
-        tileSize: 512,
-        zoomOffset: -1,
-        accessToken: 'pk.eyJ1IjoieHdwaXNtZSIsImEiOiJ5cTlCQTlRIn0.QdV-wNUKbgs7jAlbVE747Q'
+  <div>
+    <h1>Marker/Tooltip/Popup</h1>
+    <l-map id="map1" :options="mapOptions">
+      <l-tilelayer urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
+        :options="tileLayerOptions" />
+      <l-marker id="marker1" :latlng="{ lat: 51.505, lng: -0.09 }" :options="{
+        title: 'marker1',
+        opacity: 1,
+        draggable: true
+      }">
+        <l-tooltip :options="{ content: 'tooltip with marker1' }" />
+      </l-marker>
+      <l-marker id="marker2" :latlng="{ lat: 51.505, lng: -0.11 }" :options="{
+        title: 'marker2'
+      }">
+        <l-popup :options="{ content: 'popup with marker2' }" />
+      </l-marker>
+      <l-tooltip :options="{ content: 'tooltip standalone' }" :latlng="{ lat: 51.505, lng: 0 }" />
+      <l-popup :options="{ content: 'popup standalone' }" :latlng="{ lat: 51.505, lng: 0 }" />
+    </l-map>
+  </div>
+  <div>
+    <h1>Vector Layers</h1>
+    <l-map id="map2" :options="mapOptions">
+      <l-tilelayer urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
+        :options="tileLayerOptions"/>
+      <l-circle :latlng="[51.508, -0.11]" :options="{
+        color: 'red',
+        fillColor: '#f03',
+        fillOpacity: 0.5,
+        radius: 500
       }" />
-    <l-marker :latlng="{ lat: 51.505, lng: -0.09 }" :options="{
-      title: 'marker1',
-      opacity: 1,
-      draggable: true
-    }">
-      <l-tooltip :options="{ content: 'tooltip with marker1' }" />
-    </l-marker>
-    <l-marker :latlng="{ lat: 51.505, lng: -0.11 }" :options="{
-      title: 'marker2'
-    }">
-      <l-popup :options="{ content: 'popup with marker2' }" />
-    </l-marker>
-    <l-tooltip :options="{ content: 'tooltip standalone' }" :latlng="{ lat: 51.505, lng: 0 }" />
-    <l-popup :options="{ content: 'popup standalone' }" :latlng="{ lat: 51.505, lng: 0 }" />
-    <l-circle :latlng="[51.508, -0.11]" :options="{
-      color: 'red',
-      fillColor: '#f03',
-      fillOpacity: 0.5,
-      radius: 500
-    }" />
-    <l-polygon :latlng="[
-      [51.509, -0.08],
-      [51.503, -0.06],
-      [51.51, -0.047]
-    ]" />
-
-  </l-map>
+      <LCircleMarker :latlng="[51.512, -0.18]" :options="{
+        color: 'red',
+        fillColor: '#f03',
+        fillOpacity: 0.5,
+        radius: 100
+      }" />
+      <l-polygon :latlngs="[
+        [51.509, -0.08],
+        [51.503, -0.06],
+        [51.51, -0.047]
+      ]" />
+      <l-polyline :latlngs="[
+        [51.510, -0.09],
+        [51.505, -0.07],
+        [51.56, -0.048]
+      ]" />
+      <l-rectangle :latLngBounds="[
+        [51.510, -0.09],
+        [51.505, -0.07],
+      ]" />
+    </l-map>
+  </div>
+  <div>
+    <h1>Control</h1>
+    <l-map id="map3" :options="mapOptions">
+      <l-tilelayer urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
+        :options="tileLayerOptions" />
+      <!-- <l-marker id="marker3" :latlng="{ lat: 51.505, lng: -0.2 }" :options="{
+        title: 'marker3'
+      }">
+        <l-popup :options="{ content: 'popup with marker3' }" />
+      </l-marker> -->
+    </l-map>
+  </div>
 </template>
 
 
@@ -68,17 +111,20 @@ import '../node_modules/leaflet/dist/leaflet.css';
   height: 100%;
 }
 
-#map1 {
-  height: 100%;
+#map1,
+#map2,
+#map3 {
+  height: 300px;
 }
 
+html,
 body {
   padding: 0;
   margin: 0;
+  height: 100%;
 }
 
-html,
-body {
-  height: 100%;
+h1 {
+  padding: 0 20px;
 }
 </style>

src/components/LCircle.vue

@@ -1,28 +1,32 @@
 <script setup lang="ts">
 import L, { CircleOptions, LatLngExpression } from 'leaflet'
-import { PropType, inject, nextTick } from 'vue';
+import { PropType, inject, nextTick, useAttrs, useSlots } from 'vue';
 import { MapProvide } from '../core/Map';
+import { MAP_PROVIDE, getMapInjectKey } from '../utils/injectKey';
 
-const mapProvide = inject<MapProvide>('mapProvide');
 
+const mapProvide = inject<MapProvide>(MAP_PROVIDE);
+
+const key = getMapInjectKey();
 
 const props = defineProps({
   latlng: {
     type: Object as PropType<LatLngExpression>,
     required: true
   },
   options: {
-        type: Object as PropType<CircleOptions>,
-        required: false
-    }
+    type: Object as PropType<CircleOptions>,
+    required: false
+  }
 })
 
+
+
 nextTick(() => {
   const circle = L.circle(props.latlng, props.options);
-  mapProvide?.getMap()?.addLayer(circle);
+  mapProvide?.getMap(key)?.addLayer(circle);
 })
 
 </script>  
 
-<template>
-</template>
+<template></template>

src/components/LCircleMarker.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import L, { CircleMarkerOptions, CircleOptions, LatLngExpression } from 'leaflet'
+import { PropType, inject, nextTick } from 'vue';
+import { MapProvide } from '../core/Map';
+import { MAP_PROVIDE, getMapInjectKey } from '../utils/injectKey';
+
+
+const mapProvide = inject<MapProvide>(MAP_PROVIDE);
+
+const key = getMapInjectKey();
+
+const props = defineProps({
+  latlng: {
+    type: Object as PropType<LatLngExpression>,
+    required: true
+  },
+  options: {
+    type: Object as PropType<CircleMarkerOptions>,
+    required: false
+  }
+})
+
+
+
+nextTick(() => {
+  const circle = L.circleMarker(props.latlng, props.options);
+  mapProvide?.getMap(key)?.addLayer(circle);
+})
+
+</script>  
+
+<template></template>

src/components/LMap.vue

@@ -4,6 +4,7 @@ import { MapOptions } from 'leaflet';
 import { provide } from 'vue'
 import L from 'leaflet';
 import { mapProvide } from '../core/Map';
+import { MAP_PROVIDE, getMapInjectKey } from '../utils/injectKey';
 
 
 const props = defineProps({
@@ -17,11 +18,19 @@ const props = defineProps({
   }
 });
 
-provide('mapProvide', mapProvide)
+provide(MAP_PROVIDE, mapProvide)
+
+const key = getMapInjectKey(props.id);
 
 onMounted(() => {
+  console.log(props.id);
   const content  = L.map(props.id, props.options);
-  mapProvide.setMap(content);
+  mapProvide.setMap(key, content);
+})
+
+defineExpose({
+  id: props.id,
+  category: 'map'
 })
 
 </script>

src/components/LMarker.vue

@@ -7,6 +7,7 @@ import defaultIcon from 'leaflet/dist/images/marker-icon.png'
 import defaultIconShadow from 'leaflet/dist/images/marker-shadow.png';
 import defaultIconRetina from 'leaflet/dist/images/marker-icon-2x.png';
 import { markerProvide } from '../core/Marker';
+import { MAP_PROVIDE, MARK_PROVIDE, getMapInjectKey, getMarkerInjectKey } from '../utils/injectKey';
 
 const events = [
   'click',
@@ -29,6 +30,10 @@ const events = [
 
 
 const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
   latlng: {
     type: Object as PropType<LatLngExpression>,
     required: true,
@@ -38,17 +43,29 @@ const props = defineProps({
     required: false
   }
 });
-const mapProvide = inject<MapProvide>('mapProvide');
 
-provide('markerProvide', markerProvide)
+
+const mapProvide = inject<MapProvide>(MAP_PROVIDE);
+provide(MARK_PROVIDE, markerProvide);
+
+const markerKey = getMarkerInjectKey(props.id);
+const mapKey = getMapInjectKey();
 
 
 nextTick(() => {
   fixImageUrl();
   const marker = L.marker(props.latlng, props.options);
-  markerProvide.setMarker(marker);
-  mapProvide?.getMap()?.addLayer(marker);
 
+  markerProvide.setMarker(markerKey, marker);
+
+
+  mapProvide?.getMap(mapKey)?.addLayer(marker);
+
+})
+
+defineExpose({
+  id: props.id,
+  category: 'marker'
 })
 
 function fixImageUrl() {

src/components/LPolygon.vue

@@ -2,27 +2,30 @@
 import L, { PolylineOptions, LatLngExpression } from 'leaflet'
 import { PropType, inject, nextTick } from 'vue';
 import { MapProvide } from '../core/Map';
+import { MAP_PROVIDE, getMapInjectKey } from '../utils/injectKey';
 
-const mapProvide = inject<MapProvide>('mapProvide');
 
+const mapProvide = inject<MapProvide>(MAP_PROVIDE);
+
+const key = getMapInjectKey();
 
 const props = defineProps({
-  latlng: {
+  latlngs: {
     type: Object as PropType<LatLngExpression[] | LatLngExpression[][] | LatLngExpression[][][]>,
     required: true
   },
   options: {
-        type: Object as PropType<PolylineOptions>,
-        required: false
-    }
+    type: Object as PropType<PolylineOptions>,
+    required: false
+  }
 })
 
 nextTick(() => {
-  const polygon = L.polygon(props.latlng, props.options);
-  mapProvide?.getMap()?.addLayer(polygon);
+  const polygon = L.polygon(props.latlngs, props.options);
+
+  mapProvide?.getMap(key)?.addLayer(polygon);
 })
 
 </script>  
 
-<template>
-</template>
+<template></template>