[mapguide-users] react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

[Matze]

Hi,
is there a way in react-layout (v0.8 Ajax Viewer) to rebuild the
OnSelectionChanged/onMapClick workaround
<https://trac.osgeo.org/mapguide/wiki/CodeSamples/JavaScript/AJAXViewerEventHooking#Handlingviewerselection>
like in the normal MapGuide Ajax Viewer?

Thank you in advanced.








--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

[Jackie Ng]

There is no current hook to the outside (of react.js) world for map selection
changes.

It should be trivial for me to add such a hook as a mount() call option if
that is what you're after.

- Jackie



--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934p5309941.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

[Matze]

If it is possible, yes.

For what I need this:

As soon as the user touches/clicks on the map and occurs a change/creation
of a selection, the user will get a custum property info in the taskpane
with more properties than in the mapguide propertypane.

For this, I just need an event that the selection has changed. If the event
is fired, i will do some Ajax request by using the sessionId and
selectionXML to get the unique primary keys. Then I can do some database
queries and return the result to fillin the taskpane.

This will be also usefull for the other layouts like sidebar.html




--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934p5309951.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

[Jackie Ng]

I thought about this some more.

Since your aim is to ultimately be showing some kind of URL the task pane
(or new window, or frame) in response to a selection, and my aim is for this
viewer to be as much configuration-driven as it possibly can be (I want
custom coding to be a last resort solution where possible), I think the
easiest solution would be to add some kind of mount property that allows
certain InvokeURL commands to be automatically run on a selection change.

InvokeURL commands already have layer/selection filters and parameter
support. The only thing is such commands require manually clicking said
command from a referencing menu or toolbar after a selection has been made.

To put this another way, can you achieve what you're after currently with a
manually clicked InvokeURL command?

If so, I can easily make the manual part automatic.

- Jackie



--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934p5310066.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

[Matze]

In former times I did the invokeURL as you mentioned. Click/select a feature,
press a button with the invokeURL and the result ended up in the taskpane.
In this little example <https://geodaten.landkreis-fuerth.de/osgeodemo/>
(sorry, it's in german), you can see a workaround with the normal Ajax
Viewer. The user clicks on a feature in the map and than the result will
show up in a separate tab in the taskpane, without reload the whole
taskpane.

For that, it would be nice to configure the mount function with invokeURL
and/or a custum handler/script.



--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934p5310108.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

[Jackie Ng]

Thanks for the link, it makes it more clear what you're trying to achieve.

I think the easiest thing is for me to add a new viewer API to register a
handler for selection changes. It will be at the same level as other AJAX
viewer APIs, so you can get to it from the task pane content through
parent.parent

So your task pane content just needs a script block that is basically

window.onload = function() {
parent.parent.RegisterSelectionChangeHandler(function(selection) {
//Selection changed, update your task pane content here
});
};

The key is that you can do this from "inside" the viewer from the task pane
content, and not invasively from "outside" the viewer through a mount
parameter or custom pre-mounting code.

How does this sound?

- Jackie



--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934p5310155.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

[Matze]

That sound's great.
I think, this is a good solution.

Thank you in advanced.

Matze



--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934p5310235.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

[Jackie Ng]

I've made an issue to track this:
https://github.com/jumpinjackie/mapguide-react-layout/issues/144

- Jackie



--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934p5310240.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

[svlad]

Hi, we use nearly all fusion events (MAP_LOADED, MAP_SELECTION_ON,
MAP_SELECTION_OFF etc.) from outside (the fusion viewer is in an iframe).
Will this be possible with the new react-layout?
Thank you, svlad



--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934p5310242.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

[Jackie Ng]

You raise an interesting point about how our viewer offerings are being used.

Namely, I wasn't expecting embedding the viewer in a frame/iframe to feature
prominently as a common use case. The viewer API design thus far has been
going on the assumption that the react viewer is either the top-level
element or a sibling of top-level content.

So my current answer is: No not possible, but this is clearly something that
will need to be supported in some form so that migrating from Fusion is not
too painful.

- Jackie



--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934p5310244.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

[Jackie Ng]

I've just landed support so that task pane content can install/uninstall
selection change event handlers.

If you want to try this out right now (instead of waiting for me to release
0.9), grab the latest viewer.zip from the AppVeyor artifacts page:

https://ci.appveyor.com/project/jumpinjackie/mapguide-react-layout/build/artifacts

In there, there is a new examples/taskpane/viewerapi.html file that
demonstrates how to access the new enhanced viewer APIs from task pane
content and an example of how to register/unregister selection change event
handlers. The example selection handler converts whatever selection object
it receives to selection XML.

- Jackie



--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934p5313339.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

[svlad]

Hi, I placed this viewer in an iframe named "mapframe" and it works!

var myviewer = mapframe.GetViewerInterface();
and
mapframe.RegisterSelectionHandler(mySelectionHandler);

That's what I wanted!

Can I declare other handlers (MapLoaded etc.) without modify the viewer
sources?

Thanks, svlad



--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934p5313434.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

[Jackie Ng]

I've yet to implement a more generic event handler that covers most/all of
the Fusion events. This is the logged issue.

https://github.com/jumpinjackie/mapguide-react-layout/issues/145

- Jackie



--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934p5313531.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

[Jackie Ng]

Also take care that any selection handlers you register be unregistered
(either manually or on page unload) as well to prevent "dangling" event
handlers if you load other task pane content in from running another
command.

The samples page demonstrates this.

- Jackie



--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934p5313532.html
Sent from the MapGuide Users mailing list archive at Nabble.com.

[Jackie Ng]

With the 0.9 release, as part of refactoring to allow mapguide-react-layout
to reuse the existing Fusion backend, I had to implement polyfills for
Fusion APIs that the
query/theme/redline/featureinfo/selectwithin/buffer/search widgets use.

Which also meant I had to polyfill support for some Fusion events as well.

As of the 0.9 release, that Fusion events supported by mapguide-react-layout
are:

- Fusion.Event.MAP_SELECTION_ON
- Fusion.Event.MAP_SELECTION_OFF
- Fusion.Event.MAP_ACTIVE_LAYER_CHANGED
- Fusion.Event.MAP_BUSY_CHANGED

And the Fusion/<Widget> registerForEvent/deregisterForEvent APIs are
available to subscribe/unsubscribe from these events as well.

The current list of supported AJAX Viewer/Fusion APIs can be found here:

https://jumpinjackie.github.io/mapguide-react-layout/apicompat.html

- Jackie



--
View this message in context: http://osgeo-org.1560.x6.nabble.com/react-layout-Hooking-to-events-in-the-AJAX-viewer-OnSelectionChanged-tp5309934p5321910.html
Sent from the MapGuide Users mailing list archive at Nabble.com.