app/assets/javascripts/diary_entry.js

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