app/assets/javascripts/id.js

   1 //= require @openstreetmap/id/dist/iD.js
   2
   3 /* globals iD */
   4
   5 document.addEventListener("DOMContentLoaded", function () {
   6   const container = document.getElementById("id-container");
   7
   8   if (typeof iD === "undefined" || !iD.utilDetect().support) {
   9     container.innerHTML = "This editor is supported " +
  10       "in Firefox, Chrome, Safari, Opera and Edge. " +
  11       "Please upgrade your browser or use JOSM to edit the map.";
  12     container.className = "unsupported";
  13   } else {
  14     const idContext = iD.coreContext();
  15     idContext.connection().apiConnections([]);
  16     const url = location.protocol + "//" + location.host;
  17     idContext.preauth({
  18       url: url,
  19       apiUrl: url.replace("www.openstreetmap.org", "api.openstreetmap.org"),
  20       access_token: container.dataset.token
  21     });
  22
  23     const id = idContext
  24       .embed(true)
  25       .assetPath("@openstreetmap/id/dist/")
  26       .assetMap(JSON.parse(container.dataset.assetMap))
  27       .locale(container.dataset.locale)
  28       .theme(container.dataset.theme)
  29       .containerNode(container)
  30       .init();
  31
  32     if (parent === window) {
  33       // iD not opened in an iframe -> skip setting of parent  handlers
  34       return;
  35     }
  36
  37     function postMessageToParent(type, data) {
  38       parent.postMessage({ type, data }, location.origin);
  39     }
  40
  41     id.ui().hash.on("change.embed", function () {
  42       if (id.inIntro()) return;
  43       const zoom = ~~id.map().zoom(),
  44             center = id.map().center(),
  45             llz = { lon: center[0], lat: center[1], zoom: zoom };
  46
  47       postMessageToParent("hashchange", llz);
  48     });
  49
  50     window.addEventListener("message", function (event) {
  51       if (event.source !== parent || event.origin !== location.origin) return;
  52       const msg = event.data;
  53       if (!msg || msg.type !== "hashchange") return;
  54       const data = msg.data;
  55       // 0ms timeout to avoid iframe JS context weirdness.
  56       // https://gist.github.com/jfirebaugh/5439412
  57       setTimeout(function () {
  58         id.map().centerZoom(
  59           [data.lon, data.lat],
  60           Math.max(data.zoom || 15, 13));
  61       }, 0);
  62     });
  63
  64     new MutationObserver(() =>
  65       postMessageToParent("titlechange", document.title)
  66     ).observe(document.querySelector("title"), { childList: true, subtree: true, characterData: true });
  67   }
  68 });