app/assets/javascripts/index/directions-endpoint.js

   1 OSM.DirectionsEndpoint = function Endpoint(map, input, marker, dragCallback, changeCallback) {
   2   const endpoint = {};
   3
   4   endpoint.marker = L.marker([0, 0], {
   5     icon: OSM.getMarker(marker),
   6     draggable: true,
   7     autoPan: true
   8   });
   9
  10   endpoint.enableListeners = function () {
  11     endpoint.marker.on("drag dragend", markerDragListener);
  12     input.on("keydown", inputKeydownListener);
  13     input.on("change", inputChangeListener);
  14   };
  15
  16   endpoint.disableListeners = function () {
  17     endpoint.marker.off("drag dragend", markerDragListener);
  18     input.off("keydown", inputKeydownListener);
  19     input.off("change", inputChangeListener);
  20   };
  21
  22   function markerDragListener(e) {
  23     const latlng = L.latLng(OSM.cropLocation(e.target.getLatLng(), map.getZoom()));
  24
  25     if (endpoint.geocodeRequest) endpoint.geocodeRequest.abort();
  26     delete endpoint.geocodeRequest;
  27
  28     setLatLng(latlng);
  29     setInputValueFromLatLng(latlng);
  30     endpoint.value = input.val();
  31     if (e.type === "dragend") getReverseGeocode();
  32     dragCallback(e.type === "drag");
  33   }
  34
  35   function inputKeydownListener() {
  36     input.removeClass("is-invalid");
  37   }
  38
  39   function inputChangeListener(e) {
  40     // make text the same in both text boxes
  41     const value = e.target.value;
  42     endpoint.setValue(value);
  43   }
  44
  45   endpoint.setValue = function (value) {
  46     if (endpoint.geocodeRequest) endpoint.geocodeRequest.abort();
  47     delete endpoint.geocodeRequest;
  48     input.removeClass("is-invalid");
  49
  50     const coordinatesMatch = value.match(/^\s*([+-]?\d+(?:\.\d*)?)(?:\s+|\s*[/,]\s*)([+-]?\d+(?:\.\d*)?)\s*$/);
  51     const latlng = coordinatesMatch && L.latLng(coordinatesMatch[1], coordinatesMatch[2]);
  52
  53     if (latlng && endpoint.cachedReverseGeocode && endpoint.cachedReverseGeocode.latlng.equals(latlng)) {
  54       setLatLng(latlng);
  55       if (endpoint.cachedReverseGeocode.notFound) {
  56         endpoint.value = value;
  57         input.addClass("is-invalid");
  58       } else {
  59         endpoint.value = endpoint.cachedReverseGeocode.value;
  60       }
  61       input.val(endpoint.value);
  62       changeCallback();
  63       return;
  64     }
  65
  66     endpoint.value = value;
  67     removeLatLng();
  68     input.val(value);
  69
  70     if (latlng) {
  71       setLatLng(latlng);
  72       setInputValueFromLatLng(latlng);
  73       getReverseGeocode();
  74       changeCallback();
  75     } else if (endpoint.value) {
  76       getGeocode();
  77     }
  78   };
  79
  80   endpoint.clearValue = function () {
  81     if (endpoint.geocodeRequest) endpoint.geocodeRequest.abort();
  82     delete endpoint.geocodeRequest;
  83     removeLatLng();
  84     delete endpoint.value;
  85     input.val("");
  86     map.removeLayer(endpoint.marker);
  87   };
  88
  89   endpoint.swapCachedReverseGeocodes = function (otherEndpoint) {
  90     const g0 = endpoint.cachedReverseGeocode;
  91     const g1 = otherEndpoint.cachedReverseGeocode;
  92     delete endpoint.cachedReverseGeocode;
  93     delete otherEndpoint.cachedReverseGeocode;
  94     if (g0) otherEndpoint.cachedReverseGeocode = g0;
  95     if (g1) endpoint.cachedReverseGeocode = g1;
  96   };
  97
  98   function getGeocode() {
  99     const viewbox = map.getBounds().toBBoxString(), // <sw lon>,<sw lat>,<ne lon>,<ne lat>
 100           geocodeUrl = OSM.NOMINATIM_URL + "search?" + new URLSearchParams({ q: endpoint.value, format: "json", viewbox });
 101
 102     endpoint.geocodeRequest = new AbortController();
 103     fetch(geocodeUrl, { signal: endpoint.geocodeRequest.signal })
 104       .then(r => r.json())
 105       .then(success)
 106       .catch(() => {});
 107
 108     function success(json) {
 109       delete endpoint.geocodeRequest;
 110       if (json.length === 0) {
 111         input.addClass("is-invalid");
 112         // eslint-disable-next-line no-alert
 113         alert(OSM.i18n.t("javascripts.directions.errors.no_place", { place: endpoint.value }));
 114         return;
 115       }
 116
 117       setLatLng(L.latLng(json[0]));
 118
 119       endpoint.value = json[0].display_name;
 120       input.val(json[0].display_name);
 121
 122       changeCallback();
 123     }
 124   }
 125
 126   function getReverseGeocode() {
 127     const latlng = endpoint.latlng.clone(),
 128           { lat, lng } = latlng,
 129           reverseGeocodeUrl = OSM.NOMINATIM_URL + "reverse?" + new URLSearchParams({ lat, lon: lng, format: "json" });
 130
 131     endpoint.geocodeRequest = new AbortController();
 132     fetch(reverseGeocodeUrl, { signal: endpoint.geocodeRequest.signal })
 133       .then(r => r.json())
 134       .then(success)
 135       .catch(() => {});
 136
 137     function success(json) {
 138       delete endpoint.geocodeRequest;
 139       if (!json || !json.display_name) {
 140         endpoint.cachedReverseGeocode = { latlng: latlng, notFound: true };
 141         return;
 142       }
 143
 144       endpoint.value = json.display_name;
 145       input.val(json.display_name);
 146       endpoint.cachedReverseGeocode = { latlng: latlng, value: endpoint.value };
 147     }
 148   }
 149
 150   function setLatLng(ll) {
 151     input
 152       .attr("data-lat", ll.lat)
 153       .attr("data-lon", ll.lng);
 154     endpoint.latlng = ll;
 155     endpoint.marker
 156       .setLatLng(ll)
 157       .addTo(map);
 158   }
 159
 160   function removeLatLng() {
 161     input
 162       .removeAttr("data-lat")
 163       .removeAttr("data-lon");
 164     delete endpoint.latlng;
 165   }
 166
 167   function setInputValueFromLatLng(latlng) {
 168     input.val(latlng.lat + ", " + latlng.lng);
 169   }
 170
 171   return endpoint;
 172 };