diff --git a/umap/static/umap/js/modules/autocomplete.js b/umap/static/umap/js/modules/autocomplete.js
index da02c390..e6e55b92 100644
--- a/umap/static/umap/js/modules/autocomplete.js
+++ b/umap/static/umap/js/modules/autocomplete.js
@@ -248,7 +248,7 @@ export class BaseAjax extends BaseAutocomplete {
     if (val === this.cache) return
     else this.cache = val
     val = val.toLowerCase()
-    const url = Util.template(this.URL, {q: encodeURIComponent(val)})
+    const url = Util.template(this.URL, { q: encodeURIComponent(val) })
     this.handleResults(await this._search(url))
   }
 
@@ -257,7 +257,6 @@ export class BaseAjax extends BaseAutocomplete {
     if (response && response.ok) {
       return await response.json()
     }
-
   }
 }
 
diff --git a/umap/static/umap/js/modules/plugins/communes.js b/umap/static/umap/js/modules/plugins/communes.js
new file mode 100644
index 00000000..78716e34
--- /dev/null
+++ b/umap/static/umap/js/modules/plugins/communes.js
@@ -0,0 +1,60 @@
+import { DomUtil, DomEvent, stamp } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { translate } from '../i18n.js'
+import { BaseAjax, SingleMixin } from '../autocomplete.js'
+import { Request } from '../request.js'
+import Alert from '../ui/alert.js'
+import Dialog from '../ui/dialog.js'
+
+class Autocomplete extends SingleMixin(BaseAjax) {
+  URL = 'https://geo.api.gouv.fr/communes?nom={q}&limit=5'
+
+  createResult(item) {
+    return super.createResult({
+      value: item.code,
+      label: `${item.nom} (${item.code})`,
+    })
+  }
+}
+
+export class Plugin {
+  constructor(map) {
+    this.map = map
+    this.name = 'Communes'
+    this.type = 'importer'
+    this.dialog = new Dialog(this.map._controlContainer)
+    this.map.registerPlugin(this)
+    this.options = {
+      theme: null,
+      boundary: null,
+      aspoint: false,
+    }
+    const alert = new Alert(document.querySelector('header'))
+    this.request = new Request(alert)
+  }
+
+  addImporter() {
+    return {
+      name: this.name,
+      callback: this.open,
+    }
+  }
+
+  async open(importer) {
+    const container = DomUtil.create('div')
+    DomUtil.createTitle(container, this.name)
+    const options = {
+      on_select: (choice) => {
+        this.options.boundary = choice.item.value
+        importer.urlInput.value = `https://geo.api.gouv.fr/communes?code=${this.options.boundary}&format=geojson&geometry=contour`
+        importer.typeInput.value = 'geojson'
+        this.dialog.close()
+      },
+    }
+    this.autocomplete = new Autocomplete(container, options)
+
+    this.dialog.open({
+      content: container,
+      className: 'communes dark',
+    })
+  }
+}