app/assets/javascripts/index/export.js

   1 //= require download_util
   2
   3 OSM.Export = function (map) {
   4   const page = {};
   5
   6   const locationFilter = new L.LocationFilter({
   7     enableButton: false,
   8     adjustButton: false
   9   }).on("change", update);
  10
  11   function getBounds() {
  12     return L.latLngBounds(
  13       L.latLng($("#minlat").val(), $("#minlon").val()),
  14       L.latLng($("#maxlat").val(), $("#maxlon").val()));
  15   }
  16
  17   function boundsChanged() {
  18     const bounds = getBounds();
  19     map.fitBounds(bounds);
  20     locationFilter.setBounds(bounds);
  21     locationFilter.enable();
  22     validateControls();
  23   }
  24
  25   function enableFilter(e) {
  26     e.preventDefault();
  27
  28     $("#drag_box").hide();
  29
  30     locationFilter.setBounds(map.getBounds().pad(-0.2));
  31     locationFilter.enable();
  32     validateControls();
  33   }
  34
  35   function update() {
  36     setBounds(locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds());
  37     validateControls();
  38   }
  39
  40   function setBounds(bounds) {
  41     const truncated = [bounds.getSouthWest(), bounds.getNorthEast()]
  42       .map(c => OSM.cropLocation(c, map.getZoom()));
  43     $("#minlon").val(truncated[0][1]);
  44     $("#minlat").val(truncated[0][0]);
  45     $("#maxlon").val(truncated[1][1]);
  46     $("#maxlat").val(truncated[1][0]);
  47
  48     $("#export_overpass").attr("href",
  49                                "https://overpass-api.de/api/map?bbox=" +
  50                                truncated.map(p => p.reverse()).join());
  51   }
  52
  53   function validateControls() {
  54     $("#export_osm_too_large").toggle(getBounds().getSize() > OSM.MAX_REQUEST_AREA);
  55     $("#export_commit").toggle(getBounds().getSize() < OSM.MAX_REQUEST_AREA);
  56   }
  57
  58   function checkSubmit(e) {
  59     if (getBounds().getSize() > OSM.MAX_REQUEST_AREA) e.preventDefault();
  60   }
  61
  62   page.pushstate = page.popstate = function (path) {
  63     OSM.loadSidebarContent(path, page.load);
  64   };
  65
  66   page.load = function () {
  67     map
  68       .addLayer(locationFilter)
  69       .on("moveend", update);
  70
  71     $("#maxlat, #minlon, #maxlon, #minlat").change(boundsChanged);
  72     $("#drag_box").click(enableFilter);
  73     $(".export_form").on("submit", checkSubmit);
  74
  75     document.querySelector(".export_form")
  76       .addEventListener("turbo:submit-end", OSM.getTurboBlobHandler("map.osm"));
  77
  78     document.querySelector(".export_form")
  79       .addEventListener("turbo:before-fetch-response", OSM.turboHtmlResponseHandler);
  80
  81     document.querySelector(".export_form")
  82       .addEventListener("turbo:before-fetch-request", function (event) {
  83         event.detail.fetchOptions.headers.Accept = "application/xml";
  84       });
  85
  86     update();
  87     return map.getState();
  88   };
  89
  90   page.unload = function () {
  91     map
  92       .removeLayer(locationFilter)
  93       .off("moveend", update);
  94   };
  95
  96   return page;
  97 };