Demo

README.md

@@ -424,17 +424,3 @@ Sometimes we need to connect production data (map, tree) to debug, to do so, cop
 
 .
 .
-.
-.
-.
-.
-.
-.
-.
-.
-.
-.
-.
-.
-.
-.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "2.5.3",
+  "version": "2.6.0-demo.1",
   "private": true,
   "scripts": {
     "build": "next build",

src/components/App.js

@@ -71,6 +71,10 @@ function MapComponent() {
 
   function handleClickTree(tree) {
     log.warn('click tree:', tree);
+    if (window.parent) {
+      log.warn('DEMO:ok message parent');
+      window.parent.postMessage(tree, '*');
+    }
 
     const result = pathResolver.getPathWhenClickTree(
       tree,
@@ -159,6 +163,11 @@ function MapComponent() {
     const isAdmin = !!router.asPath.match(/admin/);
     if (!isAdmin) {
       map.on(Map.REGISTERED_EVENTS.MOVE_END, () => {
+        log.warn('DEMOXXX move end:');
+        if (window.parent) {
+          log.warn('DEMO:ok message parent');
+          window.parent.postMessage('DEMOxxx foo', '*');
+        }
         log.warn('update url');
         const path = pathResolver.updatePathWhenMapMoveEnd(
           window.location,

src/pages/_app.js

@@ -8,18 +8,18 @@ import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { userAgentFromString } from 'next/server';
 import React from 'react';
+import Layout from 'components/Layout';
+import LayoutDashboard from 'components/LayoutDashboard';
+import LayoutEmbed from 'components/LayoutEmbed';
+import LayoutMobile from 'components/LayoutMobile';
+import LayoutMobileB from 'components/LayoutMobileB';
+import LayoutMobileC from 'components/LayoutMobileC';
+import { DrawerProvider } from 'context/DrawerContext';
+import { ConfigProvider, defaultConfig } from 'context/configContext';
+import { CustomThemeProvider } from 'context/themeContext';
+import { useLocalStorage, useEmbed } from 'hooks/globalHooks';
+import { MapContextProvider } from 'mapContext';
 import packageJson from '../../package.json';
-import Layout from '../components/Layout';
-import LayoutDashboard from '../components/LayoutDashboard';
-import LayoutEmbed from '../components/LayoutEmbed';
-import LayoutMobile from '../components/LayoutMobile';
-import LayoutMobileB from '../components/LayoutMobileB';
-import LayoutMobileC from '../components/LayoutMobileC';
-import { DrawerProvider } from '../context/DrawerContext';
-import { ConfigProvider, defaultConfig } from '../context/configContext';
-import { CustomThemeProvider } from '../context/themeContext';
-import { useLocalStorage, useEmbed } from '../hooks/globalHooks';
-import { MapContextProvider } from '../mapContext';
 
 log.warn(`Web Map Client version ${packageJson.version}`);
 
@@ -136,6 +136,13 @@ function TreetrackerApp({ Component, pageProps, device, config }) {
     nextExtraLoading,
   };
 
+  const isDemo = !!router.asPath.match(/demo/);
+  if (isDemo) {
+    return (
+      <Component {...pageProps} {...extraProps} />
+    );
+  }
+
   const isAdmin = !!router.asPath.match(/admin/);
   if (isAdmin) {
     return (

src/pages/demo.js

@@ -0,0 +1,47 @@
+import React from 'react';
+// import { Map } from 'treetracker-web-map-core';
+
+const label = 'DEMO:';
+function Demo() {
+  const iframeRef = React.useRef();
+
+  React.useEffect(() => {
+    // jjiframeRef.current.contentWindow.alert("OK");
+    setTimeout(() => {
+      //      const { map } =
+      //        iframeRef.current.contentDocument.querySelector('#map-canvas');
+      //      console.log(label, 'map:', map);
+      //      map.on('move-end', (data) => {
+      //        console.log(label, 'onMoveEnd:', data);
+      //      });
+      //      map.on('tree-selected', (data) => {
+      //        console.log(label, 'select tree:', data);
+      //      });
+      //      map.onClickTree((data) => {
+      //        console.log(label, 'onClickTree:', data);
+      //      });
+      window.addEventListener(
+        'message',
+        (e) => console.warn(label, 'message:', e),
+        false,
+      );
+    }, 10000);
+  }, []);
+
+  return (
+    <div>
+      <h1>demo</h1>
+      <iframe
+        id="treetracker-iframe"
+        title="treetracker"
+        ref={iframeRef}
+        src="http://localhost:3000/"
+        // src="https://map.treetracker.org/"
+        width="800px"
+        height="600px"
+      />
+    </div>
+  );
+}
+Demo.isCLayout = true;
+export default Demo;