Merge pull request soal#12 from geospoc/feat/add-custom-container-support

feat: add custom container support

Author: vinayakkulkarni

README.md

@@ -23,6 +23,8 @@ Now you can add geocoder control like other controls:
     <MglGeocoderControl
       :accessToken="accessToken"
       :input.sync="defaultInput"
+      container="geocoder_container_id"
+      position="top-left"
       @results="handleSearch"
     />
   </MglMap>

src/GeocoderControl.js

@@ -16,6 +16,14 @@ export default {
   inject: ['mapbox', 'map'],
 
   props: {
+    position: {
+      type: String,
+      default: 'top-right',
+    },
+    container: {
+      type: String,
+      default: null,
+    },
     // Mapbox-geocoder options
     accessToken: {
       type: String,
@@ -123,7 +131,13 @@ export default {
 
   methods: {
     $_deferredMount() {
-      this.map.addControl(this.control);
+      if (this.container !== null) {
+        document
+          .getElementById(this.container)
+          .appendChild(this.control.onAdd(this.map));
+      } else {
+        this.map.addControl(this.control, this.position);
+      }
       if (this.input) {
         this.control.setInput(this.input);
       }