app/assets/javascripts/diary_entry.js

   1 $(function () {
   2   let marker, map;
   3
   4   function setLocation(e) {
   5     const latlng = e.latlng.wrap();
   6
   7     $("#latitude").val(latlng.lat);
   8     $("#longitude").val(latlng.lng);
   9
  10     if (marker) {
  11       map.removeLayer(marker);
  12     }
  13
  14     marker = L.marker(e.latlng, { icon: OSM.getMarker({}) }).addTo(map)
  15       .bindPopup(OSM.i18n.t("diary_entries.edit.marker_text"));
  16   }
  17
  18   $("#usemap").click(function (e) {
  19     e.preventDefault();
  20
  21     $("#map").show();
  22     $("#usemap").hide();
  23
  24     const params = $("#map").data();
  25     const centre = [params.lat, params.lon];
  26     const position = $("html").attr("dir") === "rtl" ? "topleft" : "topright";
  27
  28     map = L.map("map", {
  29       attributionControl: false,
  30       zoomControl: false
  31     }).addLayer(new L.OSM.Mapnik());
  32
  33     L.OSM.zoom({ position }).addTo(map);
  34
  35     map.setView(centre, params.zoom);
  36
  37     if ($("#latitude").val() && $("#longitude").val()) {
  38       marker = L.marker(centre, { icon: OSM.getMarker({}) }).addTo(map)
  39         .bindPopup(OSM.i18n.t("diary_entries.edit.marker_text"));
  40     }
  41
  42     map.on("click", setLocation);
  43   });
  44 });