ffrgb · micw · Nov 2, 2021 · Nov 2, 2021 · Nov 3, 2021
diff --git a/README.md b/README.md
@@ -18,3 +18,26 @@ Standalone: https://regensburg.freifunk.net/meshviewer/
 - [POEditor](https://poeditor.com/join/project/VZBjPNNic9) for providing an easy non-developer translation environment
 
 These tools need a lot of infrastructures and provide a free account for open source software.
+
+## Building / Running
+
+Required tools:
+* yarn
+* gulp
+
+1st install the dependencies by running
+```
+yarn
+```
+
+Then you can start a development server with
+```
+gulp serve
+```
+
+To build a release, run
+```
+gulp
+```
+
+The result will be in the "build" folder afterwards.
diff --git a/gulp/tasks/copy.js b/gulp/tasks/copy.js
@@ -1,6 +1,6 @@
 module.exports = function (gulp, plugins, config) {
   return function copy() {
-    gulp.src(['html/*.html', 'assets/favicon/*'])
+    gulp.src(['html/*.html', 'html/*.js', 'assets/favicon/*'])
       .pipe(gulp.dest(config.build));
     gulp.src(['assets/logo.svg', 'service-worker.js'])
       .pipe(gulp.dest(config.build));

diff --git a/html/embed.html b/html/embed.html
@@ -0,0 +1,6 @@
+<html>
+
+  <iframe src="./index.html" style="border: 1px solid red; width: 95%; height: 95%" id="meshviewer-embedded"></iframe>
+  <script type="text/javascript" src="./embed.js" />
+
+</html>
diff --git a/html/embed.js b/html/embed.js
@@ -0,0 +1,35 @@
+(function() {
+
+    var iframe=document.getElementById("meshviewer-embedded")
+    if (!iframe) {
+        console.log("IFrame 'meshviewer-embedded' not found")
+        return;
+    }
+    if (!iframe.contentWindow) {
+        console.log("Element 'meshviewer-embedded' seems not to be a valid iframe")
+        return;
+    }
+
+    function updateIframeHash() { // see https://gist.github.com/manufitoussi/7529fa882ff0b737f257
+        if(iframe.contentWindow.location.host !== "") {
+            // iframe already loaded.
+            iframe.contentWindow.location.hash = window.location.hash;
+          } else {
+            // iframe is just starting.
+            var newHash = window.location.hash;
+            var srcStr = iframe.getAttribute('src');
+            var words = srcStr.split('#');
+            var href = words[0];
+            var newSrc = href + newHash;
+            iframe.setAttribute('src', newSrc);
+          }
+    };
+
+    updateIframeHash();
+    iframe.contentWindow.addEventListener("message", (event) => {
+        if (event && event.data && event.data.hash) {
+            window.location.replace(event.data.hash);
+        }
+    }, false);
+    window.onhashchange = updateIframeHash;
+}) ();
diff --git a/lib/main.js b/lib/main.js
@@ -71,6 +71,10 @@ define(['moment', 'utils/router', 'leaflet', 'gui', 'helper', 'utils/language'],
         };
       }
 
+      window.onhashchange = function () {
+        window.postMessage({hash: window.location.hash}, '*');
+      };
+
       var language = new Language();
       window.router = new Router(language);