Thursday, 10 August 2017

React-ing to the need for a modern MapGuide viewer (Part 18): Restoring the Quick Plot capture box

If you've been playing with mapguide-react-layout, you'll no doubt have noticed a glaring omission in the ported Quick Plot component.

The interactive map capture box.


Porting across the capture box sounded mostly simple:

  • Manage the temporary OL vector layer containing the capture box.
  • Attach an OL translate interaction so the capture box feature can be easily moved around by dragging the box around.
  • Auto-update box geometry based on change in paper size / orientation / scale
There was just one technical hurdle: Rotating the box.

For the longest time, I was wracking my brain figuring out how to replace the rotation "grip handle" using the new OpenLayers APIs and I couldn't figure it out. The APIs were there to rotate feature geometry. I heard about ol-rotate-feature and gave it a try, but I couldn't grasp how that interaction actually rotates features.

So I went back to the mental drawing board. OpenLayers has APIs to rotate features, so what we really just need was an intuitive UI input to enter the box rotation. If I couldn't figure out how to replicate the rotation "grip handle", then the next best thing was ... a numerical slider.

And with that, the missing piece was found and I was finally able to port over the final piece of functionality of the original Fusion QuickPlot widget.


In the above GIF, you might have noticed a message flash by.


This is merely a simple countermeasure against the fact that with current OpenLayers, you can rotate the map as well. So rather than deal with number crunching 2 sets of rotations, it is easier to just reset the rotation on the map and prevent the ability to rotate the map while the map capture box is active.

And with that, our Quick Plot component has reached feature parity with the original Fusion widget.

This (newly feature parity) Quick Plot will be available in the next release of mapguide-react-layout, whenever I decide that will be.

2 comments:

felixZVG said...

Hey Jackie. Awesome work with the new viewer. I am currently trying to convert my application from fusion to react. Is it possible, to get the current session id and the runtime mapname just after mounting the viewer? I have to modify layers in the mapguide Server directly at the start of the application, without letting the user click a button or something. (because i get the layers directly from the database instead of Maestro and have dynamic filters for every user)

Thanks

Felix

Jackie Ng said...

Not at the moment, as I haven't provided a post-init in the viewer that would allow you to bolt on a custom function to then do what you're after.

Watch this space: https://github.com/jumpinjackie/mapguide-react-layout/issues/150