app/assets/javascripts/diary_entry.js

   1 //= require maplibre.map
   2 //= require maplibre/dom_util
   3
   4 $(function () {
   5   let marker, map;
   6
   7   function updateFormFieldsFromMarkerPosition() {
   8     const lngLat = marker.getLngLat();
   9     $("#latitude").val(lngLat.lat);
  10     $("#longitude").val(lngLat.lng);
  11   }
  12
  13   function setLocation(e) {
  14     const coords = e.lngLat.wrap();
  15     if (marker) {
  16       marker.setLngLat(coords);
  17     } else {
  18       marker = new OSM.MapLibre.Marker({ draggable: true })
  19         .setLngLat(coords)
  20         .setPopup(new OSM.MapLibre.Popup().setHTML(OSM.i18n.t("diary_entries.edit.marker_text")))
  21         .addTo(map);
  22       marker.on("dragend", updateFormFieldsFromMarkerPosition);
  23     }
  24     updateFormFieldsFromMarkerPosition();
  25   }
  26
  27   $("#usemap").click(function (e) {
  28     e.preventDefault();
  29
  30     $("#map").show();
  31     $("#usemap").hide();
  32
  33     const params = $("#map").data();
  34     map = new maplibregl.Map({
  35       ...OSM.MapLibre.defaultSecondaryMapOptions,
  36       center: [params.lon, params.lat],
  37       zoom: params.zoom - 1
  38     });
  39
  40     const position = $("html").attr("dir") === "rtl" ? "top-left" : "top-right";
  41     const navigationControl = new maplibregl.NavigationControl({ showCompass: false });
  42     map.addControl(navigationControl, position);
  43     map.touchZoomRotate.disableRotation();
  44     map.keyboard.disableRotation();
  45
  46     // Create marker if coordinates exist when map is shown
  47     if ($("#latitude").val() && $("#longitude").val()) {
  48       const lngLat = new maplibregl.LngLat($("#longitude").val(), $("#latitude").val());
  49       setLocation({ lngLat });
  50       map.setCenter(lngLat);
  51     }
  52
  53     map.on("click", setLocation);
  54   });
  55 });