Add map

app/controllers/admin/indexes/item/documents/index.js

@@ -1,9 +1,11 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { Magnify, Table, /* MapOutline, */ CodeJson } from 'ember-mdi';
+import { Magnify, Table, MapOutline, CodeJson } from 'ember-mdi';
 import { inject as service } from '@ember/service';
 import ActionInvoker from 'meiliadmin/lib/action-invoker';
+import { FeatureGroup } from 'leaflet';
+import { Marker } from 'leaflet';
 
 export default class AdminIndexesItemDocumentsIndexController extends Controller {
   @service router;
@@ -54,6 +56,7 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
   views = {
     table: Table,
     json: CodeJson,
+    map: MapOutline,
   };
 
   modes = ['simple', 'advanced'];
@@ -64,6 +67,22 @@ export default class AdminIndexesItemDocumentsIndexController extends Controller
     this.invoker = new ActionInvoker();
   }
 
+  get markers() {
+    const markers = [];
+
+    for (const item of this.model.data.hits) {
+      if (item._geo) {
+        markers.push(new Marker([item._geo.lat, item._geo.lng]));
+      }
+    }
+
+    return new FeatureGroup(markers);
+  }
+
+  get mapBounds() {
+    return this.markers.getBounds();
+  }
+
   get searchObject() {
     return this.queryParams.reduce((properties, item) => {
       properties[item] = this[item];

app/templates/admin/indexes/item/documents/index.hbs

@@ -218,6 +218,28 @@
         class='mb-4'
       />
     {{/each}}
+  {{else if (eq this.dataView 'map')}}
+    <LeafletMap
+      @bounds={{this.mapBounds}}
+      class="h-48 mb-4"
+      as |layers|
+    >
+      <layers.tile
+        @url='http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
+      />
+
+      {{#each @model.data.hits as |data|}}
+        <layers.marker
+          @lat={{data._geo.lat}}
+          @lng={{data._geo.lng}}
+          as |marker|
+        >
+          <marker.popup>
+            <h3>Hotel</h3>
+          </marker.popup>
+        </layers.marker>
+      {{/each}}
+    </LeafletMap>
   {{/if}}
 
   <div class='flex items-center'>