Add map view for geodata

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,26 @@ 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 mapBoundsIsValid() {
+    return this.mapBounds.isValid();
+  }
+
   get searchObject() {
     return this.queryParams.reduce((properties, item) => {
       properties[item] = this[item];

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

@@ -218,6 +218,44 @@
         class='mb-4'
       />
     {{/each}}
+  {{else if (eq this.dataView 'map')}}
+    {{#if this.mapBoundsIsValid}}
+      <LeafletMap
+        @bounds={{this.mapBounds}}
+        @scrollWheelZoom={{false}}
+        class='h-96 mb-4'
+        as |layers|
+      >
+        <layers.tile
+          @url='https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'
+        />
+
+        {{#each @model.data.hits as |data|}}
+          <layers.marker
+            @lat={{data._geo.lat}}
+            @lng={{data._geo.lng}}
+            as |marker|
+          >
+            <marker.popup>
+              {{#each-in data as |key value|}}
+                <div class='mb-2'>
+                  <label for={{@for}} class='block mb-1'>
+                    {{capitalize key}}
+                  </label>
+                  {{if
+                    (eq (type-of value) 'object')
+                    (json-stringify value)
+                    value
+                  }}
+                </div>
+              {{/each-in}}
+            </marker.popup>
+          </layers.marker>
+        {{/each}}
+      </LeafletMap>
+    {{else}}
+      <div class='mb-4'>Geodate not found.</div>
+    {{/if}}
   {{/if}}
 
   <div class='flex items-center'>

ember-cli-build.js

@@ -13,6 +13,15 @@ module.exports = function (defaults) {
     'ember-simple-auth': {
       useSessionSetupMethod: true,
     },
+    fingerprint: {
+      exclude: [
+        'images/layers-2x.png',
+        'images/layers.png',
+        'images/marker-icon-2x.png',
+        'images/marker-icon.png',
+        'images/marker-shadow.png',
+      ],
+    },
   });
 
   return require('@embroider/compat').compatBuild(app, Webpack, {

package.json

@@ -72,6 +72,7 @@
     "ember-composable-helpers": "^5.0.0",
     "ember-fetch": "^8.1.2",
     "ember-headlessui": "^0.13.0",
+    "ember-leaflet": "^5.1.1",
     "ember-load-initializers": "^2.1.2",
     "ember-mdi": "2.0.0-beta.2",
     "ember-modifier": "4.0.0-beta.1",
@@ -92,6 +93,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-qunit": "^7.3.1",
     "file-loader": "^6.2.0",
+    "leaflet": "^1.9.3",
     "loader.js": "^4.7.0",
     "meilisearch": "^0.25.0",
     "monaco-editor": "^0.34.0",