OpenDroneMap-WebODM/coreplugins/osm-quickedit/public/main.js

// code to load JOSM is from the HOT OSM Tasking Manager
// https://github.com/hotosm/tasking-manager/
// and covered by a BSD 2-Clause License

PluginsAPI.Map.addActionButton(function (options) {
  if (options.tiles.length === 1) {
    // maps that display multiple tasks don't have a share option on the page
    // and so we can't set things up to edit them

    var tile = options.tiles[0];
    var tileUrl =
      window.location.protocol +
      "//" +
      window.location.host +
      tile.url +
      "tiles/{z}/{x}/{y}.png";
    var JOSM_COMMAND_TIMEOUT = 1000;
    var josmLastCommand = 0;

    var startEditor = function (editor) {
      // to load our imagery in an editor, we need to share it
      // .shareButton switches to btn-primary when the project is shared
      var private = $(".shareButton").hasClass("btn-secondary");
      if (private) {
        // check with the user that it's okay to share the project
        if (
          window.confirm(
            "Sharing will be turned on for this project so that imagery can be loaded in the editor."
          )
        ) {
          if ($(".sharePopup.top").is(":visible")) {
            // it is very unlikely, but possible that the sharePopup is open
            // in which case we need to click the checkbox not the button
            $(".shareButton div.checkbox input").click();
          } else {
            // otherwise we can just click the shareButton and it will turn on sharing
            $(".shareButton").click();
          }
        }
      }

      if (editor === "ideditor") {
        var editUrl =
          "https://www.openstreetmap.org/edit?editor=id#map=" +
          options.map.getZoom() +
          "/" +
          options.map.getCenter().lat +
          "/" +
          options.map.getCenter().lng +
          "&background=custom:" +
          tileUrl;
        window.open(editUrl);
      } else if (editor === "josm") {
        function formatUrlParams_(params) {
          return (
            "?" +
            Object.keys(params)
              .map(function (key) {
                return key + "=" + params[key];
              })
              .join("&")
          );
        }

        function sendJOSMCmd(endpoint, params) {
          var url = endpoint + formatUrlParams_(params),
            loaded,
            iframe;

          return new Promise(function (resolve, reject) {
            // Figure out when we can next run a command
            var wait = Math.max(
              josmLastCommand + JOSM_COMMAND_TIMEOUT - Date.now(),
              0
            );

            // This remembers when we are going to run THIS command, and adds the timeout
            // (yes, it is double-counted - this seems to be more reliable).
            josmLastCommand = Date.now() + wait + JOSM_COMMAND_TIMEOUT;

            setTimeout(function () {
              iframe = document.createElement("iframe");
              iframe.style.display = "none";
              iframe.addEventListener("load", function () {
                if (loaded === undefined) {
                  loaded = true;
                  resolve();
                  iframe.parentElement.removeChild(iframe);
                }
              });
              iframe.setAttribute("src", url);
              document.body.appendChild(iframe);
            }, wait);

            setTimeout(function () {
              if (loaded === undefined) {
                loaded = false;
                reject();
                iframe.parentElement.removeChild(iframe);
              }
            }, wait + JOSM_COMMAND_TIMEOUT);
          });
        }

        function prepareJOSM() {
          var imageryParams = {
            title: tile.meta.name,
            type: "tms",
            max_zoom: 24,
            url: encodeURIComponent(tileUrl),
          };
          sendJOSMCmd("http://127.0.0.1:8111/imagery", imageryParams).catch(
            function () {
              alert(
                "Cannot communicate with JOSM. Is it open and running on http://127.0.0.1:8111 ?"
              );
            }
          );
          var loadAndZoomParams = {
            left: options.map.getBounds().getWest(),
            bottom: options.map.getBounds().getSouth(),
            right: options.map.getBounds().getEast(),
            top: options.map.getBounds().getNorth(),
            changeset_comment: "",
            changeset_source: encodeURIComponent("WebODM - " + tile.meta.name),
            new_layer: false,
          };
          sendJOSMCmd("http://127.0.0.1:8111/load_and_zoom", loadAndZoomParams);
        }

        prepareJOSM();
      }
    };

    return React.createElement(
      "div",
      { className: "btn-group dropup" },
      React.createElement(
        // child a
        "button",
        {
          className: "btn btn-sm btn-secondary dropdown-toggle",
          "data-toggle": "dropdown",
          "aria-haspopup": "true",
          "aria-expanded": "false",
        },
        React.createElement("i", { className: "fa fa-map" }, ""), // child a1
        " OSM Digitize ", // child a2
        React.createElement("span", { className: "caret" }, "") // child a3
      ),
      React.createElement(
        // child b
        "ul",
        { className: "dropdown-menu" },
        React.createElement(
          "li",
          null, // child b2
          React.createElement(
            "a",
            {
              href: "#",
              onClick: function () {
                startEditor("ideditor");
              },
            },
            "iD Editor"
          ) // child b2.1
        ),
        React.createElement(
          "li",
          null, // child b2
          React.createElement(
            "a",
            {
              href: "#",
              onClick: function () {
                startEditor("josm");
              },
            },
            "JOSM"
          ) // child b2.2
        )
      )
    );
  }
});