[mapguide-users] mapguide react.js embeded in div or iframe issue

Discussion:

Rémy Gourrat

2017-02-18 18:23:36 UTC

Hi Jackie,

I work on an application which embed your mapguide react.js viewer. Beautiful work !

I try to use the viewer in a div or in iframe, and base functions work fine.

But when mapguide is loaded in iframe or div I have this message in the console :

VM142 pageLoadFunctions.js:25 Uncaught TypeError: Cannot read property 'mapInit' of undefined at window.onload (VM142 pageLoadFunctions.js:25)

And when I want to use the digitize point function in "task_pane_digitizing.aspx"

I have this message :
task_pane_digitizing.aspx?SESSION=34b59d8e-f606-11e6-8000-501376d6fc7f_en_MTI3LjAuMC4x0AFC0AFB0AFA&...:30 Uncaught TypeError: Cannot read property 'DigitizePoint' of undefined
at DigitizePoint (task_pane_digitizing.aspx?SESSION=34b59d8e-f606-11e6-8000-501376d6fc7f_en_MTI3LjAuMC4x0AFC0AFB0AFA&...:30)
at HTMLInputElement.onclick (task_pane_digitizing.aspx?SESSION=34b59d8e-f606-11e6-8000-501376d6fc7f_en_MTI3LjAuMC4x0AFC0AFB0AFA&...:96)

is it a way to correctly load mapguide react.js viewer in a div/iframe ?

is it necessary to edit codes ?

Thanks

RÃ©my

-----
AG-Carto - Bayonne
--
View this message in context: http://osgeo-org.1560.x6.nabble.com/mapguide-react-js-embeded-in-div-or-iframe-issue-tp5308462.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

Jackie Ng

2017-02-20 08:18:45 UTC

Permalink

I haven't tested mapguide-react-layout in frame embedding scenarios. The
viewer is assumed to be mounted on the top-level content window.

What is your particular frame layout? Especially the relation between the
frame containing your viewer and the frame containing your error-ing
content?

- Jackie

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/mapguide-react-js-embeded-in-div-or-iframe-issue-tp5308462p5308565.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

Rémy Gourrat

2017-02-20 17:31:41 UTC

Permalink

Hi thanks for your answered,

My goal is to have a simple mapguide window (iframe) in my specific data collector application (my application is on top document) and just click button to get the x,y of the digitized point in the mapguide viewer.

i geted a solution with a mapguide iframe, I can digitize and get point x,y, it's works fine.

Curiously, the error message at loading about MapInit, for my moment usage seems not to be a problem for DigitizePoint..

My html page with mapguide in an iframe, if you want test :

consol.log return :

VM170 pageLoadFunctions.js:25 Uncaught TypeError: Cannot read property 'mapInit' of undefined
at window.onload (VM170 pageLoadFunctions.js:25)
window.onload @ VM170 pageLoadFunctions.js:25

<!DOCTYPE html>
<html>
<head>
<script>
function digitize_point_from_iframe()
{
document.getElementById("mapguide_iframe_react").contentWindow.GetMapFrame().DigitizePoint(OnPointDigitized);
}

function OnPointDigitized(point)
{
document.getElementById("ag_x").value = point.X;
document.getElementById("ag_y").value = point.Y;
}
</script>
</head>
<body>
<input id="ag_x" type="text">
<input id="ag_y" type="text">
<input id="ag_digit_point" type="button" onclick="digitize_point_from_iframe('mapguide_iframe_ajax');">
<BR>

<iframe id="mapguide_iframe_react" src="../mapguide/viewer/index.html?resource=Library://Samples/Sheboygan/Layouts/SheboyganAsp.WebLayout" width="1000" height="800">
</iframe>
</body>

Thanks for your help.

Rémy

Jackie Ng

2017-02-20 21:55:37 UTC

Permalink

Is pageLoadFunctions.js loaded by the Task Pane content? That file name
sounds familiar.

- Jackie

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/mapguide-react-js-embeded-in-div-or-iframe-issue-tp5308462p5308744.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

Rémy Gourrat

2017-02-21 09:52:04 UTC

Permalink

At loading of mapguide viewer react in the iframe, i see in console network that pageLoadFunctions.js is loaded with success

In the code I see the call to read the mapinit property wich failed :

if (parent.parent.mapFrame.mapInit)
return;

I don't understand why only it's failing for React.js viewer in iframe : the parent.parent.mapFrame.mapInit is a relative path !

And It's running with success if React.js viewer is on the top.

Have you an explication ?

Rémy

Rémy Gourrat

2017-02-20 11:04:53 UTC

Permalink

Hi thanks for your answered,

My goal is to have a simple mapguide window in my specific data collector application (on top) and just click button to get the x,y of the digitized point in mapguide window.

I join an html sample on sheybogan to copy to the webserver root with 4 solutions :
- mapguide viewer ajax first in iframe and other in div : return undefined X and Y
- mapguide viewer react.js in iframe and other in div : loading failed

I have a preference to use with react on mobile device...

Thanks for your advice.

RÃ©my

Jackie Ng

2017-02-21 13:06:48 UTC

Permalink

See explanation here:
https://github.com/jumpinjackie/mapguide-react-layout/issues/130

- Jackie

--
View this message in context: http://osgeo-org.1560.x6.nabble.com/mapguide-react-js-embeded-in-div-or-iframe-issue-tp5308462p5308841.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

Rémy Gourrat

2017-02-21 17:22:23 UTC

Permalink

Ok.

it's more clear now and I have a workaround !

Thanks