mapa no geografico

app/javascript/controllers/non_geo_controller.js

@@ -0,0 +1,72 @@
+import { Controller } from 'stimulus'
+
+require("leaflet/dist/leaflet.css")
+import L from 'leaflet'
+delete L.Icon.Default.prototype._getIconUrl
+
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+})
+
+export default class extends Controller {
+  static targets = [ 'lat', 'lng', 'map', 'overlay' ]
+
+  async connect () {
+    this.marker()
+
+    this.latTarget.addEventListener('change', event => this.marker())
+    this.lngTarget.addEventListener('change', event => this.marker())
+    window.addEventListener('resize', event => this.map.invalidateSize())
+
+    const res = await fetch(this.element.dataset.map);
+    this.overlayTarget.innerHTML = await res.text();
+
+    this.map.on('click', event => {
+      this.latTarget.value = event.latlng.lat
+      this.lngTarget.value = event.latlng.lng
+
+      this.latTarget.dispatchEvent(new Event('change'))
+    })
+  }
+
+  marker () {
+    if (this._marker) this.map.removeLayer(this._marker)
+
+    this._marker = L.marker(this.coords).addTo(this.map)
+
+    return this._marker
+  }
+
+  get lat () {
+    const lat = parseFloat(this.latTarget.value)
+
+    return isNaN(lat) ? 0 : lat
+  }
+
+  get lng () {
+    const lng = parseFloat(this.lngTarget.value)
+
+    return isNaN(lng) ? 0 : lng
+  }
+
+  get coords () {
+    return [this.lat, this.lng]
+  }
+
+  get map () {
+    if (!this._map) {
+      this._map = L.map(this.mapTarget).setView(this.coords, 13);
+
+      const bounds = [[0,0], [this.mapTarget.clientHeight, this.mapTarget.clientWidth]];
+
+      L.svgOverlay(this.overlayTarget.querySelector('svg'), bounds).addTo(this._map);
+
+      this._map.fitBounds(bounds);
+      this._map.setMaxBounds(bounds);
+    }
+
+    return this._map
+  }
+}

app/models/metadata_non_geo.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+class MetadataNonGeo < MetadataGeo; end

app/views/posts/attribute_ro/_non_geo.haml

@@ -0,0 +1,6 @@
+- lat = metadata.value['lat']
+- lng = metadata.value['lng']
+%tr{ id: attribute }
+  %th= post_label_t(attribute, post: post)
+  %td
+    = "#{lat},#{lng}"

app/views/posts/attributes/_non_geo.haml

@@ -0,0 +1,24 @@
+.row{ data: { controller: 'non-geo', map: "#{site.url}/public/map.svg" } }
+  .d-none{ hidden: true, data: { target: 'non-geo.overlay' }}
+  .col
+    .form-group
+      = label_tag "#{base}_#{attribute}_lat",
+        post_label_t(attribute, :lat, post: post)
+      = text_field(*field_name_for(base, attribute, :lat),
+        value: metadata.value['lat'],
+        **field_options(attribute, metadata),
+        data: { target: 'non-geo.lat' })
+      = render 'posts/attribute_feedback',
+        post: post, attribute: [attribute, :lat], metadata: metadata
+  .col
+    .form-group
+      = label_tag "#{base}_#{attribute}_lng",
+        post_label_t(attribute, :lng, post: post)
+      = text_field(*field_name_for(base, attribute, :lng),
+        value: metadata.value['lng'],
+        **field_options(attribute, metadata),
+        data: { target: 'non-geo.lng' })
+      = render 'posts/attribute_feedback',
+        post: post, attribute: [attribute, :lng], metadata: metadata
+  .col-12.mb-3
+    %div{ data: { target: 'non-geo.map' }, style: 'height: 250px' }