Merge pull request #1 from johnarban/allow-parent-to-add-layers-directly

provide methods of adding layers to the map.

Author: Carifio24

src/components/LocationSelector.vue

@@ -44,7 +44,7 @@ const defaultMapOptions: MapOptions = {
 
 export default defineComponent({
 
-  emits: ["place", "update:modelValue", "error"],
+  emits: ["place", "update:modelValue", "error", "mapReady"],
 
   props: {
     activatorColor: {
@@ -122,6 +122,11 @@ export default defineComponent({
     geoJsonFiles: {
       type: Array as PropType<GeoJSONProp[]>,
       default: () => []
+    },
+    
+    layers: {
+      type: Array as PropType<L.Layer[]>,
+      default: () => []
     }
   },
 
@@ -264,6 +269,7 @@ export default defineComponent({
 
       map.attributionControl.setPrefix('<a href="https://leafletjs.com" title="A JavaScript library for interactive maps" target="_blank" rel="noopener noreferrer" >Leaflet</a>');
       
+      this.layers.forEach((layer) => layer.addTo(map));
       // show the geojson files
       this.geoJsonFiles.forEach((geojsonrecord) => {
         const url = geojsonrecord.url;
@@ -300,12 +306,26 @@ export default defineComponent({
       });
       
       this.map = map;
+      
+      this.$emit('mapReady');
     },
 
     updateValue(value: LocationDeg) {
       this.$emit('update:modelValue', value);
     },
 
+    addLayerToMap(leafletObject: L.Layer) {
+      if (this.map) {
+        leafletObject.addTo(this.map as Map);
+      }
+    },
+    
+    removeLayerFromMap(leafletObject: L.Layer) {
+      if (this.map) {
+        leafletObject.removeFrom(this.map as Map);
+      }
+    },
+
     updateCircle() {
       if (this.map) {
         this.selectedCircle?.remove();