Post message when hash changes (#82)

frontend/README.md

@@ -26,6 +26,23 @@ Example:
 <iframe style="height: 500px; width: 100%; border: none;" src="https://facilmap.org/mymap?search=false&amp;toolbox=false"></iframe>
 ```
 
+To synchronize the map state with the location hash (to add something like #9/31/24 to the address bar of the browser to indicate the current map view), add the following script:
+
+```html
+<iframe id="facilmap" style="height: 500px; width: 100%; border: none;" src="https://facilmap.org/mymap"></iframe>
+<script>
+	window.addEventListener("message", function(evt) {
+		if(evt.data && evt.data.type == "facilmap-hash" && location.hash != "#" + evt.data.hash)
+			location.replace("#" + evt.data.hash);
+	});
+
+	window.addEventListener("hashchange", function() {
+		var iframe = document.getElementById("facilmap");
+		iframe.src = iframe.src.replace(/#.*$/, "") + location.hash;
+	});
+</script>
+```
+
 Directly into a page
 --------------------
 

frontend/app/hash/hash.js

@@ -35,7 +35,11 @@ fm.app.directive("fmHash", function($rootScope, fmUtils, $q) {
 
 				map.map.on("layeradd", hashControl.onMapMove, hashControl);
 				map.map.on("layerremove", hashControl.onMapMove, hashControl);
-				map.mapEvents.$on("searchchange", hashControl.onMapMove.bind(hashControl));
+				map.mapEvents.$on("searchchange", () => {
+					setTimeout(() => {
+						hashControl.onMapMove();
+					}, 0);
+				});
 				map.client.on("filter", hashControl.onMapMove.bind(hashControl));
 			};
 
@@ -98,6 +102,13 @@ fm.app.directive("fmHash", function($rootScope, fmUtils, $q) {
 
 				ret += "/" + additionalParts.map(encodeURIComponent).join("/");
 
+				if(parent !== window) {
+					parent.postMessage({
+						type: "facilmap-hash",
+						hash: ret.replace(/^#/, "")
+					}, "*");
+				}
+
 				return ret;
 			};